/* pn-leaderboard.css - the public board, standing on the stage.
   CEO 2026-10-14: "this isnt HOUSE design either - I like the background image but this should all be in iPad";
   "Add agency value and status as the key metric not points"; "Simplify and align EVERYTHING".

   ONE IDEA: the room is the photograph (stage lights, the crowd), the iPad is the object in it, and the board is the only
   thing lit on the screen. Agency value is the headline number; the leader gets the one big (orange) cell, everyone else is
   a flush row on the ground, no box per row.

   Device = the game's own frame recipe (pn-desk-20261004 section 3 / pn-stage-20261004): 5px graphite aluminium band + 6px black
   glass, 38px band radius, screen radius 26, the glass-light corner, power button + volume rocker, contact shadow. It is copied,
   not re-drawn, because the game's sheets are scoped to body.pn-folio and cannot be linked into a public page without the game.
   Inside: STYLE_SOURCE_OF_TRUTH 5g/5i (Inter 900 sentence-case headings, mono only for aligned columns, no uppercase
   micro-labels), PN_DESIGN_RULES 5 (orange = the one hero block + the one action), UX_RULES 11 (everything animates in,
   nothing depends on the animation finishing, reduced motion is a first-class rendering). */

@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(../fonts/inter-900.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-display:swap;src:url(../fonts/jetbrainsmono-400.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --orange:#F97316; --orange-hi:#FB8A3C; --on-orange:#14161B; --peach:#FDBA74;
  --field:#171A21; --card:#212630; --card-2:#2B313E; --card-3:#383F50; --sunken:#12151B;
  --rail:#0B0C10; --rail-2:#171A21; --rail-line:#262A34;
  --line:rgba(255,255,255,.10); --line-strong:#8A92A6;
  --ink:#F4F5F7; --ink-2:#BCC2CF; --ink-3:#98A0B3; --graphite:#9CA3AF;
  --good:#4ADE80; --bad:#FF8A83;
  --r:24px; --r-sm:16px; --r-xs:12px;
  --ar:1.7;
  --stage-w:max(min(86vw,calc(86vh*var(--ar))),min(92vw,660px));
  --stage-h:calc(var(--stage-w)/var(--ar));
  --stage-top:calc((100vh - var(--stage-h))*.46);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:721px) and (orientation:portrait){:root{--ar:.75}}

*{box-sizing:border-box}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
html,body{height:100%}
body{margin:0;background:#05070C;color:var(--ink);font:400 16px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- THE ROOM: the awards-night photograph, graded so the device is the brightest thing ---------- */
.lb-room{position:fixed;inset:0;overflow:hidden;background:#07090F;z-index:0;pointer-events:none}
.lb-photo{position:absolute;inset:0;background:url(../season/standing-awards-night.webp) center 28%/cover no-repeat;filter:brightness(1.08) saturate(1.05)}
.lb-grade{position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 72% at 50% 46%,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 54%,rgba(0,0,0,.62) 100%),
             linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 62%,rgba(0,0,0,.46) 100%)}

/* ---------- THE DEVICE ---------- */
.lb-stage{position:fixed;inset:0;z-index:1;pointer-events:none}
.lb-device{position:absolute;left:50%;top:var(--stage-top);width:var(--stage-w);height:var(--stage-h);transform:translateX(-50%);pointer-events:auto;
  border:5px solid transparent;padding:6px;border-radius:38px;
  background:
    linear-gradient(160deg,#0c0f13 0%,#030405 36%,#06080b 100%) padding-box,
    repeating-linear-gradient(0deg,rgba(255,255,255,.032) 0 1px,rgba(255,255,255,0) 1px 2px) border-box,
    linear-gradient(112deg,transparent 0 26%,rgba(255,255,255,.16) 36%,rgba(255,255,255,.34) 40%,rgba(255,255,255,.1) 46%,transparent 56%) border-box,
    radial-gradient(90px 56px at 5% 2.5%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 100%) border-box,
    linear-gradient(135deg,#323840 0%,#5d656e 13%,#a0a8b1 27%,#5e666f 41%,#252a30 57%,#171b20 69%,#4c545c 85%,#2b3137 100%) border-box;
  background-origin:border-box;background-blend-mode:normal,screen,screen,screen,normal;
  outline:1px solid rgba(255,255,255,.3);outline-offset:-1px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.12),inset -1px -1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(0,0,0,.72),0 1px 1px rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.5),
    0 12px 26px rgba(0,0,0,.45),0 30px 60px -4px rgba(0,0,0,.42),0 70px 120px -10px rgba(0,0,0,.4),
    0 0 150px 10px rgba(249,115,22,.14)}
.lb-device::before{content:"";position:absolute;inset:4px;border-radius:33px;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.1)}
.lb-device::after{content:"";position:absolute;inset:-3px -3px 0 0;pointer-events:none;z-index:3;
  background:
    linear-gradient(180deg,#232930 0%,#7b838c 50%,#262c33 100%) right 11% top 0/40px 3px no-repeat,
    linear-gradient(90deg,#252b32 0%,#767e88 55%,#2a3037 100%) right 0 top 19%/3px 30px no-repeat,
    linear-gradient(90deg,#252b32 0%,#767e88 55%,#2a3037 100%) right 0 top 29%/3px 30px no-repeat}
.lb-contact{position:absolute;left:3%;right:3%;bottom:-5px;height:22px;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,0) 100%);transform:translateY(55%)}

.lb-screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:var(--field);container:lb/inline-size}
/* the glass light (approved: white 5.5% at most, gone by 35%) and the film grain the game's screen carries */
.lb-screen::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 35%);mix-blend-mode:screen}
.lb-screen::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- inside the glass ---------- */
.lb-app{height:100%;display:grid;grid-template-columns:minmax(300px,31%) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}

