/* Stage 2 retains the anonymous demo and adopts the beta shell tokens. */
:root{--player-font:Inter,"Helvetica Neue",Arial,sans-serif;--bg:#0b0c0f;--rail:#111318;--card:color-mix(in srgb,var(--accent) 5%,#17181b);--panel:var(--card);--line:color-mix(in srgb,var(--accent) 18%,#393b42);--text:#f3f3f7;--muted:#b9bbc5}
body{font-family:var(--player-font);line-height:1.5}
.player-menu-open{overflow:hidden}
.app{display:block!important;min-height:100dvh}
.app .rail{position:fixed!important;inset:0 auto 0 0!important;width:232px!important;min-width:232px!important;height:100dvh!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;padding:24px 16px!important;overflow-y:auto;overscroll-behavior:contain;background:color-mix(in srgb,var(--accent) 4%,#111318)}
.app .brand{justify-content:flex-start;text-align:left;padding-bottom:16px}
.app .g3-nav-group{text-align:left}
.app .g3-nav-group .nav-button{justify-content:flex-start;text-align:left;font-weight:500}
.app .nav-button[aria-current=page]{font-weight:600}
.app .g3-nav-group>span{font-weight:600;letter-spacing:.08em}
.app .surface{margin:0 0 0 232px!important;min-width:0;min-height:100dvh}
.app .topbar{position:sticky!important;top:0;display:flex!important;align-items:center;flex-wrap:nowrap!important;gap:16px!important;min-height:84px!important;height:auto!important;padding:18px 32px!important;background:color-mix(in srgb,var(--accent) 4%,#0e1014f5)}
.player-page-title{flex:1;min-width:0}
.app .topbar h1{font-size:24px;line-height:1.2;letter-spacing:-.025em;margin:0}
.app .topbar .eyebrow{font-size:10px;font-weight:500;letter-spacing:.12em}
.app .g3-menu-button{display:none!important}
.app .g3-menu-layer[hidden]{display:none!important}
.app .content{max-width:1400px;padding:clamp(18px,3vw,40px)!important;padding-bottom:40px!important}
.app :is(h1,h2,h3,h4,h5,h6,strong,b,legend),.dialog :is(h1,h2,h3,strong,b,legend){font-weight:600}
:is(button,input,select,textarea){font-family:var(--player-font);line-height:1.4}
.app :is(.primary,.quiet){font-weight:500}
.app :is(p,label,small){line-height:1.5}
.app :is(input,select,textarea){font-size:16px}
.app :is(.panel,.card,.site-card){background-color:var(--card)}
.app .hero{background:radial-gradient(ellipse at 82% 8%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 66%),linear-gradient(130deg,color-mix(in srgb,var(--accent) 5%,#111318),var(--card) 76%)}
.app .hero:has(+.g3-calendar){padding:24px}
.app .hero:has(+.g3-calendar) h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin:8px 0 12px}
.app .hero:has(+.g3-calendar) p{font-size:15px;max-width:60ch}
.app .g3-calendar{padding:20px}
.app .calendar-month-controls{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px auto;gap:12px!important;align-items:center;justify-content:stretch!important;margin-bottom:20px}
.app .calendar-month-controls h3{min-width:0!important;margin:0;text-align:center;font-size:21px;line-height:1.3}
.app .calendar-month-controls button{min-width:44px;min-height:44px}
.app .calendar-date-details{padding-top:24px}
.app .calendar-date-details>h3{font-size:clamp(22px,2.5vw,30px);line-height:1.25;margin:8px 0 16px}
.app .g4-custom-colour{grid-template-columns:minmax(160px,230px) minmax(0,1fr);gap:24px;margin:24px 0}
.app .colour-disc{max-width:230px;margin:0 auto}
.app .accent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.app .accent-choice{min-height:64px;font-weight:500;text-align:left}
.app .accent-preview{margin:16px 0}
.app .g3-privacy{margin-top:24px}
.app :is(.loadout-layout,.g3-player-loadout,.player-loadout,.loadout-config,.loadout-card,.planner-step) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:#0e1014;color:var(--text);border:1px solid var(--line);border-radius:9px}
.app :is(.sites-heading,.site-heading,.site-controls,.site-filters){margin:0}
.app :is(.site-controls,.site-filters){padding:20px}
.app :is(#siteList,.site-grid){gap:18px}
@media(max-width:760px){
 .app .rail{display:none!important}
 .app .surface{margin:0!important}
 .app .topbar{min-height:72px!important;padding:12px 14px!important;gap:12px!important}
 .app .topbar h1{font-size:22px}
 .app .topbar .g3-menu-button{display:inline-flex!important;flex:none;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .app .g3-mobile-drawer{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
 .app .content{padding:18px 14px calc(28px + env(safe-area-inset-bottom))!important}
 .app .g3-calendar{padding:12px}
 .app .calendar-month-controls{gap:8px!important}
 .app .calendar-month-controls h3{font-size:18px}
 .app .g4-custom-colour{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:390px){
 .app .calendar-month-controls{grid-template-columns:44px minmax(0,1fr) 44px}
 .app .calendar-month-controls>[data-action=calendar-today]{grid-column:1/-1;justify-self:center}
 .app .calendar-month-controls h3{font-size:17px}
 .app .accent-grid{grid-template-columns:minmax(0,1fr)}
}