/* ELITE — VOD Review film room. Public since 2026-08-23. */
:root{
  --ink:#07080a; --panel:#0e1014; --panel2:#141821; --line:#20252f;
  --txt:#e8ebf0; --dim:#8b94a4; --faint:#5b6474;
  --red:#e01e2b; --red-dim:#8c1520; --gold:#ffc531;
  --loot:#3fa9f5; --rot:#8b7cf6; --fight:#e01e2b; --hold:#ffc531; --drop:#5b6474; --dead:#2a2f3a;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
*[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--txt);
  font-family:"Saira Condensed",Inter,system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip-link{position:fixed;left:12px;top:8px;z-index:100;transform:translateY(-160%);background:#fff;color:#08090b;padding:8px 12px;border-radius:4px;font-weight:700}
.skip-link:focus{transform:none}

/* ---------- chrome ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(7,8,10,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:56px}
.brand{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:15px;text-decoration:none}
.brand b{color:var(--red)}
.nav{display:flex;gap:16px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav a{color:var(--dim);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--txt)}
.nav a.on{color:var(--txt);border-bottom-color:var(--red)}
.walkthrough-open{margin-left:auto;background:transparent;color:var(--txt);border:1px solid var(--red-dim);border-radius:4px;padding:7px 11px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.walkthrough-open:hover{background:rgba(224,30,43,.12);border-color:var(--red)}
.walkthrough-open:active{transform:translateY(1px)}

.preview-flag{
  background:var(--red-dim);color:#fff;text-align:center;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;font-weight:600;
}

/* ---------- type ---------- */
h1{font-size:clamp(28px,4.4vw,46px);line-height:1.04;margin:0 0 10px;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:24px;margin:36px 0 12px;letter-spacing:.01em}
h3{font-size:17px;margin:20px 0 8px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
p{margin:0 0 12px;max-width:68ch;color:#c9cfd9}
.lede{font-size:18px;color:var(--txt)}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:8px}
.muted{color:var(--dim)}
.tiny{font-size:12.5px;color:var(--faint)}

/* ---------- tier + badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:3px;border:1px solid var(--line);color:var(--dim)}
.badge.a{border-color:#1f6f3f;color:#4ade80;background:rgba(31,111,63,.12)}
.badge.b{border-color:#7a5a12;color:var(--gold);background:rgba(122,90,18,.12)}
.badge.draft{border-color:var(--red-dim);color:#ff7b85;background:rgba(140,21,32,.14)}

/* ---------- cards ---------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.card{
  display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:16px;transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--red-dim);transform:translateY(-2px)}
.card:active{transform:translateY(0)}
.card .nm{font-size:19px;font-weight:700;letter-spacing:.01em;margin-bottom:2px}
.card .sub{font-size:13px;color:var(--dim);margin-bottom:10px}
.card .row{display:flex;gap:14px;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.card .row b{color:var(--txt);font-weight:700}

/* ---------- film viewer ---------- */
.film{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px;margin-top:16px}
.film>*{min-width:0}
@media(max-width:900px){.film{grid-template-columns:1fr}}
.stage{position:relative;background:#05060a;border:1px solid var(--line);border-radius:6px;overflow:hidden}
/* NO touch-action lock: there are no touch handlers on the canvas, so
   touch-action:none only created a scroll dead-zone on phones. */
#map{display:block;width:100%;max-width:100%;height:auto}
.stage-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:rgba(5,6,10,.82);color:var(--dim);font-size:14.5px;line-height:1.6}
.hud{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:16px;align-items:center;
  padding:8px 12px;background:linear-gradient(transparent,rgba(5,6,10,.92) 42%);
  font-variant-numeric:tabular-nums;font-size:13px;
}
.hud .clock{font-family:var(--mono);font-size:16px;font-weight:700}
.hud .act{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.side{display:flex;flex-direction:column;gap:12px}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:13px}
.pane h4{margin:0 0 9px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}
.stat{display:flex;justify-content:space-between;font-size:14px;padding:3px 0;font-variant-numeric:tabular-nums}
.stat span{color:var(--dim)} .stat b{font-weight:700}

.controls{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
button.pill,a.pill,select.pill{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:4px;
  padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;letter-spacing:.04em;
  transition:border-color .2s,background .2s,transform .15s;
}
button.pill:hover,a.pill:hover,select.pill:hover{border-color:var(--red-dim)}
button.pill.on,a.pill.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
button.pill:active,a.pill:active{transform:translateY(1px)}
button.pill:disabled{opacity:.5;cursor:not-allowed}
button.pill:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:2px solid var(--red);outline-offset:2px}
input[type=range]{flex:1;min-width:180px;accent-color:var(--red);height:22px}

/* activity ribbon under the scrubber */
.ribbon{display:flex;height:18px;border-radius:3px;overflow:hidden;margin-top:8px;border:1px solid var(--line);cursor:crosshair}
.ribbon span{flex:1 0 auto;display:block;min-width:2px;pointer-events:none}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--dim)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:8px 11px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--panel2);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:700}
tbody tr:hover{background:rgba(224,30,43,.05)}
[role=button][data-t]{cursor:pointer}
[role=button][data-t]:focus-visible{background:rgba(224,30,43,.12);outline:2px solid var(--red);outline-offset:-2px}
.table-action{appearance:none;min-height:28px;display:inline-flex;align-items:center;border:0;background:none;color:inherit;font:inherit;padding:4px 0;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.table-action:hover,.table-action[aria-current=true]{color:#fff;text-decoration-color:var(--red)}
tr.is-current{background:rgba(224,30,43,.09)}
td.num,th.num{text-align:right}
/* deep-linked row (Find Your Style -> Gameplans) */
tbody tr:target{background:rgba(255,197,49,.12);outline:2px solid rgba(255,197,49,.4)}
tbody tr:target td:first-child{border-left:3px solid var(--gold)}

/* ---------- notes / callouts ---------- */
.note{border-left:3px solid var(--red);background:var(--panel);padding:12px 14px;margin:16px 0;border-radius:0 5px 5px 0}
.note b{color:#fff}
.note.warn{border-left-color:var(--gold)}

footer{margin:56px 0 30px;padding-top:18px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}

/* first-run tour — display:none by DEFAULT. The JS shows it for first-timers;
   with flex as the default, a returning visitor (localStorage flag set, JS
   early-returns) got a full-screen overlay with a dead button. QA 2026-08-08. */
.tour{position:fixed;inset:0;background:rgba(4,5,8,.86);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.tour .box{max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px}
.tour h3{margin-top:0;color:var(--red)}
.tour ol{margin:0 0 16px;padding-left:20px;color:#c9cfd9}
.tour li{margin-bottom:7px}

/* ---------- global persona walkthrough ---------- */
.walkthrough{width:min(620px,calc(100% - 28px));padding:0;border:1px solid #323946;border-radius:10px;background:linear-gradient(160deg,#151820,#0b0d11 70%);color:var(--txt);box-shadow:0 30px 90px rgba(0,0,0,.65)}
.walkthrough::backdrop{background:rgba(2,3,5,.82);backdrop-filter:blur(8px)}
.walkthrough-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 14px;border-bottom:1px solid var(--line)}
.walkthrough-head h2{margin:0;font-size:25px}
.walkthrough-close{border:0;background:transparent;color:var(--dim);font:300 30px/1 system-ui;cursor:pointer;padding:0 4px}
.walkthrough-close:hover{color:#fff}
.walkthrough-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:16px 24px 0}
.walkthrough-progress i{height:3px;background:var(--line);border-radius:2px}.walkthrough-progress i.on{background:var(--red)}
.walkthrough-slide{min-height:235px;padding:24px}
.walkthrough-slide[hidden]{display:none}
.walkthrough-slide h3{font-size:28px;line-height:1.08;color:#fff;text-transform:none;letter-spacing:0;margin:9px 0 10px}
.walkthrough-slide p{font-size:17px;max-width:52ch;margin-bottom:22px}
.walkthrough-step{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.walkthrough-destination{display:inline-flex;text-decoration:none;padding:9px 14px!important}
/* Section rooms get the slide-less dialog: their own tabs, shown at once, plus
   the note about where the four Major 2 tools live. No 235px slide floor and no
   Back/Next bar — there is nothing to page through. */
.walkthrough-scoped .walkthrough-slide{min-height:0;padding:20px 24px 4px}
.walkthrough-scoped .walkthrough-slide p{font-size:16px;margin-bottom:0}
.walkthrough-scoped .walkthrough-slide+.walkthrough-pills+.walkthrough-slide,
.walkthrough-scoped .walkthrough-slide+.walkthrough-slide{border-top:1px solid var(--line);margin-top:14px;padding-top:16px;padding-bottom:22px}
.walkthrough-pills{display:flex;flex-wrap:wrap;gap:8px;padding:12px 24px 4px}
.walkthrough-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 20px;border-top:1px solid var(--line)}

/* ---------- question-first library + local search ---------- */
.masthead-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.masthead-actions a{text-decoration:none}
.question-router{margin:24px 0 8px;padding:22px 0 28px;border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:14px}.section-head h2{margin:0}.section-head p{margin:0}
.question-grid{grid-template-columns:1.25fr repeat(4,1fr)}
.question-card{background:linear-gradient(150deg,rgba(224,30,43,.12),var(--panel) 45%);border-color:var(--red-dim)}
.dossier-finder label,.dossier-toolbar label,.gameplan-search label{display:flex;flex-direction:column;gap:5px;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
input[type=search]{width:100%;background:#080a0e;color:var(--txt);border:1px solid #303641;border-radius:5px;padding:11px 12px;font:500 16px/1.2 "Saira Condensed",sans-serif;letter-spacing:.01em}
input[type=search]::placeholder{color:#687181}
.finder-results{display:grid;gap:4px;margin-top:6px}.finder-results:empty{display:none}
.finder-results a{display:flex;justify-content:space-between;gap:10px;text-decoration:none;padding:7px 8px;border-radius:4px;background:rgba(255,255,255,.035);font-size:13px}.finder-results a:hover{background:rgba(224,30,43,.12)}
.finder-results a span{color:var(--red)}
.dossier-toolbar,.gameplan-search{position:sticky;top:57px;z-index:15;display:grid;grid-template-columns:minmax(240px,520px) auto;align-items:end;gap:14px;margin:8px 0 16px;padding:12px;background:rgba(14,16,20,.94);border:1px solid var(--line);border-radius:7px;backdrop-filter:blur(10px)}

/* ---------- dossier touch details + sticky plan ---------- */
.mapwin .dot{appearance:none;width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;opacity:1}
.mapwin .dot::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:var(--red);border:1px solid rgba(0,0,0,.7);opacity:.9}
.mapwin .dot:hover::after,.mapwin .dot:focus-visible::after{box-shadow:0 0 0 5px rgba(224,30,43,.22)}
.death-detail{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:12px 38px 12px 12px;margin-top:8px;border-radius:0 6px 6px 0}
.death-detail[hidden]{display:none}.death-detail div{display:flex;flex-direction:column}.death-detail span{font-size:11px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}.death-detail b{font-size:14px}.death-detail .wide{grid-column:1/-1}.death-detail>button{position:absolute;right:8px;top:6px;border:0;background:transparent;color:var(--dim);font:24px/1 system-ui;cursor:pointer}
.sticky-plan{position:fixed;z-index:35;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;text-decoration:none;border:1px solid #ff4350;border-radius:7px;background:rgba(140,21,32,.96);color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(12px)}
.sticky-plan span{font-size:13px;color:#ffd8db}.sticky-plan b{font-size:15px;letter-spacing:.03em}.sticky-plan:hover{background:var(--red)}
body:has(.sticky-plan){padding-bottom:74px}

/* ---------- definitions, Compare and Gameplans ---------- */
.definition-note{margin:18px 0;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 6px 6px 0}
.definition-note summary{cursor:pointer;padding:11px 13px;color:#fff;font-weight:700}.definition-note p{padding:0 13px 12px;margin:0;font-size:13.5px;color:var(--dim)}
.compare-picker{display:grid;grid-template-columns:minmax(180px,240px) minmax(260px,1fr);gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:12px}
.compare-picker label{display:flex;flex-direction:column;gap:5px;color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.compare-picker select{width:100%;text-transform:none;letter-spacing:0}
.compare-picker details{grid-column:1/-1}.compare-picker summary{cursor:pointer;color:var(--dim);font-size:13px}.compare-picker details .controls{margin-top:8px}.compare-picker details select{min-width:240px}
.gameplan-result-card{display:grid;grid-template-columns:1fr auto;gap:4px 18px;margin:0 0 12px;padding:14px 16px;text-decoration:none;background:linear-gradient(100deg,rgba(224,30,43,.12),var(--panel) 45%);border:1px solid var(--red-dim);border-radius:7px}
.gameplan-result-card strong{font-size:20px}.gameplan-result-card span{color:var(--dim);font-size:13px}.gameplan-result-card b{grid-column:2;grid-row:1/4;align-self:center;color:#fff}
.receipts-disclosure{margin:14px 0}.receipts-disclosure>summary{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:#fff;font-weight:700;cursor:pointer}.receipts-disclosure>summary::after{content:'OPEN';color:var(--red);font:700 11px/1 var(--mono);letter-spacing:.1em}.receipts-disclosure[open]>summary::after{content:'CLOSE'}.receipts-disclosure>.tblwrap{margin-top:8px}

/* ---------- payload-neutral review workspace ---------- */
.review-rail{margin-top:10px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.review-rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.review-rail-head h4{margin:0;font-size:13px;letter-spacing:.11em;text-transform:uppercase}.review-rail-head span:not(.badge){font-size:12px;color:var(--dim)}
.review-markers{display:flex;gap:6px;overflow-x:auto;padding:9px 1px 4px;scrollbar-width:thin}.review-markers button{flex:0 0 auto;max-width:230px;text-align:left;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:4px;background:#0a0c10;color:var(--txt);padding:7px 9px;font:inherit;cursor:pointer}.review-markers button span{display:block;color:var(--dim);font-size:11px}.review-markers button:hover{border-color:var(--red-dim)}
.review-markers .zone{border-left-color:#c596f6}.review-markers .contact{border-left-color:var(--red)}.review-markers .dwell{border-left-color:var(--gold)}.review-markers .elim{border-left-color:#4ade80}.review-markers .empty{color:var(--dim);font-size:13px}
.moment-queries{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}.moment-queries .pill{font-size:11px;padding:5px 8px}
.workspace-layout{display:flex;align-items:center;gap:6px;margin-top:8px;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.workspace-layout button{border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:3px;padding:4px 7px;font:inherit;cursor:pointer}.workspace-layout button.on{background:var(--panel2);border-color:var(--red-dim);color:#fff}.workspace-layout em{margin-left:auto;text-transform:none;letter-spacing:0}
.film.is-focus{grid-template-columns:1fr}.film.is-focus>.side{display:none}
.fingerprint{display:grid;gap:7px}.fingerprint-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.fingerprint-bars span{display:flex;flex-direction:column;padding:7px;background:#090b0f;border-radius:4px;color:var(--dim);font-size:11px}.fingerprint-bars b{color:#fff;font:700 15px/1.2 var(--mono)}
.duo-braid{margin-top:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:6px}.duo-braid>div{display:flex;justify-content:space-between;gap:12px;font-size:12px}.duo-braid span{color:var(--dim)}.duo-braid canvas{display:block;width:100%;height:64px;margin-top:6px;background:#080a0e;border-radius:4px}

/* ---------- Surge Desk: one map, one sequence, one receipt ---------- */
.surge-page{padding-top:28px}
.surge-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.72fr);gap:34px;align-items:end;min-height:410px;padding:48px 44px;margin-bottom:18px;overflow:hidden;border:1px solid #35222a;background:
  radial-gradient(circle at 76% 18%,rgba(224,30,43,.20),transparent 31%),
  linear-gradient(118deg,#151317 0%,#090a0d 56%,#18080d 100%)}
.surge-hero::before{content:'SURGE';position:absolute;right:-18px;top:-52px;font:800 190px/1 "Saira Condensed",sans-serif;letter-spacing:-.045em;color:rgba(255,255,255,.022);pointer-events:none}
.surge-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--red) 0 41%,transparent 41%)}
.surge-hero-copy{position:relative;z-index:1}.surge-hero h1{font-size:clamp(48px,7vw,80px);line-height:.88;letter-spacing:-.035em;margin-bottom:24px;text-transform:uppercase}
.surge-hero h1 em{display:inline-block;color:#ff4050;font-style:normal}.surge-hero .lede{font-size:19px;max-width:54ch}
.surge-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.surge-hero-actions a{text-decoration:none}
.surge-pressure{position:relative;z-index:1;padding:22px 0 4px;border-top:1px solid rgba(255,255,255,.24)}
.surge-pressure span{display:block;margin-bottom:12px;color:#ff7b85;font:700 10px/1 var(--mono);letter-spacing:.16em}.surge-pressure b{display:block;color:#fff;font-size:25px;line-height:1.05}.surge-pressure p{margin:12px 0 0;font-size:14px;color:#a9b0bd}
.surge-primer{display:grid;grid-template-columns:.8fr 1.7fr;gap:34px;align-items:start;padding:28px 4px 32px;border-bottom:1px solid var(--line)}
.surge-primer h2{margin:0;font-size:34px}.surge-primer ol{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;padding:0;list-style:none;background:var(--line)}
.surge-primer li{min-height:110px;padding:16px;background:var(--ink)}.surge-primer li b{display:block;color:#fff;font-size:17px}.surge-primer li span{display:block;margin-top:6px;color:var(--dim);font-size:13px}
.surge-lanes{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:1px;margin:22px 0;background:var(--line);border:1px solid var(--line)}
.surge-lanes>div,.surge-lanes article{min-width:0;padding:16px;background:#090b0e}.surge-lanes>div h2{margin:0 0 7px;font-size:23px}.surge-lanes article span{display:block;color:var(--red);font:700 10px/1 var(--mono);letter-spacing:.12em}.surge-lanes article b{display:block;margin-top:11px;color:#fff;font-size:16px;line-height:1.05}.surge-lanes article p{margin:8px 0 0;color:var(--dim);font-size:11.5px;line-height:1.35}
.surge-workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start;margin-top:28px;scroll-margin-top:78px}
.surge-main{min-width:0}.surge-map-frame{position:relative;overflow:hidden;border:1px solid #33282d;background:#05060a;box-shadow:inset 0 0 90px rgba(224,30,43,.08)}
#surgeMap{display:block;width:100%;height:auto;aspect-ratio:1/1}
.surge-map-key{position:absolute;left:14px;bottom:14px;display:flex;gap:12px;flex-wrap:wrap;padding:7px 9px;background:rgba(5,6,10,.86);border:1px solid rgba(255,255,255,.16);font-size:11px;color:#d8dce4;backdrop-filter:blur(8px)}
.surge-map-key span{display:flex;align-items:center;gap:5px}.surge-map-key i{width:8px;height:8px;border-radius:50%;background:var(--gold)}.surge-map-key i.contact{background:#ff3347}.surge-map-key i.finish{background:#4ade80}
.surge-filterbar{display:grid;grid-template-columns:repeat(3,minmax(135px,1fr));gap:8px;align-items:end;margin-top:9px}
.surge-filterbar label{display:flex;flex-direction:column;gap:4px;color:var(--dim);font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.surge-filterbar select{width:100%;min-height:42px;padding:8px 10px;background:#0a0c10;color:#fff;border:1px solid var(--line);font:600 14px/1.2 "Saira Condensed",sans-serif}
.surge-filterbar>span{grid-column:1/-1}
.surge-sequence{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border:1px solid var(--line);background:var(--line);gap:1px}
.surge-sequence article{position:relative;min-height:166px;padding:17px 18px;background:#0a0c10}.surge-sequence article::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold)}
.surge-sequence article.contact::before{background:#ff3347}.surge-sequence article.finish::before{background:#4ade80}
.surge-sequence article>span{display:block;margin-bottom:13px;color:var(--gold);font:700 10px/1 var(--mono);letter-spacing:.14em}.surge-sequence article.contact>span{color:#ff6673}.surge-sequence article.finish>span{color:#6ee7a1}
.surge-sequence article>b{display:block;color:#fff;font-size:18px;line-height:1.1}.surge-sequence article>p{margin:10px 0 0;color:var(--dim);font-size:13px;line-height:1.35}
.surge-side{position:sticky;top:76px;min-width:0;border-top:4px solid var(--red)}
.surge-selected{padding:20px;background:linear-gradient(155deg,#171219,#0c0d11 68%);border:1px solid #34212a;border-top:0}.surge-selected h2{margin:0 0 5px;font-size:28px;line-height:1.02;text-transform:none}.surge-selected .kicker{margin-bottom:7px;font-size:10px}
.surge-scoreline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:18px 0;background:#2a252a}.surge-scoreline span{display:flex;flex-direction:column;padding:10px 8px;background:#100f13;color:var(--dim);font-size:10px;line-height:1.25}.surge-scoreline b{color:#fff;font:800 19px/1.1 var(--mono)}
.surge-film-link{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-bottom:9px;padding:10px 12px;background:var(--red);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.03em}.surge-film-link:hover{background:#f02838}.surge-selected button{width:100%;min-height:43px}
.surge-receipts-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:24px 0 7px}.surge-receipts-head h3{margin:0;color:#fff}.surge-receipts{display:grid;gap:4px}
.surge-receipts button{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;padding:10px 11px;text-align:left;background:#0b0d11;color:var(--txt);border:1px solid var(--line);font:inherit;cursor:pointer}.surge-receipts button:hover,.surge-receipts button.on{border-color:var(--red);background:#151015}.surge-receipts button>span{display:flex;gap:6px;align-items:baseline}.surge-receipts button em{color:var(--dim);font-size:10px;font-style:normal}.surge-receipts button strong{grid-column:1/-1;color:#fff;font-size:14px}.surge-receipts button small{grid-column:1/-1;color:var(--dim);font-size:11px}.surge-receipts button.on::after{content:'VIEWING';grid-column:2;grid-row:1;color:var(--red);font:700 9px/1 var(--mono);letter-spacing:.1em}
.surge-page>.definition-note{margin-top:28px}
@media(max-width:900px){.surge-workspace{grid-template-columns:1fr}.surge-side{position:static}.surge-primer{grid-template-columns:1fr}.surge-hero{grid-template-columns:1fr;min-height:0}.surge-lanes{grid-template-columns:repeat(2,1fr)}.surge-lanes>div{grid-column:1/-1}}

/* ---------- local freshness fail-closed ---------- */
.freshness-gate{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:rgba(7,8,10,.97);color:var(--txt)}
.freshness-gate b{font:800 clamp(32px,8vw,64px)/1 "Saira Condensed",sans-serif;letter-spacing:.04em;color:var(--red)}
.freshness-gate span{max-width:56ch;color:var(--dim);font-size:17px}

/* ---------- library masthead: the first paint is a map with routes on it ---------- */
.masthead{position:relative;margin:26px 0 8px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#05060a}
.masthead img{display:block;width:100%;height:clamp(360px,45vw,520px);opacity:.5;object-fit:cover}
.masthead-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 28px;background:linear-gradient(180deg,rgba(5,6,10,.15) 0%,rgba(5,6,10,.55) 55%,rgba(5,6,10,.92) 100%)}
.masthead-copy .lede{max-width:60ch}
@media(max-width:640px){.masthead-copy{padding:16px 14px}.masthead img{height:340px}}

/* ---------- takeaway: the ONE habit to copy ---------- */
.takeaway{border-left:3px solid var(--gold);background:rgba(255,197,49,.06);
  padding:9px 12px;margin:12px 0 0;border-radius:0 5px 5px 0;font-size:14.5px;line-height:1.5}
.takeaway b{color:#fff}
.takeaway.sm{font-size:12.5px;color:var(--dim);margin-top:8px;padding:6px 10px}

/* ---------- dossier map window (pure CSS zoom, no JS) ---------- */
.mapwin{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);
  border-radius:6px;background:#05060a;max-width:560px}
.mapwin img{position:absolute;display:block}
.mapwin .dot{position:absolute;transform:translate(-50%,-50%)}
.mapwin .ctr{position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid var(--gold);
  transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,197,49,.16)}

/* ---------- mobile pass (the audience is on phones) ---------- */
@media(max-width:640px){
  .wrap{padding:0 14px}
  .topbar .wrap{display:grid;grid-template-columns:1fr auto;height:auto;gap:6px 10px;padding-top:6px;padding-bottom:7px}
  .brand{font-size:13px;flex:0 0 auto}
  .walkthrough-open{margin-left:0;font-size:10.5px;padding:6px 8px}
  .nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px 8px;width:100%;white-space:normal}
  .nav a{display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px 2px;text-align:center;font-size:10px;line-height:1.1;border:1px solid transparent;border-radius:3px}
  .nav a.on{background:rgba(224,30,43,.12);border-color:var(--red-dim)}
  h2{font-size:20px}
  .lede{font-size:16px}
  .preview-flag{font-size:10.5px;letter-spacing:.08em}
  .hud{gap:10px;font-size:12px;padding:6px 8px}
  .hud .clock{font-size:14px}
  button.pill{padding:9px 13px;font-size:13.5px} /* 40px min touch height */
  .legend{font-size:11px;gap:8px}
  .card{padding:13px}
  .card .nm{font-size:17px}
  th,td{padding:7px 8px;font-size:13px}
  .note{padding:10px 12px}
  .tour .box{padding:16px}
  .mapwin{max-width:none}
  .walkthrough-head,.walkthrough-slide,.walkthrough-actions,.walkthrough-pills{padding-left:16px;padding-right:16px}.walkthrough-slide{min-height:250px}.walkthrough-scoped .walkthrough-slide{min-height:0}.walkthrough-slide h3{font-size:25px}
  .section-head{display:block}.section-head p{margin-top:6px}
  .question-grid{grid-template-columns:1fr}.question-router{margin-top:16px}
  .masthead-actions{display:grid;grid-template-columns:1fr}.masthead-actions>*{text-align:center;justify-content:center}
  .dossier-toolbar,.gameplan-search{top:102px;grid-template-columns:1fr;padding:9px}
  .compare-picker{grid-template-columns:1fr}.compare-picker details{grid-column:auto}.compare-picker details .controls{display:grid}.compare-picker details select{min-width:0;width:100%}
  .compare-picker summary{min-height:34px;display:flex;align-items:center}
  input[type=range]{min-height:32px}
  .gameplan-result-card{grid-template-columns:1fr}.gameplan-result-card b{grid-column:auto;grid-row:auto;margin-top:4px}
  .sticky-plan{bottom:max(8px,env(safe-area-inset-bottom))}
  .sticky-plan span{max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .review-markers button{max-width:200px}.workspace-layout{flex-wrap:wrap}.workspace-layout em{width:100%;margin-left:0}.duo-braid>div{display:block}.duo-braid span{display:block;margin-top:2px}
  .surge-page{padding-top:14px}.surge-hero{grid-template-columns:1fr;min-height:0;gap:22px;padding:30px 20px}.surge-hero::before{font-size:110px;top:-18px}.surge-hero h1{font-size:48px}.surge-hero .lede{font-size:16px}.surge-hero-actions{display:grid}.surge-hero-actions>*{display:flex;align-items:center;width:100%;min-height:44px;text-align:center;justify-content:center}
  .surge-primer{grid-template-columns:1fr;gap:18px;padding:22px 0}.surge-primer ol{grid-template-columns:1fr}.surge-primer li{min-height:0}.surge-lanes{grid-template-columns:1fr}.surge-lanes>div{grid-column:auto}.surge-workspace{grid-template-columns:1fr;margin-top:18px}.surge-filterbar{grid-template-columns:1fr}.surge-sequence{grid-template-columns:1fr}.surge-sequence article{min-height:0}.surge-side{position:static}.surge-map-key{left:7px;bottom:7px}.surge-receipts button{min-height:58px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ================================================================
   FILM-ROOM SHELL v2 (2026-08-23) — main menu + tab system.
   Appended, never rewritten. Everything above this line is the
   original S41 build; everything below is the multi-event shell.
   Contract for section authors: docs/film-section-contract.md
   ================================================================ */

/* ---------- main menu: one card per event film room ---------- */
.roomgrid{grid-template-columns:repeat(auto-fill,minmax(302px,1fr))}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-head .nm{margin-bottom:2px}
.card .meta{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.card .meta b{color:var(--dim);font-weight:700}
.card .go{display:block;margin-top:10px;color:var(--red);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* A room that has no film in it yet still gets a real page saying so, so the
   card stays a link — it is just dimmed, and its call to action is honest. */
.card.is-soon{opacity:.78}
.card.is-soon:hover{opacity:1}
.card.is-soon .go{color:var(--gold)}

/* Status badges. Same visual language as .badge.a / .badge.b, named for what
   they mean so section pages stop guessing which letter is which. */
.badge.live{border-color:#1f6f3f;color:#4ade80;background:rgba(31,111,63,.12)}
.badge.archive{border-color:#7a5a12;color:var(--gold);background:rgba(122,90,18,.12)}
.badge.soon{border-color:#2c3442;color:var(--dim);background:rgba(255,255,255,.03)}

/* ---------- breadcrumb back to the menu ---------- */
.crumb{display:inline-flex;align-items:center;gap:8px;margin:20px 0 4px;padding:0;
  color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.crumb:hover{color:var(--txt)}
.crumb b{color:var(--red);font-weight:700}

/* ---------- tabs (assets/tabs.js) ----------
   The no-JS baseline is a row of in-page anchors above every panel, all
   panels visible with their own <h2>. tabs.js adds .is-enhanced, which is
   the ONLY thing that hides a panel — never hide one from markup or CSS. */
.tabs{margin:22px 0 0}
.tablist{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 20px;padding:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:7px}
.tab{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 15px;
  border:1px solid transparent;border-radius:5px;background:transparent;color:var(--dim);
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.tab:hover{color:var(--txt);background:rgba(255,255,255,.045)}
.tab.on,.tab[aria-selected="true"]{color:#fff;background:var(--red);border-color:var(--red)}
.tab[aria-current="page"]{color:#fff;background:var(--red);border-color:var(--red)}
.tab:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.tabpanel{scroll-margin-top:72px}
.tabpanel:focus{outline:none}
.tabpanel:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.tabpanel-head{margin-top:0}
/* Enhanced: the tab strip already labels the panel, so the heading becomes the
   panel's accessible name only — visually hidden, never display:none. */
.tabs.is-enhanced .tabpanel-head{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.tabs:not(.is-enhanced) .tabpanel{margin-top:30px;padding-top:4px;border-top:1px solid var(--line)}
.tabs:not(.is-enhanced) .tabpanel:first-of-type{margin-top:14px}

@media(max-width:640px){
  .roomgrid{grid-template-columns:1fr}
  .tablist{gap:3px;padding:3px}
  .tab{flex:1 1 auto;min-width:calc(50% - 6px);padding:8px 6px;font-size:10.5px;letter-spacing:.07em}
  .crumb{font-size:11px;letter-spacing:.1em}
}

/* ---------- second-tier chrome: the views inside one section ----------
   The topbar .nav names ROOMS (menu / this section / film school). A section
   whose views are separate pages (the S41 Major 2 room) hangs them here, in
   the same sticky header, so a reader always sees both levels at once.
   Sections whose views live on ONE page use .tablist instead — see tabs.js. */
.subbar{border-top:1px solid var(--line);background:rgba(10,12,16,.86)}
.subbar .wrap{display:flex;align-items:center;gap:12px;min-height:0;padding-top:7px;padding-bottom:7px}
.subnav{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.subnav>b{color:var(--faint);font-weight:700;letter-spacing:.16em}
.subnav a{color:var(--dim);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--txt)}
.subnav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

@media(max-width:640px){
  /* .subbar sits INSIDE .topbar, so the mobile .topbar .wrap grid rule would
     otherwise reflow the view strip into two columns. Hold it as a flex row. */
  .subbar .wrap{display:flex;padding-top:5px;padding-bottom:6px}
  .subnav{gap:9px;font-size:10px;letter-spacing:.05em}
  .subnav>b{display:none}
}

/* ================================================================
   COMING-SOON TREATMENT (2026-08-23) — added for the Solos and Loot
   Paths rooms. A room with no dataset yet must never read as broken
   or half-built, so "not shipped" gets a deliberate, gold-keyed
   component of its own rather than a dimmed box. Three parts:
     .soonbanner  the announcement panel + its gate line
     .ladder      the dated build sequence, with per-step state
     .willdo      "what you will be able to do with it"
   All three use existing :root tokens only. Contract: docs/film-section-contract.md
   ================================================================ */

/* ---------- the announcement panel ---------- */
.soonbanner{position:relative;overflow:hidden;margin:20px 0 8px;padding:24px 26px;
  border:1px solid #4a3a10;border-left:4px solid var(--gold);border-radius:9px;
  background:
    repeating-linear-gradient(135deg,rgba(255,197,49,.045) 0 9px,transparent 9px 20px),
    linear-gradient(170deg,rgba(255,197,49,.075),rgba(255,197,49,.012) 62%,transparent)}
/* Ghost word behind the copy — same device as .surge-hero::before, so the
   treatment reads as house style rather than a one-off. */
.soonbanner::before{content:attr(data-ghost);position:absolute;right:16px;bottom:-26px;
  font-size:118px;font-weight:800;line-height:1;letter-spacing:-.035em;text-transform:uppercase;
  color:rgba(255,197,49,.055);pointer-events:none;white-space:nowrap;user-select:none}
.soonbanner>*{position:relative}
.soonbanner .kicker{color:var(--gold)}
.soonbanner h2,.soonbanner h3{margin:7px 0 0}
.soonbanner p{color:var(--dim);margin:9px 0 0}
.soonbanner p b{color:var(--txt)}

/* The gate line: the conditions that have to be true before it ships. */
.soon-gate{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:17px;padding-top:14px;
  border-top:1px solid rgba(255,197,49,.22)}
.soon-gate div{min-width:124px}
.soon-gate span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.soon-gate b{display:block;margin-top:3px;font-size:19px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.15}
.soon-gate em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:var(--dim)}

/* ---------- the dated build sequence ---------- */
.ladder{list-style:none;margin:16px 0 0;padding:0}
.ladder li{position:relative;margin-left:7px;padding:0 0 22px 30px;border-left:2px solid var(--line)}
.ladder li:last-child{border-left-color:transparent;padding-bottom:2px}
.ladder li::before{content:"";position:absolute;left:-9px;top:3px;width:14px;height:14px;
  border-radius:50%;background:var(--panel);border:2px solid var(--line);box-shadow:0 0 0 4px var(--ink)}
.ladder .when{display:inline-block;margin-bottom:6px;padding:4px 7px;border:1px solid var(--line);
  border-radius:4px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.ladder .what{margin:0 0 4px;font-size:16.5px;font-weight:700;color:var(--txt)}
.ladder p{margin:0;max-width:66ch;font-size:14px;color:var(--dim)}
.ladder li.is-done{border-left-color:#1f6f3f}
.ladder li.is-done::before{border-color:#4ade80;background:#4ade80}
.ladder li.is-done .when{color:#4ade80;border-color:#1f6f3f;background:rgba(31,111,63,.12)}
.ladder li.is-next{border-left-color:var(--gold)}
.ladder li.is-next::before{border-color:var(--gold);background:var(--gold)}
.ladder li.is-next .when{color:var(--gold);border-color:#7a5a12;background:rgba(122,90,18,.16)}
.ladder li.is-waiting{border-left-style:dashed}
.ladder li.is-waiting::before{border-style:dashed}

/* ---------- what you will be able to do with it ---------- */
.willdo{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.willdo li{position:relative;padding:11px 13px 11px 33px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);font-size:14px;color:var(--dim)}
.willdo li::before{content:"\2192";position:absolute;left:13px;top:11px;color:var(--gold);font-weight:800}
.willdo b{color:var(--txt);font-weight:700}

@media(max-width:640px){
  .soonbanner{padding:19px 17px}
  .soonbanner::before{font-size:74px;bottom:-16px;right:8px}
  .soon-gate{gap:11px 20px}
  .ladder li{padding-left:22px}
  .willdo{grid-template-columns:1fr}
}

/* ---------- inline SVG figures + table captions (added 2026-08-23 for the
   EWC 2026 section; see docs/film-section-contract.md §4 — new classes go here, not on
   the page). No library, no runtime: the SVG is authored into the HTML and
   every series it draws is repeated in a table underneath it, so the figure
   is decoration over data rather than the only place the data lives. ---------- */
.ewc-figure{margin:18px 0 6px;padding:14px 14px 10px;background:var(--panel);
  border:1px solid var(--line);border-radius:6px}
.ewc-figure figcaption{margin-top:10px;color:var(--faint)}
.ewc-chart{display:block;width:100%;height:auto;overflow:visible}
.ewc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.ewc-key{display:inline-flex;align-items:center;gap:7px}
.ewc-key i{width:11px;height:3px;border-radius:2px;flex:none}
.ewc-key b{color:var(--txt);font-weight:700}

/* A caption belongs to its table, so it sits inside .tblwrap and reads left. */
.tblwrap table caption{caption-side:top;text-align:left;padding:10px 12px 9px;
  color:var(--faint);border-bottom:1px solid var(--line)}
.tblwrap table tfoot td{border-top:1px solid var(--line);color:var(--dim)}

@media(max-width:640px){
  .ewc-figure{padding:10px 8px 8px}
  .ewc-legend{gap:4px 12px;font-size:11.5px}
}

/* ================================================================
   INTEGRATION PASS (2026-08-23) — reconciling the shell, the three
   section builds and the S41 archive into one room. Appended under
   the same rule as the blocks above: nothing higher up is rewritten.
   ================================================================ */

/* The mobile .nav rule above hard-codes three columns, which was right when
   every page had exactly three room links. The menu and Film School have two
   (there is no "this section" link to show), so the third column was an empty
   cell pushing the pair off-centre. auto-fit gives 2-up and 3-up both. */
@media(max-width:640px){
  .nav{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
}

/* aria-current is emitted alongside class="on" on the active room link as of
   the integration pass. Style the attribute too, so the paint can never drift
   from the semantics the way it did while only the class was written. */
.nav a[aria-current="page"]{color:var(--txt);border-bottom-color:var(--red)}
@media(max-width:640px){
  .nav a[aria-current="page"]{background:rgba(224,30,43,.12);border-color:var(--red-dim)}
}

/* Nine views now hang in the Major 2 .subbar (Spawns, Solo Plans and NA vs EU
   joined the six originals). At 375px that wraps to three lines inside a
   sticky header, which eats the viewport — cap it and let it scroll sideways
   instead, the same way every wide table in the room already behaves. */
@media(max-width:640px){
  .subbar .wrap{overflow-x:auto;scrollbar-width:none}
  .subbar .wrap::-webkit-scrollbar{display:none}
  .subnav{flex-wrap:nowrap;white-space:nowrap}
}