/* the rail: dark in both themes (alternation law); the same photograph, lit down from the top */
.lb-rail{position:relative;isolation:isolate;background:var(--rail);padding:26px 28px 24px;display:flex;flex-direction:column;gap:20px;min-height:0;overflow-y:auto;scrollbar-width:none}
.lb-rail::-webkit-scrollbar{display:none}
.lb-rail::before{content:"";position:absolute;inset:0 0 auto 0;height:62%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,16,.1) 0%,rgba(11,12,16,.55) 55%,var(--rail) 100%),url(../season/standing-awards-night.webp) 38% 22%/cover no-repeat}
.lb-brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lb-brand a{display:inline-flex;align-items:center;min-height:44px;margin:-9px 0}
.lb-brand img{height:26px;width:auto}
.lb-rail h1{font-weight:900;font-size:clamp(40px,5.2cqi,64px);line-height:.98;letter-spacing:-.03em;text-wrap:balance;margin-top:auto}
.lb-rule{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:34ch}
.lb-rule b{color:var(--ink);font-weight:700}

.lb-lock{background:rgba(23,26,33,.82);border:1px solid var(--rail-line);border-radius:var(--r-sm);padding:16px 18px;display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(10px)}
.lb-lock-k{font-size:14px;font-weight:600;color:var(--ink-3)}
.lb-cd{display:flex;align-items:baseline;gap:4px 11px;flex-wrap:nowrap;white-space:nowrap;font-weight:900;font-size:clamp(24px,2.7cqi,34px);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lb-cd span{display:inline-flex;align-items:baseline;gap:3px}
.lb-cd i{font-style:normal;font-weight:600;font-size:15px;letter-spacing:0;color:var(--ink-3)}
.lb-lock-when{font-size:14px;color:var(--ink-2)}

.lb-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;white-space:nowrap;border-radius:999px;border:0;
  background:var(--orange);color:var(--on-orange);-webkit-text-fill-color:var(--on-orange);font-weight:800;font-size:16px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s}
