/* hotkey.gg — SHARED LEADERBOARD/DESKS STYLES (extracted r269 from leaderboard.html
   so leaderboard.html and desks.html render from one sheet) */
  :root{
    --bg:#292b31; --surface:#383b42; --surface2:#43474f; --line:#5a5e68;
    --text:#f0f1ec; --muted:#a8adb3; --faint:#767d87;
    --accent:#6ec9a0; --accent-dim:#4a8f72; --accent-glow:rgba(110,201,160,.2);
    --warn:#d9a441; --bad:#c8533f;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --sans:'Hanken Grotesk',system-ui,sans-serif;
    --maxw:1180px;   /* r66: = game space */
  }
  *{margin:0; padding:0; box-sizing:border-box}
  html{scrollbar-gutter:stable; scroll-behavior:smooth}
  body{background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased}
  /* r62: texture retired — the game page is flat; these pages match it */
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1}
  a{color:inherit; text-decoration:none}

  /* nav styles come from nav.css (included below) */

  header.head{padding:12px 0 10px; position:relative; z-index:1}   /* r67: flush with the game box */
  .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
  h1{font-size:22px; font-weight:700; letter-spacing:-.4px; margin-bottom:4px}
  .sub{font-size:16px; color:var(--muted); max-width:520px}

  main{padding-bottom:80px; position:relative; z-index:1}
  #boards{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:start}
  @media(max-width:680px){ #boards{grid-template-columns:1fr} }
  .board{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden}
  .section-title{grid-column:1/-1; font-family:var(--mono); font-size:13px; color:var(--muted); text-transform:uppercase;
    letter-spacing:1.5px; margin:22px 0 10px; padding:0 0 6px 1px; border-bottom:1px solid var(--line)}
  .section-title:first-child{margin-top:0}
  /* r62: caption strips mirror the game frame's ribbon/✓ row */
  .board-cap{display:flex; align-items:center; justify-content:space-between; min-height:34px; padding:6px 14px;
    background:var(--surface2); border-bottom:1px solid var(--line)}
  .board-cap h2{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  .board-cap .lvl{font-family:var(--mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:1px}
  /* r84: one horizontal rhythm — 14px, matching the caption strips (rows sat at 22px) */
  /* r382 (Wolf: dead horizontal middles): 4 columns — the .mid stat (eff% + gap-to-#1,
     built in lb.js rowHtml) fills what was a dead stretch of name column. Session rows
     and open lanes ship an empty .mid so the template holds everywhere. */
  .row{display:grid; grid-template-columns:48px minmax(0,1fr) auto 92px; column-gap:10px; align-items:center; min-height:42px;
    padding:9px 14px; border-bottom:1px solid var(--line); font-size:13.5px; font-family:var(--mono)}
  .row .mid{font-size:11px; color:var(--faint); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
  @media(max-width:640px){ .row{grid-template-columns:48px minmax(0,1fr) 92px} .row .mid{display:none} }
  .row:last-child{border-bottom:none}
  .rk{font-family:var(--mono); font-weight:700; color:var(--muted)}
  .rk.r1{color:#e0b341; text-shadow:0 0 12px rgba(224,179,65,.45)}
  .rk.r2{color:#c3c8cf}
  .rk.r3{color:#c08457}
  .row.top{background:rgba(224,179,65,.06)}   /* r62 flat */
  .row.top .nm{font-weight:700}
  /* r382: .tm .gap retired — the chase number moved into every row's .mid column */
  .row.me{background:var(--accent-glow)}
  .row.me .nm::after{content:" · you"; color:var(--accent); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.3px}
  .row.you-extra{border-top:1px dashed var(--line)}
  .you-gap{padding:5px 14px; font-family:var(--mono); font-size:13px; color:var(--faint); text-align:center; letter-spacing:2px}
  .nm{font-weight:500}
  .tm{font-family:var(--mono); text-align:right; font-weight:500}
  .empty{padding:18px 14px; color:var(--faint); font-family:var(--mono); font-size:13px; text-align:center}
  /* r404 (Wolf): the daily board is a two-column list — no long horizontal lanes, ~20
     names in the hero spot. Column-fill so 1–10 ride the left, 11–20 the right. */
  .daily-2col{columns:2; column-gap:22px; padding:8px 14px 6px}
  .d2-row{break-inside:avoid; display:flex; align-items:center; gap:9px; padding:5px 8px; border-radius:7px;
    font-family:var(--mono); font-size:12.5px; color:var(--muted)}
  .d2-row.t10{background:rgba(224,179,65,.05)}
  .d2-row.me{background:var(--accent-glow); color:var(--text)}
  .d2-row.me .d2-nm::after{content:" · you"; color:var(--accent); font-size:10.5px; font-weight:700}
  .d2-rk{min-width:22px; text-align:center; color:var(--faint); font-size:11px; font-weight:700; flex:none}
  .d2-rk.r1{color:#e0b341} .d2-rk.r2{color:#c3c8cf} .d2-rk.r3{color:#c08457}
  .d2-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); cursor:pointer}
  .d2-nm[data-uid]:hover{text-decoration:underline; text-underline-offset:3px}
  .d2-tm{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--accent); font-size:12px; flex:none}
  .d2-you{display:flex; align-items:center; gap:9px; padding:6px 14px; margin-top:4px; border-top:1px dashed var(--line);
    font-family:var(--mono); font-size:12.5px; color:var(--text); background:var(--accent-glow)}
  .d2-you .d2-nm{flex:1} .d2-you .d2-tm{color:var(--accent)}
  @media(max-width:520px){ .daily-2col{columns:1} }
  /* ---- dashboard panels ---- */
  /* r269: every top-level row of #boards spans the full page grid — the hero and the
     featured/seclead strips were falling into a single column of the 2-col board grid */
  #boards > .hero, #boards > .featured, #boards > #secleadMount, #boards > .panel{grid-column:1/-1}
  .hero{display:grid; grid-template-columns:minmax(200px,.75fr) minmax(215px,.8fr) minmax(300px,1.45fr); gap:16px; margin-bottom:18px}   /* r267: floors + the players panel gets the width its rows need */
  .hero.two{grid-template-columns:minmax(0,462px) minmax(320px,1fr)}   /* r293: ladder panel retired — card + top players share the row. r423 (Wolf, ONE-CARD LAW): the card column seats the canonical 462px hkPlayerCard */
  @media(max-width:1080px){ .hero, .hero.two{grid-template-columns:1fr 1fr} }   /* r297: .hero.two out-specified the collapse rules — the two-panel hero never stacked on mobile and Top Players clipped off-screen */
  @media(max-width:820px){ .hero, .hero.two{grid-template-columns:1fr} }
  .ld-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:7.5px 8px; border-radius:9px; min-height:38px;
    font-family:var(--mono); font-size:12px; color:var(--muted)}
  .ld-row .ld-req{margin-left:auto; font-size:10px; color:var(--faint); text-align:right; line-height:1.5}
  .ld-row .ld-req i{display:block; font-style:normal; white-space:nowrap}
  .ld-row.here{background:var(--accent-glow); color:var(--text); border:1px solid var(--accent-dim)}
  .ld-row.here .ld-req{color:var(--muted)}
  .ld-row.locked{opacity:.55}
  /* r114: public player cards */
  [data-uid]{cursor:pointer}
  .sch{font-family:var(--mono); font-size:9px; color:var(--muted); border:1px solid var(--line);
    border-radius:6px; padding:1px 5px; margin-left:7px; letter-spacing:.4px; vertical-align:middle}
  /* r252: leaderboard rows get the school chip with a little breathing room */
  .nm .school-chip{margin-left:7px}
  /* r252: School Standings panel — school-vs-school rivalry */
  .standings{margin-top:18px}
  .st-list{display:flex; flex-direction:column}
  /* left-aligned: rank · chip · name hug the left; stats pushed to the right edge */
  .st-row{display:flex; align-items:center; gap:11px;
    padding:9px 10px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12.5px}
  .st-row:last-child{border-bottom:none}
  .st-row.mine{background:var(--accent-glow); border-radius:8px}
  .st-rk{flex:0 0 auto; width:20px; color:var(--faint); text-align:right}
  .st-rk.m1{color:#e0b341} .st-rk.m2{color:#b8c0c8} .st-rk.m3{color:#cc8b53}
  .st-row .school-chip{flex:0 0 auto}
  .st-body{min-width:0; margin-right:auto; display:flex; flex-direction:column; gap:1px}
  .st-name{color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .st-champ{color:var(--faint); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .st-stats{flex:0 0 auto; display:flex; gap:15px; color:var(--muted); text-align:right; white-space:nowrap}
  .st-stats b{color:var(--text); font-weight:700; font-variant-numeric:tabular-nums}
  .st-stats .crown b{color:var(--warn)}
  /* r269: desks.html — the two standings panels ride side by side in .featured */
  .featured .standings{margin-top:0}
  .st-row .dk-mini{flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:var(--accent-glow);
    border:1px solid var(--accent-dim); display:flex; align-items:center; justify-content:center;
    font-size:10px; color:var(--accent)}
  a.st-row:hover{background:var(--surface2); border-radius:8px}
  @media(max-width:560px){ .st-stats .boards{display:none} }
  .nm[data-uid]:hover, .ros-nm[data-uid]:hover, span[data-uid]:hover{text-decoration:underline; text-underline-offset:3px}
  .pub-wrap{position:fixed; inset:0; z-index:220; background:color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh}
  .pub-card{position:relative; width:min(462px, 96vw); background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden}
  /* r407 (Wolf): close/report ride OUTSIDE the .uc so the card object matches the profile exactly */
  .pub-card>.pub-x{position:absolute; top:11px; right:13px; z-index:6; cursor:pointer; font-family:var(--mono); font-size:14px; line-height:1;
    color:var(--text); background:color-mix(in srgb, var(--surface) 78%, transparent); border:1px solid var(--line); border-radius:8px; padding:3px 8px}
  .pub-card>.pub-x:hover{background:var(--surface2)}
  .pub-card>.pub-rep{position:absolute; bottom:11px; right:14px; z-index:6; cursor:pointer; font-family:var(--mono); font-size:10px; color:var(--faint)}
  .pub-card>.pub-rep:hover{color:var(--warn)}
  /* r452: the retired .pub-cap / .pub-hero / .pub-nm / .pub-you / .pub-desk family deleted —
     r386 handed the whole public card to themes.js hkPlayerCard and nothing has emitted these
     class names since. (.pub-card and .pub-card>.pub-x above are still live in lb.js.) */
  /* ===== r136: THE DESK HALL — captain dashboard (guild frame, house language) ===== */
  .dk-hall{border:1px solid var(--accent-dim); border-radius:12px; background:var(--surface);
    margin:0 0 26px; overflow:hidden}
  .dk-cap{min-height:34px; display:flex; align-items:center; justify-content:space-between; padding:6px 16px;
    background:var(--surface2); border-bottom:1px solid var(--line); font-family:var(--mono);
    font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
  .dk-head{display:flex; align-items:center; gap:16px; padding:18px 20px 6px}
  .dk-crest{width:54px; height:54px; border-radius:12px; background:var(--accent-glow);
    border:1px solid var(--accent-dim); display:flex; align-items:center; justify-content:center;
    font-size:24px; color:var(--accent); flex:none}
  .dk-name{font-family:var(--mono); font-size:19px; font-weight:700; letter-spacing:-.3px}
  .dk-ver{color:var(--accent); font-size:12px}
  .dk-sub{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:3px}
  .dk-manage{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--accent);
    border:1px solid var(--accent-dim); border-radius:999px; padding:8px 16px; text-decoration:none; white-space:nowrap}
  .dk-manage:hover{background:var(--accent-glow)}
  .dk-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; padding:14px 20px 4px}
  .dk-stat{background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
    font-family:var(--mono); text-align:center}
  .dk-stat .v{font-size:20px; font-weight:700; color:var(--text)}
  .dk-stat .v em{font-style:normal; font-size:11px; vertical-align:2px}
  .dk-stat.up .v em{color:var(--accent)} .dk-stat.down .v em{color:var(--warn)}
  .dk-stat .l{font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-top:5px; line-height:1.5}
  .dk-sect{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); padding:16px 20px 8px}
  .dk-quests{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; padding:0 20px}
  .dk-quest{background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:var(--mono)}
  .dk-quest.done{border-color:var(--accent-dim)}
  .dk-q-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
  .dk-q-name{font-size:13px; font-weight:700}
  .dk-q-tgt{font-size:10px; color:var(--muted); white-space:nowrap}
  .dk-q-note{font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.5}
  .dk-q-bar{height:6px; background:var(--bg); border-radius:99px; overflow:hidden; margin:9px 0 5px}
  .dk-q-bar i{display:block; height:100%; background:var(--accent); border-radius:99px}
  .dk-quest.done .dk-q-bar i{background:var(--accent)}
  .dk-q-n{font-size:10px; color:var(--muted)}
  .dk-q-ticks{display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:8px}
  .dk-q-ticks span{font-size:9.5px; cursor:pointer; border-radius:6px; padding:1px 5px}
  .dk-q-ticks .ok{color:var(--accent)}
  .dk-q-ticks .no{color:var(--faint)}
  .dk-q-ticks span:hover{background:var(--bg)}
  .dk-empty{font-family:var(--mono); font-size:11.5px; color:var(--muted); padding:0 20px 6px; line-height:1.6}
  .dk-roster{padding:0 20px; font-family:var(--mono)}
  .dk-r{display:grid; grid-template-columns:1fr 150px 62px 62px 66px 76px; gap:10px; align-items:center;
    padding:7px 10px; border-radius:8px; font-size:12px; cursor:pointer}
  .dk-r:hover{background:var(--surface2)}
  .dk-r.hd{cursor:default; font-size:9px; text-transform:uppercase; letter-spacing:.8px; color:var(--faint)}
  .dk-r.hd:hover{background:none}
  .dk-r.idle .nm, .dk-r.idle .wk{color:var(--muted)}
  .dk-r .nm{font-weight:700} .dk-r .you{color:var(--accent); font-weight:400}
  .dk-r .tr{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted)}   /* r374: 6px is THE icon-to-label gap (was 5px + the emblem's retired 6px margin = 11) */
  .dk-r .wk{color:var(--accent)} .dk-r.idle .wk{color:var(--warn)}
  .dk-foot{font-family:var(--mono); font-size:10px; color:var(--faint); padding:10px 20px 16px}
  @media (max-width:760px){ .dk-r{grid-template-columns:1fr 90px 50px 60px} .dk-r span:nth-child(3),.dk-r span:nth-child(6){display:none} }

  /* r452: .pub-tiles / .pub-best / .pub-row deleted with the rest of the retired public card. */
  .panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 14px}   /* r84: rhythm */
  .panel.me{border-color:var(--accent-dim); background:var(--surface)}   /* r62 flat — border carries it */
  .panel h4{font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1.4px; margin:0 0 12px}
  /* r423 (Wolf, ONE-CARD LAW): .me-card is the SAME holder the profile page and the
     header rank-click modal give the card — width min(462px,·), plain surface + 1px line
     border, .uc insets 22/24/20; skinned cards go BARE (.me-bare, the pc-bare/pub-bare
     rule) so the skin IS the surface. Shared by the lb hero and the stats hero. The h4
     caption and the yc-* dressing (yc-top/lvl/bar/next/medals/boards) retired with their
     markup — no surface-specific expansion. .me-col is the chrome-less hero cell that
     seats the card + the external owner bar. */
  .panel.me.me-col{background:transparent; border:0; padding:0; box-shadow:none}
  .me-card{position:relative; width:min(462px,100%); background:var(--surface); border:1px solid var(--line); border-radius:16px}
  .me-card .uc{padding:22px 24px 20px; border-radius:16px}
  .me-card.me-bare{background:transparent; border:0}
  .me-col .uc-ownerbar{padding:0 4px}
  /* r426 (Wolf §4b): the STANDING BLOCK took the leave-ranked bar's slot under the hero
     card — rank + bucket in display type, the rating big under it. Reads as the answer
     to "where do I stand", which is what the bottom of the your-card should say. */
  .uc-standing{width:min(462px,100%); margin-top:12px; padding:14px 18px 15px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; position:relative}
  .uc-standing .ucs-k{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--faint); margin-bottom:6px}
  .uc-standing .ucs-rank{font-family:var(--mono); font-size:24px; line-height:1.15; font-weight:700;
    color:var(--text); letter-spacing:-.01em}
  .uc-standing .ucs-rank .ucs-bk{color:var(--muted); font-weight:500}
  .uc-standing .ucs-rank .ucs-prov{display:inline-block; margin-left:8px; vertical-align:3px;
    font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--warn); font-weight:700}
  .uc-standing .ucs-rating{margin-top:9px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .uc-standing .ucs-rating b{font-family:var(--mono); font-size:30px; line-height:1; font-weight:700;
    color:var(--accent); font-variant-numeric:tabular-nums}
  .uc-standing .ucs-rating .ucs-rl{font-family:var(--mono); font-size:10.5px; color:var(--faint);
    line-height:1.5; flex:1; min-width:150px}
  .uc-standing .ucs-set{position:absolute; top:13px; right:16px; font-family:var(--mono);
    font-size:10px; color:var(--muted); text-decoration:none; opacity:.8}
  .uc-standing .ucs-set:hover{color:var(--accent); opacity:1}
  @media(max-width:520px){ .uc-standing .ucs-rank{font-size:20px} .uc-standing .ucs-rating b{font-size:26px} }
  .tp-row{display:grid; grid-template-columns:26px minmax(0,1fr) auto auto auto; gap:10px; align-items:center;
    font-family:var(--mono); font-size:13px; padding:7px 4px; border-bottom:1px solid var(--line)}   /* r267: tier chip rides its own column — it used to clip mid-ellipsis inside the name. r382: + the .tp-mid stat */
  .tp-row .tp-mid{color:var(--faint); font-size:10.5px; white-space:nowrap; justify-self:end; font-variant-numeric:tabular-nums}
  @media(max-width:520px){ .tp-row{grid-template-columns:26px minmax(0,1fr) auto auto} .tp-row .tp-mid{display:none} }
  .tp-row:last-child{border-bottom:none}
  .tp-row .pct{color:var(--muted); font-size:12px; justify-self:end; text-align:right; line-height:1.45}   /* r267: uniform two-line stat — it used to wrap at a different point on every row */
  .tp-row .pct b{display:block; font-weight:500; color:var(--text); white-space:nowrap}
  .tp-row .pct i{display:block; font-style:normal; font-size:10.5px; white-space:nowrap}
  .tp-row .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tp-row.me{background:var(--accent-glow); border-radius:8px; padding-left:8px; padding-right:8px}
  .row.open{opacity:.42}
  .row.open .nm{color:var(--faint); font-style:italic; letter-spacing:.4px}
  .tp-emb{display:inline-flex; line-height:0; justify-self:end}
  /* r268 BROWSE master-detail */
  .browse-wrap{display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start}
  .browse-list{max-height:560px; overflow-y:auto; border:1px solid var(--line); border-radius:12px;
    background:var(--surface); padding:8px; display:flex; flex-direction:column; gap:2px}
  /* r393 (Wolf): with the tier-filter bar removed, the detail board's top now sits flush with
     the drill list's top (both at the row's top edge). It fills down to roughly the list's
     height so a full board doesn't read short beside the long drill list. */
  .browse-detail{min-width:0}
  .browse-detail .board{min-height:540px}
  .browse-list .bl-row{display:flex; justify-content:space-between; align-items:center; gap:8px;
    border:1px solid transparent; background:none; padding:6px 9px; border-radius:7px; font-size:12px; margin:0}
  .browse-list .bl-row:hover{background:var(--surface2)}
  .browse-list .bl-row.on{background:var(--accent-glow); border-color:var(--accent-dim); color:var(--text)}
  .browse-list .bl-row .bl-me{color:var(--accent); font-weight:700}
  .browse-list .bl-nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .bl-g{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--faint); padding:9px 9px 3px}
  #blSearch{width:100%; box-sizing:border-box; font-family:var(--mono); font-size:12px; color:var(--text);
    background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:7px 10px; margin-bottom:6px}
  #blSearch:focus{border-color:var(--accent-dim); outline:none}
  @media(max-width:680px){ .browse-wrap{grid-template-columns:1fr} .browse-list{max-height:240px} }   /* r267: tier rides as the small crest (tooltip carries the name) — a full text pill starved the name column */
  .featured{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0; align-items:start}
  /* r369: weekly + tier roster pair up in the featured grid — no more lone half-width
     card with a blank side, no more full-width strips of mostly whitespace */
  .featured > .panel{margin-top:0; min-width:0}
  .featured + .section-title{margin-top:18px}   /* r368: matches the ~38px section rhythm above */
  .seclead{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:18px}
  /* r383 (Wolf: sparse card interiors): each leader card is a 2-col grid now — the
     time rides the right edge as a tabular stat instead of stacking under the name
     and leaving the whole right half blank. Eyebrow + label still span. */
  .seclead .sl{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; align-items:baseline}
  .seclead .sl .sl-sec{grid-column:1/-1; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:5px}
  .seclead .sl .sl-sec .dia{margin-right:5px}
  .seclead .sl .sl-name{font-weight:700; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .seclead .sl .sl-t{font-family:var(--mono); color:var(--muted); font-size:12px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
  .seclead .sl .sl-lab{grid-column:1/-1; font-size:10.5px; color:var(--faint); margin-top:4px}
  @media(max-width:820px){ .featured{grid-template-columns:1fr} }
  .ros-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
  .ros-tabs .tab{font-size:11px; padding:6px 13px}
  /* r404/r409 (Wolf): sub-RANK chips — the bucket band filter WITHIN the selected tier.
     Deliberately a different SHAPE from the primary tier tabs so the hierarchy reads at a
     glance: tier tabs are rounded pills (the main rank), bucket chips are squared, smaller,
     tinted secondary-surface, and indented under an "in tier" lead-in. */
  .ros-buckets{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:-2px 0 12px; padding-left:2px}
  .ros-buckets::before{content:'in tier'; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--faint); margin-right:3px; opacity:.85}
  .ros-buckets .ros-bk{font-size:10px; padding:3px 10px; border-radius:6px; opacity:.92;
    background:var(--surface2); border-color:transparent; color:var(--muted)}
  .ros-buckets .ros-bk:hover{color:var(--text); background:var(--surface2)}
  .ros-buckets .ros-bk.on{background:var(--accent-glow); border-color:var(--accent-dim); color:var(--accent); opacity:1}
  .ros-buckets .ros-bk em{font-style:normal; color:var(--faint); margin-left:3px; font-variant-numeric:tabular-nums}
  .ros-buckets .ros-bk.on em{color:inherit; opacity:.75}
  /* r369: on wide hosts (desks page) the roster flows into two columns instead of
     one sparse full-width list; in the half-width lb panel it stays a single column */
  .ros-list{max-height:340px; overflow-y:auto; padding-right:6px; columns:2 430px; column-gap:26px}
  .ros-row{break-inside:avoid}
  .ros-row{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px;
    padding:8px 10px; border-radius:8px; color:var(--muted)}
  /* r383 (Wolf: r382 grammar on the roster too): the name's dead stretch carries
     crowns + the rating gap to the tier leader — muted mono, numbers tabular */
  .ros-mid{font-size:10px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums}
  @media(max-width:640px){ .ros-mid{display:none} }
  .ros-row.me{background:var(--accent-glow); color:var(--text); border:1px solid var(--accent-dim)}
  .ros-n{min-width:22px; color:var(--faint); font-size:11px}
  .ros-nm{color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
  .ros-b{font-size:10px; color:var(--faint)}
  .ros-r{font-size:11px; color:var(--accent); min-width:86px; text-align:right}
  .ros-a{font-size:10.5px; color:var(--faint); min-width:70px; text-align:right}
  .tabrow{display:flex; gap:8px; margin:26px 0 12px; flex-wrap:wrap; align-items:stretch}
  .tabrow .tab{display:inline-flex; align-items:center; line-height:1}
  .tab{font-family:var(--mono); font-size:12.5px; padding:8px 18px; border-radius:999px; cursor:pointer;
    border:1px solid var(--line); color:var(--muted); background:var(--surface); transition:all .12s}
  .tab:hover{color:var(--text)} .tab.on{color:var(--accent); border-color:var(--accent-dim); background:var(--accent-glow)}
  .chips{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px 1px}
  .chip{font-family:var(--mono); font-size:11.5px; padding:6px 13px; border-radius:8px; cursor:pointer;
    border:1px solid var(--line); color:var(--muted); background:var(--surface); transition:all .1s}
  .chip:hover{color:var(--text)}   /* r68: no lift — bubbles stay on the shared baseline */
  .chip.on{color:var(--text); border-color:var(--accent); background:var(--accent-glow)}
  .chip .cg{color:var(--faint); font-size:9px; text-transform:uppercase; letter-spacing:.6px; display:block}
  /* fit & rhythm polish */
  .featured .board{height:100%; box-sizing:border-box; margin:0; min-height:230px; display:flex; flex-direction:column; min-width:0}
  .featured .board h4{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .featured .board .empty{padding:16px 18px 4px}
  .hero .panel{display:flex; flex-direction:column}
  .hero .panel > :last-child{margin-top:auto}
  /* r423: yc-medals / yc-boards attachments retired — the ONE card carries the showcase */
  /* r392 (Wolf): compact-always leaderboard. The your-card sidebar sits snug to its
     content (no stretch gap to match the tall Top Players board). Daily + weekly are two
     EQUAL fixed cards — the daily box no longer spans full width as a near-empty banner. */
  .hero.two > .panel.me{align-self:start}
  .hero.two > .panel.me > :last-child{margin-top:14px}
  .featured-2{grid-template-columns:1fr 1fr; align-items:stretch}
  .featured-2 .featured-daily{grid-column:auto; margin:0}
  .featured-2 .featured-daily .board, .featured-2 .fx-compact .board{min-height:200px}
  .featured-2 .fx-compact{min-width:0; display:flex; flex-direction:column}
  /* r393 (Wolf): the Daily Challenge now rides the HERO row. Inside .hero.two it must NOT
     inherit .featured-daily's grid-column:1/-1 (that spanned both hero columns) — snap it to
     the second hero cell. It fills the cell height beside the your-card. */
  .hero.two > .featured-daily{grid-column:auto; margin:0; align-self:stretch; display:flex; flex-direction:column}
  .hero.two > .featured-daily .board{flex:1; min-height:300px}
  /* r393 (Wolf): featured row = overall field (box 1) + Top Desks (box 2), two EQUAL boxes.
     Box 1 defaults to the WHOLE ranked field, kept compact by a fixed-height internal scroll;
     the desk list scrolls too so both boxes stay compact and level. */
  .featured-2 .tp-panel, .featured-2 .standings{min-width:0}
  .tp-scroll{max-height:330px; overflow-y:auto; margin:0 -4px; padding:0 4px}
  .featured-2 .standings .st-list{max-height:330px; overflow-y:auto}
  .featured-2 .panel .empty{color:var(--faint)}
  .tp-row .rk{text-align:center}
  .board{margin-bottom:0}
  .section-title{margin-top:30px}
  .tabrow{margin-top:16px}
  .chips{margin-top:2px}
  /* r374: this page's .rank-emblem copy (margin-right:6px, va:-2px) is retired —
     alignment + gaps live in nav.css's shared icon system; containers own their gaps */
  @keyframes emblemPulse{0%,100%{filter:drop-shadow(0 0 3px currentColor)}50%{filter:drop-shadow(0 0 9px currentColor)}}
  .emblem-max{animation:emblemPulse 2.2s ease-in-out infinite}
  /* r393 (Wolf: "two checkmarks on the left?"): the drill list row carries an explicit
     <b class="bl-me">✓</b> already; this generic .chip.mine::after was doubling it up
     (bl-row also carries .chip). The explicit tick owns the tooltip — drop the pseudo. */
  .empty b{color:var(--accent); font-weight:700}
  /* your-standing strip — the scoreboard of scoreboards */
  .standing{grid-column:1/-1; background:var(--surface); border:1px solid var(--accent-dim);
    border-left:3px solid var(--accent); border-radius:14px; padding:16px 22px;
    display:flex; gap:26px; flex-wrap:wrap; align-items:baseline}
  /* r452: .standing .st-big / .st-lbl / .st-chase deleted — the strip renders .standing.cta
     copy only; nothing has emitted an st-* child since. */
  .standing.cta{color:var(--muted); font-family:var(--mono); font-size:13px; line-height:1.6}
  .standing.cta a{color:var(--accent); border-bottom:1px solid var(--accent-dim)}
  .state{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:40px 30px; text-align:center}
  .state h2{font-size:19px; font-weight:600; margin-bottom:10px}
  .state p{font-size:14px; color:var(--muted); max-width:440px; margin:0 auto 18px; line-height:1.6}
  .state code{font-family:var(--mono); font-size:12px; color:var(--warn); background:var(--surface2); padding:2px 7px; border-radius:5px}
  .loading{font-family:var(--mono); font-size:13px; color:var(--muted); text-align:center; padding:40px}

  footer{border-top:1px solid var(--line); padding:34px 0; position:relative; z-index:1}
  .foot-in{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px}
  .foot-tag{font-family:var(--mono); font-size:12px; color:var(--muted)}
  .foot-fine{font-family:var(--mono); font-size:11px; color:var(--faint); max-width:340px; text-align:right}
  @media(max-width:640px){ .foot-fine{text-align:left} }
/* r149: COHORT REPORT — #deskPrint exists only for print/PDF. On screen it stays
   dead; in print it is the ONLY thing on the page. Forced black-on-white: the
   report leaves the product and lands in an inbox, not a theme. */
#deskPrint{display:none}
@media print{
  body>*:not(#deskPrint){display:none !important}
  body{background:#fff !important; padding:0 !important; margin:0 !important}
  #deskPrint{display:block !important; color:#111; background:#fff;
    font-family:"JetBrains Mono","Courier New",monospace; font-size:11.5px; padding:28px 34px}
  #deskPrint .rp-brand{font-size:19px; font-weight:700; letter-spacing:.4px}
  #deskPrint .rp-cap{font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#666; margin:2px 0 18px}
  #deskPrint h1{font-family:"Hanken Grotesk",Arial,sans-serif; font-size:26px; margin:0 0 2px}
  #deskPrint .rp-sub{color:#444; margin-bottom:18px}
  #deskPrint .rp-band{display:flex; gap:0; border:1.5px solid #111; margin:0 0 20px}
  #deskPrint .rp-band>div{flex:1; padding:12px 14px; border-left:1px solid #999}
  #deskPrint .rp-band>div:first-child{border-left:0}
  #deskPrint .rp-band .v{font-size:21px; font-weight:700}
  #deskPrint .rp-band .l{font-size:9px; color:#555; text-transform:uppercase; letter-spacing:.08em; margin-top:3px}
  #deskPrint h2{font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:20px 0 8px; color:#111}
  #deskPrint table{width:100%; border-collapse:collapse}
  #deskPrint th{font-size:9px; text-align:left; text-transform:uppercase; letter-spacing:.1em; color:#555;
    border-bottom:1.5px solid #111; padding:4px 8px 5px}
  #deskPrint td{padding:5px 8px; border-bottom:1px solid #ccc}
  #deskPrint td.r, #deskPrint th.r{text-align:right}
  #deskPrint .rp-foot{margin-top:22px; font-size:9.5px; color:#666; line-height:1.7}
}
  /* ===== r270: GUILD BOARD (deskless view) + STAFFER MANAGE SCREEN ===== */
  /* r293 (Wolf): the guild board is ONE tile + arrows now — compact, no wall of cards */
  /* r316 (Wolf): 3-across sliding track (was one tile) — fills the width, animates on scroll */
  .gb-caro{display:flex; align-items:center; gap:12px}
  .gb-stage{flex:1; min-width:0; overflow:hidden}
  .gb-track{display:flex; gap:12px; transition:transform .38s cubic-bezier(.22,.61,.36,1); will-change:transform}
  .gb-track .gb-card{flex:0 0 calc((100% - 24px)/3); box-sizing:border-box}
  @media (max-width:980px){ .gb-track .gb-card{flex-basis:calc((100% - 12px)/2)} }
  @media (max-width:720px){ .gb-track .gb-card{flex-basis:100%} }
  .gb-arrow{font-family:var(--mono); font-size:20px; line-height:1; color:var(--muted); background:var(--surface);
    border:1px solid var(--line); border-radius:10px; padding:9px 14px; cursor:pointer; flex:none}
  .gb-arrow:hover{color:var(--text); border-color:var(--faint)}
  .gb-arrow:disabled{opacity:.3; cursor:default}
  .gb-count{font-family:var(--mono); font-size:11px; color:var(--faint); flex:none; min-width:52px}
  /* r293: WSO-style desk grade chips — S warm, A accent, B blue, C muted */
  .dk-grade{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.06em;
    border:1px solid currentColor; border-radius:6px; padding:1px 6px; margin-left:8px; vertical-align:1px}
  .dk-grade.s{color:#d99a1f} .dk-grade.a{color:var(--accent)} .dk-grade.b{color:#3f7fe0}
  .dk-grade.c{color:var(--muted)} .dk-grade.unrated{color:var(--faint); border-style:dashed}
  .gb-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 15px;
    font-family:var(--mono); display:flex; flex-direction:column; gap:6px}
  .gb-top{display:flex; align-items:center; gap:9px}
  .gb-name{font-size:13.5px; font-weight:700; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .gb-name:hover{text-decoration:underline; text-underline-offset:3px}
  .gb-stats{font-size:11px; color:var(--muted)}
  .gb-champ{font-size:10.5px; color:var(--faint)}
  .gb-act{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:4px}
  .gb-act .tab{font-size:11px; padding:5px 13px}
  .gb-hall{font-size:11px; color:var(--accent)}
  .gb-lock,.gb-applied{font-size:10.5px; color:var(--muted); margin-left:auto}
  .gb-applied{color:var(--accent); cursor:pointer}
  .gb-note{display:flex; gap:8px; align-items:center}
  .gb-note:empty{display:none}
  .gb-note .gb-notein{flex:1; min-width:0; font-family:var(--mono); font-size:11.5px; color:var(--text);
    background:var(--surface2); border:1px solid var(--line); border-radius:7px; padding:6px 9px}
  .gb-note .gb-notein:focus{border-color:var(--accent-dim); outline:none}
  .gb-note .tab{font-size:10.5px; padding:5px 11px; white-space:nowrap}
  /* r316 (Wolf): invite-code first (primary), start-a-desk demoted to a quieter second line */
  .gb-start{display:flex; flex-direction:column; gap:10px; font-family:var(--mono); font-size:12px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 15px}
  .gb-start input{font-family:var(--mono); font-size:12px; color:var(--text); background:var(--surface2);
    border:1px solid var(--line); border-radius:8px; padding:7px 10px}
  .gb-start input:focus{border-color:var(--accent-dim); outline:none}
  .gb-join{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
  .gb-join-l{color:var(--text); font-weight:600}
  .gb-join #gbCode{flex:1; min-width:150px; max-width:230px; letter-spacing:.5px}
  .gb-found{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:9px;
    border-top:1px solid var(--line); font-size:11.5px}
  .gb-found-l{color:var(--muted)}
  .gb-found #gbName{flex:1; min-width:190px}
  .gb-found #gbName{font-size:11.5px; padding:6px 9px}
  .gb-found .tab{font-size:11px}
  /* r426 (§4e): the PRO upsell that replaces the found-a-desk input for free accounts */
  .gb-pro-note{color:var(--faint); font-size:11px; flex:1; min-width:180px}
  .gb-msg{font-family:var(--mono); font-size:11px}
  .mg-app{display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:12.5px;
    padding:8px 2px; border-bottom:1px solid var(--line)}
  .mg-app:last-of-type{border-bottom:none}
  .mg-app-nm{font-weight:700; cursor:pointer; white-space:nowrap}
  .mg-app-note{color:var(--muted); font-size:11.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .mg-app-age{color:var(--faint); font-size:10.5px; margin-left:auto; white-space:nowrap}
  .mg-app-act{display:flex; gap:6px}
  .mg-app-act .tab{font-size:10.5px; padding:4px 11px}
  .mg-q{display:flex; gap:10px; align-items:center; justify-content:space-between; font-family:var(--mono);
    font-size:12.5px; padding:7px 2px; border-bottom:1px dashed var(--line)}
  .mg-q .tab{font-size:10.5px; padding:4px 11px}
  .mg-pin{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px}
  .mg-pin input{font-family:var(--mono); font-size:12px; color:var(--text); background:var(--surface2);
    border:1px solid var(--line); border-radius:8px; padding:7px 10px}
  .mg-pin input:focus{border-color:var(--accent-dim); outline:none}
  #mgQKey{width:190px} #mgQTgt{width:135px} #mgQNote{flex:1; min-width:160px}
  .mg-kick{color:var(--warn)}
  /* r393 (Wolf): the per-board tier sub-menu (dropdown + bucket chips) is retired — its
     .tier-filter / .tf-note styles are gone with the markup. */
  /* r336 (Wolf): placement-series checklist on "your card" */
  .pl-list{margin-top:12px; display:flex; flex-direction:column; gap:2px}
  .pl-row{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px;
    color:var(--text); padding:7px 4px; border-bottom:1px dashed var(--line)}
  .pl-row:last-child{border-bottom:0}
  .pl-row.ok{color:var(--muted)}
  .pl-tick{width:16px; text-align:center; color:var(--accent); font-weight:700}
  .pl-nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}   /* r383: one-line names — the .pl-mid band made long names wrap */
  .pl-done{font-size:10.5px; color:var(--faint); letter-spacing:.06em}
  .pl-go{font-size:11.5px; color:var(--accent); text-decoration:none}
  .pl-go:hover{text-decoration:underline}
  /* r383 (Wolf: r382 grammar on the placement checklist): the row's dead middle names
     the drill's catalog band; the foot note takes the panel's bottom-pinned slot so
     the list stops floating away from its own copy */
  .pl-mid{font-size:10px; color:var(--faint); letter-spacing:.04em; white-space:nowrap; text-align:right}
  @media(max-width:640px){ .pl-mid{display:none} }
  .pl-foot{font-family:var(--mono); font-size:10px; color:var(--faint); text-align:center; padding-top:10px}
  /* r383: the ranked gate centers its pitch + CTA in the panel (the r368 signed-out
     treatment) instead of leaving a dead bottom under the buttons */
  .gate-body{flex:1; display:flex; flex-direction:column; justify-content:center}

/* r362: the Daily Challenge wears the hero spot on the boards page */
.featured-daily{grid-column:1 / -1; background:var(--surface); border:1px solid var(--accent-dim);
  border-radius:14px; padding:4px 6px 8px; box-shadow:0 0 0 3px var(--accent-glow)}
.featured-daily .board{border:none; box-shadow:none; background:transparent}
.fd-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px 4px; font-family:var(--mono)}
.fd-head b{font-size:15px; letter-spacing:-.2px}
.fd-live{color:var(--accent); font-size:11px; letter-spacing:.14em; text-transform:uppercase; animation:fdPulse 2s ease infinite}
@keyframes fdPulse{0%,100%{opacity:1}50%{opacity:.45}}
.fd-meta{color:var(--muted); font-size:11.5px}
.fd-play{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--on-accent,#fff); background:var(--accent);
  border-radius:8px; padding:8px 15px; text-decoration:none}
.fd-play:hover{filter:brightness(1.08)}
.row.t10{background:color-mix(in srgb, var(--accent) 5%, transparent)}
.row.t10 .rk{color:var(--accent)}

/* r382 (Wolf): an OPEN board (no times yet) stops stretching its placeholder lanes
   edge to edge — capped at ~640px and centered, the empty state reads composed
   instead of vacant. Sits after .featured .board{margin:0} on purpose (same
   specificity, later wins). */
.board.board-open{max-width:640px; width:100%; margin-left:auto; margin-right:auto}
/* r383: an open board that .featured stretches to its row partner's height stops
   piling its blank at the bottom — auto margins float the empty note into the
   stretch, lanes settle underneath. No-op on content-driven boards (margins:0). */
.featured .board.board-open .empty{margin-top:auto; margin-bottom:auto}

/* r383 (Wolf): PUBLIC CARDS WEAR FRAMES — lb.js pubCard applies the player's
   .hk-frame-<id> + ornaments (nav.css owns the frame art, base scale). The frame
   chrome pokes past the box on purpose (corner gems at -6px, plaque bevel ::before,
   medallions), so a FRAMED card un-clips; the cap re-rounds its own top corners
   since the card's overflow:hidden no longer does it. Frameless cards keep the
   exact r114 box — zero layout shift. */
.pub-card[class*="hk-frame-"]{overflow:visible}
/* r386: skinned public card — the .uc now carries the skin, so the holder drops its
   own surface/border (no double box) and lets the ornaments overflow. Frameless cards
   keep the r114 surface box. */
.pub-card.pub-bare{background:transparent;border:0;overflow:visible}