/* Who's Who Live: shared board styles (World, lane pages, How We Rank). Scoped to .wwl. */
.wwl{
  --bg:#000; --panel:#050607; --line:#1D2124;
  --text:#FFFFFF; --muted:#9AA0A6; --gold:#C9A24B;
  --up:#16C784; --down:#EA3943; --flat:#9AA0A6; --upbg:rgba(22,199,132,.14); --downbg:rgba(234,57,67,.14);
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif;
  display:flex;flex-direction:column;min-height:70vh;scroll-margin-top:44px}
.wwl[data-scope="how"]{min-height:0}
.wwl *{box-sizing:border-box}
.wwl a{color:inherit}
.wwl .up{color:var(--up);text-shadow:0 0 7px rgba(22,199,132,.45)} .wwl .down{color:var(--down);text-shadow:0 0 7px rgba(234,57,67,.45)} .wwl .flat{color:var(--flat)}
.wwl .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* top bar */
.wwl-top{display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wwl-title{display:inline-flex;align-items:baseline;gap:18px;font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:6px;margin:0;line-height:1;color:#fff;text-transform:uppercase}
.wwl-title .wwl-w,.wwl-title .wwl-mark{display:inline-block;margin-right:-6px}
.wwl-title .wwl-mark{position:relative;padding-bottom:6px}
.wwl-title .wwl-mark::after{content:"";position:absolute;left:0;right:6px;bottom:0;height:2px;background:var(--gold)}
.wwl-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--up);border:1px solid var(--up);border-radius:4px;padding:3px 9px}
.wwl-dot{width:8px;height:8px;border-radius:50%;background:var(--up);animation:wwlpulse 1.4s infinite}
@keyframes wwlpulse{50%{opacity:.25}}
.wwl-spacer{flex:1}
.wwl-clock{font-family:var(--mono);font-size:15px}
.wwl-demo{font-family:var(--mono);font-size:12px;color:var(--gold);border:1px dashed var(--gold);padding:3px 9px;border-radius:4px}
.wwl-tagline{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--muted);font-size:15px;padding:8px 24px 0;margin:0}