.lb-cta svg{width:18px;height:18px;flex:none;transition:transform .18s var(--ease)}
.lb-cta:hover{background:var(--orange-hi)}
.lb-cta:hover svg{transform:translateX(3px)}
.lb-cta:active{transform:scale(.975)}
.lb-foot{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--ink-3)}
.lb-foot a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.lb-foot a:hover{color:var(--ink)}
.lb-foot--end{display:none}

/* the board */
.lb-board{display:flex;flex-direction:column;gap:18px;padding:24px 30px 0;min-height:0;min-width:0}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lb-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--sunken);border:1px solid var(--line)}
.lb-tab{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--ink-2);font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;
  transition:background-color .18s,color .18s,transform .18s var(--ease)}
.lb-tab:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.lb-tab[aria-selected="true"]{background:var(--ink);color:var(--on-orange);-webkit-text-fill-color:var(--on-orange)}
.lb-tab:active{transform:scale(.97)}
.lb-tab[disabled]{cursor:default;color:var(--ink-3)}
.lb-tab[disabled]:hover{background:transparent;color:var(--ink-3)}
.lb-meta{font-size:14px;color:var(--ink-3);text-align:right}

/* the list scrolls inside the glass and fades out at its foot, so a row is never sliced mid-glyph */
.lb-scroll{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:44px;margin:0 -30px;padding-left:30px;padding-right:30px;scrollbar-width:thin;scrollbar-color:var(--card-3) transparent;display:flex;flex-direction:column;gap:18px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent 100%)}
.lb-scroll>*{flex:none}

