/* Shared project identity: When2Board header and language buttons, Go2Board footer. */
:root{--project-header-height:82px}html{scroll-padding-top:16px}
.project-header{position:relative;z-index:100;top:auto;left:auto;right:auto;display:flex;width:100%;height:var(--project-header-height);min-height:var(--project-header-height);align-items:center;justify-content:space-between;gap:32px;padding:0 max(24px,calc((100vw - 1240px)/2));border:0;border-bottom:1px solid rgba(17,41,45,.14);background:#fff;color:#003f4c;box-shadow:0 8px 36px #071e260a;backdrop-filter:none;box-sizing:border-box}
.project-header .project-logo{display:inline-flex;align-items:center;gap:13px;margin:0;padding:0;color:#003f4c;font:700 14px/1 'DM Sans',Arial,sans-serif;letter-spacing:.08em;text-decoration:none;white-space:nowrap;flex-shrink:0}
.project-logo img{display:block;width:44px;height:44px;flex:0 0 44px;object-fit:contain}
.project-logo span{padding:5px 7px 4px;border:1px solid rgba(17,41,45,.14);border-radius:6px;color:#08786b;background:#f7f9f8;font:600 9px/1 'IBM Plex Mono',monospace;letter-spacing:.06em}
.project-header .header-actions{display:flex;align-items:center;gap:28px;margin-left:auto;min-width:0;flex-shrink:0}
.project-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.project-nav a{position:relative;margin:0;padding:12px 0;border:0;color:#4e686d;font:600 12px/1 'DM Sans',Arial,sans-serif;letter-spacing:.05em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.project-nav a.active,.project-nav a:hover{color:#003f4c}.project-nav a.active:after{position:absolute;content:'';height:2px;left:0;right:0;bottom:3px;background:#08786b}
.project-header .language-switch{display:inline-flex;align-items:center;flex-shrink:0;gap:2px;padding:3px;border:1px solid rgba(17,41,45,.14);border-radius:7px;background:#f7f9f8;margin:0}
.project-header .language-switch button{width:auto;min-height:36px;margin:0;padding:7px 9px;border:0;border-radius:4px;background:transparent;color:#4e686d;cursor:pointer;font:500 10.4px/1 'IBM Plex Mono',monospace;white-space:nowrap}
.project-header .language-switch button[aria-pressed=true]{background:#003f4c;color:white}.project-header .language-switch button:hover{box-shadow:inset 0 0 0 1px #08786b}
.project-header :focus-visible,.project-footer :focus-visible{outline:3px solid #df933a;outline-offset:3px}
.project-footer{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;width:100%;max-width:none;margin:0;padding:32px max(24px,calc((100vw - 1240px)/2));border:0;background:#003f4c;color:#ffffffb3;font:400 11px/1.8 'IBM Plex Mono',monospace;letter-spacing:.02em;box-sizing:border-box;text-align:left}
.project-footer p{margin:0;color:inherit;font:inherit}.project-footer nav{display:flex;flex-wrap:wrap;gap:12px 22px}.project-footer a{color:#5cddc6;font:600 11px/1.8 'IBM Plex Mono',monospace;text-decoration:none;white-space:nowrap}.project-footer a:hover{text-decoration:underline;text-underline-offset:3px}
/* Keep page content and the forecast's map controls below the shared header. */
.about-page .gc-root{padding-bottom:0}.about-page .gc-root:before{top:var(--project-header-height)}
.forecast-page #map-screen{height:calc(100dvh - var(--project-header-height) - 52px);--header-height:0px}
.forecast-location-bar{position:sticky;top:0;z-index:100;width:100%;height:52px;display:flex;align-items:center;padding:6px max(24px,calc((100vw - 1240px)/2));background:#fff;border-bottom:1px solid rgba(17,41,45,.14);box-sizing:border-box}
.forecast-location-bar .beach-selectors{display:flex;width:auto;gap:8px}.forecast-location-bar #city-select{width:190px}.forecast-location-bar #beach-select{width:240px}.forecast-location-bar select{margin:0;padding:7px 10px;min-height:36px}
.forecast-page .instant-heading,.forecast-page #beach-section{scroll-margin-top:52px}
@media(max-width:760px){:root{--project-header-height:112px}.project-header{display:grid;grid-template-columns:1fr auto;grid-template-rows:58px 42px;gap:0 10px;padding:6px 14px;align-content:center}.project-header .header-actions{display:contents}.project-header .project-logo{font-size:12px;gap:9px}.project-logo img{width:36px;height:36px;flex-basis:36px}.project-logo span{font-size:8px;padding:4px 5px}.project-header .language-switch{grid-column:2;grid-row:1;justify-self:end}.project-header .language-switch button{min-height:32px;padding:6px 7px;font-size:10px}.project-nav{grid-column:1/-1;grid-row:2;gap:24px;justify-content:center}.project-nav a{font-size:11px;padding:11px 0}.project-footer{padding:28px 20px;gap:18px;align-items:flex-start;flex-direction:column}.project-footer nav{gap:10px 18px}.project-footer p,.project-footer a{font-size:10px}.forecast-location-bar{padding:7px 12px}.forecast-location-bar .beach-selectors{width:100%;order:initial}.forecast-location-bar #city-select,.forecast-location-bar #beach-select{width:0;flex:1;padding:7px 8px}.forecast-page #map-screen{--header-height:0px}}