/* section nav (World + lanes + How we rank) */
.wwl-secnav{display:flex;gap:8px;flex-wrap:wrap;padding:12px 24px 0}
.wwl-chip{font-family:var(--mono);font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.wwl-chip:hover,.wwl-chip:focus-visible{color:#fff;border-color:#3a4045;outline:none}
.wwl-chip.on{color:#0B0B0C;background:var(--gold);border-color:var(--gold);font-weight:700}
.wwl-chip.how{margin-left:auto}

/* ticker tape */
.wwl-tape{overflow:hidden;white-space:nowrap;background:#0F0F11;border-bottom:1px solid var(--line);border-top:1px solid var(--line);margin-top:12px}
.wwl-tape-in{display:inline-block;padding:9px 0;animation:wwltape 60s linear infinite}
.wwl-tape:hover .wwl-tape-in{animation-play-state:paused}
@keyframes wwltape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wwl-tk{display:inline-block;margin-right:34px;font-family:var(--mono);font-size:14px;text-decoration:none}
.wwl-tk b{color:#fff;font-weight:700;margin-right:8px}

/* layout */
.wwl-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;padding:18px 24px;flex:1;width:100%;max-width:1440px;margin:0 auto}
.wwl-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.wwl-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.wwl-tab{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted);background:transparent;border:1px solid #2F353A;border-radius:4px;padding:6px 14px;cursor:pointer}
.wwl-tab[aria-selected="true"]{color:#000;background:#fff;border-color:#fff}
.wwl-tools{margin-left:auto;display:flex;gap:8px}
.wwl-count{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:6px}
.wwl-scroller{max-height:calc(100vh - 230px);overflow:auto}
.wwl table{width:100%;border-collapse:collapse}
.wwl thead th{position:sticky;top:0;background:#101012;text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;z-index:2;font-weight:500}
.wwl thead th.l{text-align:left}
.wwl tbody tr{border-bottom:1px solid #1B1B1F;transition:background .3s}
.wwl tbody tr:nth-child(even){background:#111113}
.wwl tbody tr:hover{background:#1A1A1E}
.wwl td{padding:9px 12px;text-align:right;font-size:15px;white-space:nowrap;color:#fff}
.wwl td.l{text-align:left}
.wwl td.rank{font-family:var(--mono);color:var(--gold);font-weight:700;width:54px}
.wwl td.name{font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 7px rgba(255,255,255,.25)}
.wwl .lane{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);border:1px solid var(--line);padding:2px 7px;border-radius:4px;text-decoration:none;white-space:nowrap}
.wwl a.lane:hover{color:#fff;border-color:#3a4045}
.wwl .mv{font-family:var(--mono);font-weight:700}
.wwl .pill{display:inline-block;min-width:78px;padding:3px 8px;border-radius:5px;font-family:var(--mono);font-weight:500;text-align:right}
.wwl .pill.up{background:var(--upbg)} .wwl .pill.down{background:var(--downbg)}
.wwl .flash-up{animation:wwlfup .9s ease-out} .wwl .flash-down{animation:wwlfdn .9s ease-out}
@keyframes wwlfup{0%{background:rgba(22,199,132,.55)}100%{background:transparent}}
@keyframes wwlfdn{0%{background:rgba(234,57,67,.55)}100%{background:transparent}}
.wwl svg.spark{width:92px;height:26px;vertical-align:middle}
/* #id highlight */
.wwl tbody tr.ww-target{background:rgba(201,162,75,.16)!important;outline:2px solid var(--gold);outline-offset:-2px;animation:wwltarget 1.2s ease-out 3}
@keyframes wwltarget{0%{box-shadow:inset 0 0 0 0 rgba(201,162,75,.9)}50%{box-shadow:inset 0 0 0 6px rgba(201,162,75,.35)}100%{box-shadow:inset 0 0 0 0 rgba(201,162,75,0)}}

/* side panels */
.wwl-side{display:flex;flex-direction:column;gap:14px}
.wwl-card{padding:14px 16px}
.wwl-card h3{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--gold);margin:0 0 10px;font-weight:500}
.wwl-idx{font-family:var(--mono);font-size:38px;font-weight:700}
.wwl-idx small{font-size:15px;margin-left:8px}
.wwl-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px;border-bottom:1px dashed #222;font-family:var(--mono);text-decoration:none}
.wwl-row:last-child{border:none}
.wwl-row span:first-child{color:#fff;font-family:'DM Sans',sans-serif;font-weight:700}
.wwl-idxchart{width:100%;height:60px;margin-top:8px;display:block}

/* footer strip (Rule 4) */
.wwl-foot{padding:14px 24px 22px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.wwl-foot a{color:var(--gold)}
.wwl-foot .wwl-disc{color:#d6d8da}

/* coming soon (public demo guard) + messages */
.wwl-soon{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 24px;text-align:center}
.wwl-soon-card{max-width:620px;border:1px solid var(--line);border-radius:12px;padding:40px 32px;background:var(--panel)}
.wwl-soon-card h2{font-family:'Playfair Display',Georgia,serif;font-size:34px;margin:0 0 12px;color:#fff}
.wwl-soon-card p{color:var(--muted);margin:0;font-size:16px;line-height:1.5}
.wwl-msg{padding:30px 14px;color:var(--muted);font-family:var(--mono);font-size:13px}

/* How we rank */
.wwl-article{max-width:760px;margin:0 auto;padding:36px 24px 48px;flex:1}
.wwl-article h2{font-family:'Playfair Display',Georgia,serif;font-size:36px;margin:0 0 18px;color:#fff}
.wwl-article p{font-size:18px;line-height:1.65;color:#e4e6e8;margin:0 0 16px}
.wwl-article .wwl-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* screen (venue) mode: board only */
body.ww-screen{background:#000}
body.ww-screen .skip,body.ww-screen header.mh,body.ww-screen .lanebar,body.ww-screen .ad-slot,body.ww-screen footer.foot,body.ww-screen .infl-ticker{display:none!important}
body.ww-screen .wwl{min-height:100vh}
body.ww-screen .wwl-wrap{grid-template-columns:1fr;max-width:900px}
body.ww-screen .wwl-side,body.ww-screen .wwl-secnav,body.ww-screen .wwl-tools,body.ww-screen .hide-s{display:none!important}
body.ww-screen .wwl-scroller{max-height:calc(100vh - 250px);overflow:hidden}
body.ww-screen .wwl td{font-size:26px;padding:14px}
body.ww-screen .wwl-title{font-size:30px;gap:24px}
body.ww-screen .wwl .pill{font-size:22px;min-width:120px;padding:5px 10px}
body.ww-screen .wwl .mv{font-size:26px}
body.ww-screen .wwl svg.spark{width:120px;height:34px}

@media (max-width:980px){
  .wwl-wrap{grid-template-columns:1fr;padding:12px}
  .wwl-side{order:2}
  .wwl-scroller{max-height:none;overflow-x:auto}
  .wwl .hide-m{display:none}
  .wwl td{padding:8px 5px;font-size:13px}
  .wwl td.name{white-space:normal;font-size:12px;line-height:1.25}
  .wwl thead th{padding:9px 5px;font-size:10px;letter-spacing:1px}
  .wwl .pill{min-width:0;padding:3px 5px;font-size:12px}
  .wwl td.rank{width:32px}
  .wwl-title{font-size:15px;letter-spacing:4px;gap:12px}
  .wwl-title .wwl-w,.wwl-title .wwl-mark{margin-right:-4px}
  .wwl-title .wwl-mark::after{right:4px}
  .wwl-top{padding:12px}
  .wwl-secnav{padding:10px 12px 0}
  .wwl-chip.how{margin-left:0}
  .wwl-tagline{padding:8px 12px 0}
}
@media (prefers-reduced-motion:reduce){
  .wwl-tape-in,.wwl-dot{animation:none}
  .wwl .flash-up,.wwl .flash-down,.wwl tbody tr.ww-target{animation:none}
}