/* the one big cell: the leader. Dark information slab (house colour law: orange is never a block), the value is the loudest thing on the board */
.lb-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);border-radius:var(--r);padding:22px 28px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rk nm val";align-items:center;column-gap:26px;row-gap:6px;
  background:radial-gradient(110% 150% at 0% 0%,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 55%),linear-gradient(135deg,#323A4B 0%,#242A36 55%,#1D222B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06),0 18px 40px -16px rgba(0,0,0,.65)}
.lb-hero::before{content:"";position:absolute;right:-18px;top:-18px;width:190px;height:190px;z-index:-1;pointer-events:none;opacity:.16;
  background-image:radial-gradient(var(--ink) 22%,transparent 24%);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle at 100% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(circle at 100% 0%,#000 0%,transparent 70%)}
.lb-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,70%) var(--my,10%),rgba(255,255,255,.12),rgba(255,255,255,0) 62%)}
.lb-hero:hover::after{opacity:1}
.lb-hero .hk{grid-area:rk;font-weight:900;font-size:clamp(76px,9.4cqi,128px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink)}
.lb-hero .hn{grid-area:nm;min-width:0;display:flex;flex-direction:column;gap:4px}
.lb-hero .hl{font-size:14px;font-weight:600;color:var(--ink-3)}
.lb-hero h2{font-weight:900;font-size:clamp(26px,3.3cqi,42px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lb-hero .hf{font-size:15px;color:var(--ink-2);display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:6px}
.lb-hero .hv{grid-area:val;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lb-hero .hv b{font-weight:900;font-size:clamp(42px,5.8cqi,84px);line-height:.92;letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lb-hero .hv span{font-size:14px;font-weight:600;color:var(--ink-3)}
/* an empty board: one centred, filled statement and the way in */
.lb-hero.is-open{grid-template-columns:minmax(0,1fr);grid-template-areas:"rk" "nm";justify-items:center;align-content:center;text-align:center;row-gap:10px;padding:40px 32px}
.lb-hero.is-open .hn{align-items:center}
.lb-hero.is-open .hk{font-size:clamp(64px,8cqi,112px);color:var(--ink-3)}
.lb-hero.is-open h2{-webkit-line-clamp:3;font-size:clamp(28px,3.6cqi,44px)}
.lb-hero.is-open .hsub{font-size:16px;line-height:1.45;max-width:44ch;color:var(--ink-2);margin-top:6px}
.lb-hero.is-open .lb-cta{margin-top:16px}
body.is-empty .lb-rail>.lb-cta{display:none}

/* status: encoded in FILL, a gentle ladder - none of them outshines the value in its row */
.lb-pill{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-weight:600;font-size:14px;line-height:1.25;white-space:nowrap}
.lb-pill.startup{border:1.5px solid var(--line-strong);color:var(--ink-2);padding:2.5px 10.5px}
.lb-pill.agency{background:var(--card-3);color:var(--ink)}
.lb-pill.superagency{background:#4B5468;color:var(--ink)}
.lb-pill.holdco{background:rgba(253,186,116,.16);color:var(--peach);border:1.5px solid rgba(253,186,116,.55);padding:2.5px 10.5px}
.lb-pill.you{background:transparent;border:1.5px solid var(--ink-2);color:var(--ink);padding:2.5px 10.5px;margin-left:8px}
.lb-hero .lb-pill.you{margin:0}

/* the table: flush on the ground, hairlines drawn by a pseudo-element (a border + radius curls at the ends) */
.lb-table{display:flex;flex-direction:column}
.lb-cols,.lb-row{display:grid;grid-template-columns:44px minmax(0,1fr) 150px 100px;align-items:center;column-gap:14px}
.lb-table.nost .lb-cols,.lb-table.nost .lb-row{grid-template-columns:44px minmax(0,1fr) 100px}
.lb-cols{position:relative;padding:0 14px 10px;font-size:13px;font-weight:600;color:var(--ink-3)}
.lb-cols::after,.lb-row::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:var(--line)}
.lb-cols .val{color:var(--ink-2);white-space:nowrap;text-align:right}
.lb-row{position:relative;min-height:60px;padding:8px 14px;border-radius:var(--r-xs);transition:background-color .18s,transform .18s var(--ease)}
.lb-row:hover{background:rgba(255,255,255,.045);transform:translateX(3px)}
.lb-row .rk{font-weight:800;font-size:18px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lb-row .ag{min-width:0;display:flex;flex-direction:column}
.lb-row .ag b{font-weight:700;font-size:17px;line-height:1.22;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;overflow-wrap:anywhere}   /* the name is the identity column: it wraps, it is never cut */
.lb-row .ag small{font-size:14px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .st{display:flex;align-items:center}
.lb-row .val{text-align:right;font-weight:800;font-size:19px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lb-row.me{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.lb-row.me::after{display:none}
.lb-note{font-size:14px;color:var(--ink-3);padding:2px 14px 0}

/* states: loading, error */
.lb-skel{height:60px;border-radius:var(--r-xs);background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 100%) 0 0/220% 100%;animation:lb-shimmer 1.4s linear infinite}
.lb-skel.big{height:132px;border-radius:var(--r)}
.lb-err{border:1.5px solid var(--line-strong);border-radius:var(--r);padding:24px 26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.lb-err h2{font-weight:900;font-size:22px;letter-spacing:-.03em;line-height:1.12}
.lb-err p{color:var(--ink-2);max-width:52ch}
.lb-retry{min-height:44px;padding:0 22px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;transition:background-color .18s,transform .18s var(--ease)}
.lb-retry:hover{background:rgba(255,255,255,.08)}
.lb-retry:active{transform:scale(.97)}

/* ---------- motion: rise. Resting state is always opaque and in place (fill-mode: backwards only) ---------- */
@keyframes lb-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes lb-shimmer{to{background-position:-220% 0}}
.rise{animation:lb-rise .62s var(--ease) backwards;animation-delay:calc(var(--i,0)*60ms + 80ms)}

/* ---------- a short board (1-4 agencies) breathes instead of padding itself with placeholders ---------- */
@container lb (min-width:761px){
  @media (min-height:821px){
    .lb-scroll.few .lb-hero:not(.is-open){flex:1 1 auto;min-height:230px;max-height:350px}
    .lb-scroll.few .lb-hero .hv b{font-size:clamp(56px,7.6cqi,108px)}
    .lb-scroll.few .lb-row{min-height:78px}
    .lb-scroll.empty .lb-hero{flex:1 1 auto;max-height:440px}
  }
}

/* ---------- mid width (an iPad on its side): the rail narrows, the table tightens ---------- */
@container lb (max-width:1020px){
  .lb-app{grid-template-columns:minmax(272px,32%) minmax(0,1fr)}
  .lb-rail{padding:22px 20px 20px}
  .lb-board{padding:20px 22px 0}
  .lb-scroll{margin:0 -22px;padding-left:22px;padding-right:22px}
  .lb-cols,.lb-row{grid-template-columns:30px minmax(0,1fr) 118px 78px;column-gap:10px}
  .lb-table.nost .lb-cols,.lb-table.nost .lb-row{grid-template-columns:30px minmax(0,1fr) 78px}
  .lb-row .val{font-size:18px}
  .lb-cd{font-size:25px;gap:2px 9px}
  .lb-cd i{font-size:14px}
  .lb-cta{font-size:15px;padding:0 16px}
  .lb-cta svg{display:none}
}

/* ---------- stacked (tablet upright, phone): the rail becomes the head of one scrolling screen ---------- */
@container lb (max-width:760px){
  .lb-app{display:block;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--card-3) transparent;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent 100%);mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent 100%)}
  .lb-cd{font-size:30px;gap:4px 14px;flex-wrap:wrap}
  .lb-cta{font-size:16px;padding:0 26px}
  .lb-cta svg{display:block}
  .lb-rail{overflow:visible;padding:22px 22px 24px;gap:16px}
  .lb-rail::before{height:100%;background:linear-gradient(180deg,rgba(11,12,16,.5) 0%,rgba(11,12,16,.82) 42%,rgba(11,12,16,.96) 78%,var(--rail) 100%),url(../season/standing-awards-night.webp) 40% 0/cover no-repeat}
  .lb-rail h1{margin-top:44px;font-size:clamp(44px,12cqi,64px)}
  .lb-foot--rail{display:none}
  .lb-board{padding:20px 20px 0}
  .lb-scroll{margin:0 -20px;padding-left:20px;padding-right:20px;overflow:visible;padding-bottom:6px;-webkit-mask-image:none;mask-image:none}
  .lb-foot--end{display:flex;padding:8px 0 16px}
  .lb-hero{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rk nm" "val val";padding:20px 22px;column-gap:18px;row-gap:14px}
  .lb-hero .hk{font-size:72px}
  .lb-hero .hv{text-align:left;flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .lb-hero .hv b{font-size:clamp(44px,13cqi,60px)}
  .lb-hero.is-open{grid-template-columns:minmax(0,1fr);grid-template-areas:"rk" "nm"}
  .lb-hero.is-open .hk{font-size:64px}
  .lb-cols{display:none}
  .lb-row,.lb-table.nost .lb-row{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"rk ag val" "rk st st";row-gap:6px;padding:12px 6px;min-height:0}
  .lb-table.nost .lb-row{grid-template-areas:"rk ag val";row-gap:0}
  .lb-row::after{left:6px;right:6px}
  .lb-row .rk{grid-area:rk;align-self:start;padding-top:2px}
  .lb-row .ag{grid-area:ag}
  .lb-row .val{grid-area:val}
  .lb-row .st{grid-area:st}
  .lb-meta{width:100%;text-align:left;order:3}
}
/* an upright tablet: the rail tightens so the board starts high on the screen (countdown and button share a row) */
@container lb (min-width:480px) and (max-width:760px){
  .lb-rail{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:12px;align-items:end;padding:18px 24px 20px}
  .lb-rail>.lb-brand,.lb-rail>h1,.lb-rail>.lb-rule{grid-column:1/-1}
  .lb-rail h1{margin-top:12px;font-size:clamp(40px,7.2cqi,52px)}
  .lb-rail>.lb-lock{padding:12px 16px}
  .lb-rail>.lb-cta{min-height:56px}
  .lb-cd{flex-wrap:nowrap;font-size:28px}
  .lb-hero{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rk nm val";align-items:center;column-gap:22px;row-gap:0}
  .lb-hero .hk{font-size:84px}
  .lb-hero .hv{text-align:right;flex-direction:column;align-items:flex-end;gap:2px}
  .lb-hero .hv b{font-size:clamp(46px,8cqi,64px)}
  .lb-cols{display:grid;padding:0 10px 8px}
  .lb-cols,.lb-row,.lb-table.nost .lb-cols,.lb-table.nost .lb-row{grid-template-columns:34px minmax(0,1fr) 132px 92px;column-gap:12px}
  .lb-table.nost .lb-cols,.lb-table.nost .lb-row{grid-template-columns:34px minmax(0,1fr) 92px}
  .lb-row,.lb-table.nost .lb-row{grid-template-areas:"rk ag st val";row-gap:0;padding:10px}
  .lb-table.nost .lb-row{grid-template-areas:"rk ag val"}
  .lb-row .rk{align-self:center;padding-top:0}
  .lb-row::after{left:10px;right:10px}
}

/* ---------- desktop: the page never scrolls, the device is the stage ---------- */
@media (min-width:721px){
  html,body{overflow:hidden}
}
/* a short window: the site links move to the foot of the list, the leader cell and rows tighten, so the first five places are in view */
@media (min-width:721px) and (max-height:820px){
  .lb-foot--rail{display:none}
  .lb-foot--end{display:flex;padding:6px 0 0}
  .lb-foot--end a{min-height:40px}
  .lb-rail{gap:14px;padding-top:20px;padding-bottom:18px}
  .lb-lock{padding:12px 16px}
  .lb-board{padding-top:18px;gap:12px}
  .lb-scroll{gap:12px}
  .lb-hero{padding:14px 22px}
  .lb-hero .hk{font-size:64px}
  .lb-hero h2{font-size:clamp(24px,2.6cqi,32px)}
  .lb-hero .hf{margin-top:2px}
  .lb-hero .hv b{font-size:clamp(40px,4.6cqi,60px)}
  .lb-hero.is-open{padding:26px 24px}
  .lb-row{min-height:54px;padding-top:5px;padding-bottom:5px}
  .lb-row .rk{font-size:17px}
  .lb-cols{padding-bottom:6px}
}
@media (min-width:721px) and (max-height:640px){
  .lb-hero{padding:10px 20px}
  .lb-hero .hk{font-size:52px}
  .lb-row{min-height:50px}
  .lb-tab{min-height:38px}
}

/* ---------- phone: no room, no bezel. The screen is the page. ---------- */
@media (max-width:720px){
  html,body{height:auto}
  body{background:var(--field)}
  .lb-room,.lb-contact{display:none}
  .lb-device::before,.lb-device::after{display:none}
  .lb-stage{position:static;pointer-events:auto}
  .lb-device{position:static;transform:none;width:100%;height:auto;padding:0;border:0;border-radius:0;background:none;outline:0;box-shadow:none}
  .lb-screen{height:auto;min-height:100vh;min-height:100dvh;border-radius:0;overflow:visible}
  .lb-screen::before,.lb-screen::after{display:none}
  .lb-app{height:auto;display:block;-webkit-mask-image:none;mask-image:none}
  .lb-rail::before{background:linear-gradient(180deg,rgba(11,12,16,.5) 0%,rgba(11,12,16,.82) 42%,rgba(11,12,16,.96) 78%,var(--rail) 100%),url(../season/standing-awards-night@small.webp) 40% 0/cover no-repeat}
  .lb-board{padding-bottom:20px}
  .lb-scroll{overflow:visible;padding-bottom:0;flex:none}
}
@media (max-width:360px){
  .lb-cd{font-size:26px}
  .lb-hero .hk{font-size:60px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .lb-hero::after{display:none}
}