/* Compact, shared coastal treatment. Data labels and safety caveats remain intact. */
.forecast-dashboard #dashboardExplore .pick-art{display:block;height:auto!important;aspect-ratio:5/3;padding:0;background:none;border-radius:12px;overflow:hidden}
.forecast-dashboard #dashboardExplore .pick-art canvas[data-game-scene]{display:block;position:static;width:100%;height:100%;max-width:none;object-fit:contain}
.forecast-dashboard #dashboardExplore .game-pick{padding:10px;border-radius:14px;transition:transform .18s,border-color .18s}
.forecast-dashboard #dashboardExplore .game-pick:hover{transform:translateY(-2px);border-color:var(--site-accent)}
.forecast-dashboard .dashboard-moon-details:not(.dashboard-drivers){padding:16px;background:var(--dash-surface);overflow:hidden}
.forecast-dashboard .dashboard-moon-details>summary{font-size:15px;min-height:32px}
.forecast-dashboard .dashboard-moon-details #moon{display:grid;grid-template-columns:88px minmax(120px,1fr) minmax(0,2fr);gap:16px;align-items:center;padding:16px 0 0;background:transparent}
.forecast-dashboard #moon .moon-visual{width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#d6e9dc 0 58%,transparent 60%);position:relative}
.forecast-dashboard #moon .phase-disc{width:64px;height:64px;box-shadow:0 0 0 1px #23535d20,0 4px 12px #23535d18}
.forecast-dashboard #moon .moon-copy{min-width:0}
.forecast-dashboard #moon .moon-copy h3{font-size:11px;letter-spacing:.08em;color:var(--site-muted);margin:0 0 8px}
.forecast-dashboard #moon .moon-copy h4{font-size:20px;margin:0 0 6px}
.forecast-dashboard #moon .moon-copy p{font-size:13px;margin:0}
.forecast-dashboard #moon>p{display:none}
.forecast-dashboard #moon .next-phases-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.forecast-dashboard #moon .phase-list{grid-column:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;margin:0;padding:0;border:0}
.forecast-dashboard #moon .phase-item{position:relative;border-radius:12px;padding:12px 5px;min-width:0;background:var(--site-soft);text-align:center;display:flex;align-items:center;flex-direction:column;gap:7px}
.forecast-dashboard #moon .phase-item.is-next{background:#d7e9de;box-shadow:inset 0 -3px var(--site-accent)}
.forecast-dashboard #moon .phase-item b{font-size:12px;line-height:1.3}
.forecast-dashboard #moon .phase-item small{font-size:11px}
.forecast-dashboard #moon .mini-moon{width:25px;height:25px}
.forecast-dashboard #officialUpdates #forecastStatusGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:start}
.forecast-dashboard #officialUpdates #airQuality{grid-column:2;grid-row:1 / span 2}
.forecast-dashboard #officialUpdates #officialLocalConditions,.forecast-dashboard #officialUpdates #officialWarnings{grid-column:1}
.forecast-dashboard #officialUpdates #forecastStatusGrid>section{padding:16px;border-radius:16px;min-width:0}
.forecast-dashboard #officialUpdates #forecastStatusGrid>section>h3{font-size:17px;margin:8px 0}
.forecast-dashboard #officialUpdates #forecastStatusGrid>section>p{font-size:13px;line-height:1.5;margin:8px 0}
.forecast-dashboard #officialUpdates .air-region-card{background:var(--site-soft);border:0}
.forecast-dashboard #officialUpdates .air-region-selector{min-height:44px}
.forecast-dashboard #officialUpdates #safetyBanner{padding:12px 16px;margin-bottom:12px;background:#f5edd7;border-color:#e4d8b6}
.forecast-dashboard #officialUpdates .forecast-explainer{font-size:13px}
@media(max-width:800px){.forecast-dashboard .dashboard-moon-details #moon{grid-template-columns:76px 1fr}.forecast-dashboard #moon .phase-list{grid-column:1/-1}}
@media(max-width:600px){.forecast-dashboard #officialUpdates #forecastStatusGrid{grid-template-columns:1fr}.forecast-dashboard #officialUpdates #airQuality,.forecast-dashboard #officialUpdates #officialLocalConditions,.forecast-dashboard #officialUpdates #officialWarnings{grid-column:1;grid-row:auto}.forecast-dashboard #moon .phase-item{padding:10px 3px}.forecast-dashboard #moon .phase-item b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.forecast-dashboard #dashboardExplore .game-pick{transition:none}}
/* One horizontal, keyboard-accessible game shelf at every breakpoint. */
html body.forecast-dashboard #tideChart{display:grid;grid-template-columns:repeat(24,64px);gap:8px;width:max-content;min-width:100%;height:250px;min-height:250px;background-position:left bottom 49px}
html body.forecast-dashboard #tideChart .tide-hour{width:64px;min-width:64px;grid-template-rows:22px 144px 38px;gap:8px;padding:5px 4px}
html body.forecast-dashboard #tideChart .tide-hour>b{font:600 12px/1.4 Manrope,system-ui,sans-serif;white-space:nowrap}
html body.forecast-dashboard #tideChart .tide-hour>small{display:grid;grid-template-rows:18px 18px;font:600 12px/1.5 Manrope,system-ui,sans-serif;white-space:nowrap;text-align:center}
html body.forecast-dashboard #tideChart .tide-turn-label{font-size:11px;color:var(--site-accent)}
html body.forecast-dashboard #hourlyChart{grid-template-columns:repeat(24,64px);gap:8px;width:max-content;min-width:100%;height:250px;min-height:250px}
html body.forecast-dashboard #hourlyChart .hour{width:64px;min-width:64px;grid-template-rows:22px 164px 22px}
html body.forecast-dashboard #hourlyChart .hour>b,html body.forecast-dashboard #hourlyChart .hour>small{font:600 12px/1.5 Manrope,system-ui,sans-serif;white-space:nowrap}
html body.forecast-dashboard #forecastTitle{line-height:1.35!important;overflow-wrap:anywhere}
html body.forecast-dashboard .score-ring strong{line-height:1.3}
html body.forecast-dashboard .selected-week-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
html body.forecast-dashboard .selected-week-days article{min-width:0;padding:12px;border-radius:12px}
html body.forecast-dashboard .selected-week-days h3{font-size:14px;line-height:1.4;margin:0 0 8px;font-weight:700}
html body.forecast-dashboard .selected-week-days strong{font-size:22px;line-height:1.4;font-weight:700}
html body.forecast-dashboard .selected-week-days p{font-size:12px;line-height:1.5;margin:5px 0;overflow-wrap:anywhere}
@media(max-width:600px){html body.forecast-dashboard .selected-week-days{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
html body.forecast-dashboard #dashboardExplore .dashboard-game-picks{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:2px;overscroll-behavior-x:contain;padding:3px 2px 12px;min-width:0;scrollbar-width:thin;scrollbar-color:var(--site-accent) var(--site-soft)}
html body.forecast-dashboard #dashboardExplore .game-pick{flex:0 0 calc((100% - 36px)/4);min-width:0;scroll-snap-align:start}
.game-rail-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px;color:var(--site-muted);font-size:12px}
.game-rail-tools>div{display:flex;gap:8px}.game-rail-tools button{width:44px;height:44px;border-radius:50%;border:1px solid var(--site-border);background:var(--site-surface);color:var(--site-ink);font:600 20px system-ui;cursor:pointer}.game-rail-tools button:disabled{opacity:.4;cursor:default}
/* Consistent text roles, without flattening data values or semantic status colours. */
body.forecast-dashboard{font-family:Manrope,system-ui,sans-serif}
body.forecast-dashboard main :is(h1,h2,h3,h4,h5,p,small,strong,b,label,legend,a,span){font-family:Manrope,system-ui,sans-serif}
body.forecast-dashboard :is(button,input,select,textarea){font-family:inherit}
body.forecast-dashboard :is(.dashboard-games-heading h2,.dashboard-section-heading h2,.dashboard-official-heading h2){font-size:22px;font-weight:700;color:var(--site-ink);letter-spacing:-.025em}
body.forecast-dashboard #dashboardExplore .game-pick strong{font-size:16px;font-weight:700;color:var(--site-ink);line-height:1.4}
body.forecast-dashboard #dashboardExplore .game-pick small{font-size:11px;font-weight:600;color:var(--site-muted);letter-spacing:.055em}
body.forecast-dashboard #dashboardExplore .game-pick strong+span{font-size:13px;font-weight:400;color:var(--site-muted);line-height:1.5}
body.forecast-dashboard :is(.dashboard-games-heading p,.dashboard-official-heading p,.hero-copy .subhead){font-size:14px;font-weight:400;line-height:1.55;color:var(--site-muted)}
body.forecast-dashboard :is(.water-toggle button,.dashboard-country-choices button,.dashboard-games-browse){font-family:inherit;font-size:13px;font-weight:600}
@media(max-width:900px){html body.forecast-dashboard #dashboardExplore .game-pick{flex-basis:calc((100% - 24px)/3)}}
@media(max-width:600px){html body.forecast-dashboard #dashboardExplore .game-pick{flex-basis:76%}.game-rail-tools>span{max-width:190px}body.forecast-dashboard :is(input,select,textarea){font-size:16px}}