/* Selected Coast forecast layout. Theme preferences remain user controlled. */
body .shell {max-width:1300px;padding-inline:38px}
body .masthead {padding-block:20px}
body .notice {font-size:12px;line-height:1.55;margin-top:16px}
body .spot-heading {padding-block:18px 14px}
body .spot-heading h1 {font-size:48px}
body .forecast-guide {margin-block:0 10px}
body .day-row {margin-bottom:14px}
body .overview-day.day-button {min-width:116px;flex-basis:116px;padding:12px;gap:7px}
body .panel {border-radius:20px;padding:20px;box-shadow:0 8px 28px #153f4905}
body .chart-panel .forecast-horizon {margin:16px 0 14px;padding:16px 0 0;border-top:1px solid var(--line)}
body .forecast-horizon .fine-print {margin-block:6px 0}
body #forecast-horizon {margin-block:10px 2px}
body #swell-components {margin-bottom:16px}
body .component-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
body .component-grid article {border:0;border-left:3px solid var(--sea);border-radius:10px;padding:12px;background:var(--paper)}
body .component-grid article:nth-child(2) {border-left-color:var(--model-1)}
body .component-grid article:nth-child(3) {border-left-color:var(--model-2)}
body .component-grid article:nth-child(4) {border-left-color:var(--model-3)}
body .component-grid article:nth-child(5) {border-left-color:var(--model-4)}
body .component-grid h3 {margin-bottom:9px;font-size:12px}
body .component-grid p {margin-bottom:0;font-size:11px}
body .swell-source-details {margin-top:8px}
body #swell-components > .fine-print {margin-block:10px 0;font-size:11px}
/* One selected hour, with a compact planner and its own rating card. */
body .coast-row {display:grid;grid-template-columns:minmax(0,1fr) 325px;grid-template-areas:"main rating" "main sidebar";grid-template-rows:auto 1fr;gap:20px;align-items:start;margin-bottom:20px}
body .session-primary {grid-area:main;min-width:0;display:flex;flex-direction:column;gap:20px}
body .coast-row > .session-verdict {grid-area:rating}
body .session-primary > :is(.panel,.coast-atlas) {margin-block:0}
body .session-sidebar {grid-area:sidebar}
body .session-planner {min-width:0;margin-bottom:0}
body .session-sidebar {min-width:0;display:flex;flex-direction:column;gap:20px}
body .session-sidebar > .report-panel {margin:0}
body .session-planner h3 {font-size:15px;letter-spacing:-.2px;margin:0}
body .session-planner .section-heading {margin-bottom:12px;gap:12px}
body .session-heading .segmented button {min-height:44px}
body .session-window {border-radius:12px;padding:10px 12px;gap:10px}
body .session-window h2 {display:inline-block;font-size:18px;margin:0}
body .session-window .eyebrow {display:inline;margin-inline-end:10px;font-size:9px;letter-spacing:1px}
body .session-window .sun-mark {font-size:24px}
body .session-hours {margin-top:14px;min-width:0}
body .session-hours #weather-day-note {margin:0 0 8px}
body .session-hours #slider-time {font-size:12px;white-space:nowrap}
body .session-hours .hour-cards {margin:0;padding-right:0;max-width:100%}
body .session-hours .condition-hour.hour-card {gap:4px;padding:10px}
body .session-hours .condition-hour.hour-card > .hour-quality {font-size:27px}
body .session-planner .hour-direction .direction-label {opacity:1}
body .session-planner .forecast-horizon {border-top:0;padding-top:0;margin:12px 0 0}
body .session-planner #horizon-first-time {white-space:normal;text-align:start;overflow-wrap:anywhere}
body #forecast-horizon {--horizon-thumb-size:18px;--horizon-progress:0%;appearance:none;-webkit-appearance:none;height:32px;padding:0;border:0;background:transparent;margin:6px 0 0}
body #forecast-horizon::-webkit-slider-runnable-track {height:4px;border-radius:3px;background:linear-gradient(to right,var(--sea) var(--horizon-progress),var(--line) var(--horizon-progress))}
body #forecast-horizon::-webkit-slider-thumb {-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;background:var(--sea);border:0;border-radius:50%}
body #forecast-horizon::-moz-range-track {height:4px;border-radius:3px;background:var(--line)}
body #forecast-horizon::-moz-range-progress {height:4px;border-radius:3px;background:var(--sea)}
body #forecast-horizon::-moz-range-thumb {width:18px;height:18px;background:var(--sea);border:0;border-radius:50%}
body .horizon-days {min-width:0}
body .horizon-day-ticks {position:relative;height:6px}
body .horizon-day-tick {position:absolute;top:0;width:1px;height:4px;background:var(--muted);opacity:.65}
body .horizon-day-tick.selected {height:6px;background:var(--sea);opacity:1}
body .horizon-day-labels {display:grid;grid-template-columns:repeat(var(--horizon-day-count),minmax(44px,1fr));gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
body .horizon-day {min-width:0;min-height:44px;display:grid;place-content:center;gap:1px;padding:3px 1px;border:1px solid transparent;border-radius:7px;font-family:ui-monospace,monospace;font-size:10px;line-height:1.4;color:var(--muted)}
body .horizon-day span {white-space:nowrap}
body .horizon-day[aria-pressed=true] {color:var(--sea);border-color:var(--line);background:var(--paper)}
body .horizon-day:hover {background:var(--foam)}
body #horizon-range {margin-top:6px;font-size:10px;line-height:1.5}
body .session-graph {padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
body .session-graph #day-chart,body #forecast-details #model-chart {height:180px;width:100%;display:block}
body .session-graph .chart-choice {max-width:220px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}
body .session-graph .chart-labels {margin-top:5px;font-size:10px}
body .session-graph .chart-reading {margin-block:10px 0}
body .session-graph #chart-note {margin-top:6px;font-size:10px;line-height:1.5}
body .session-verdict {padding:20px 20px 0;min-width:0;overflow:visible}
body .session-verdict .verdict-top {display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}
body .session-verdict .verdict-time {display:flex;align-items:center;gap:6px;min-width:0}
body .session-verdict #selected-time {white-space:nowrap;font-size:9px;letter-spacing:.8px}
body .session-verdict .verdict-daylight {flex:none;display:flex;color:var(--muted)}
body .session-verdict .verdict-daylight svg {width:16px;height:16px}
body .session-verdict .trust-tag {flex:none}
body .session-verdict .verdict-main {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block:18px 12px;gap:12px}
body .session-verdict .verdict-label {min-width:0}
body .session-verdict .rating-help {margin-top:8px}
body .session-verdict .rating-help svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body .session-verdict .quality {font-size:30px;max-width:180px}
body .session-verdict .score strong {font-size:64px;letter-spacing:-3px}
body .session-verdict .surf-headline {gap:12px;padding-block:14px}
body .session-verdict .surf-headline > strong {font-size:27px}
body .forecast-details {margin-bottom:20px;min-width:0}
body .forecast-details > .section-heading {margin-bottom:18px}
body .session-confidence {min-width:0;max-width:620px}
body .session-confidence h2 {font-size:18px;margin-top:5px}
body .session-confidence .confidence-number {margin:12px 0}
body .session-confidence .confidence-number strong {font-size:44px}
body .session-confidence #confidence-copy {font-size:12px;margin-block:12px;line-height:1.6}
body .session-conditions {padding:0;margin-bottom:20px}
body .session-conditions > div {padding:16px 18px}
body .session-section {min-width:0;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
body .forecast-details #swell-components,body .forecast-details #advanced-table,body .forecast-details #advanced-geography {margin-bottom:0}
body .session-disclosure {border-top:1px solid var(--line);margin-top:12px;min-width:0}
body .session-disclosure > summary {display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;font-size:13px;font-weight:600;cursor:pointer;list-style:none}
body .session-disclosure > summary::-webkit-details-marker {display:none}
body .session-disclosure > summary > span {font-size:20px;font-weight:400;transition:transform .15s}
body .session-disclosure[open] > summary > span {transform:rotate(45deg)}
body .session-disclosure > p {font-size:12px;line-height:1.6}
body #advanced-table > .session-disclosure {margin-top:0;border:0}
body .session-extras .conditions {border-radius:0;margin-bottom:8px}
body .forecast-details .model-comparison summary {min-height:48px;cursor:pointer}
body .forecast-details .model-comparison summary h2 {font-size:15px}
body .forecast-details .swell-source-details summary {min-height:44px;display:flex;align-items:center;font-size:12px;cursor:pointer}
@media(max-width:650px) {
 body .shell {padding-inline:16px}
 body .masthead {padding-block:14px}
 body .brand small {display:none}
 body .top-actions {gap:8px}
 body .main-nav {gap:22px;padding-bottom:12px}
 body .notice {font-size:11px;padding:10px 12px}
 body .spot-heading {padding-block:18px 12px}
 body .spot-heading {position:relative;align-items:flex-start}
 body .spot-meta {font-size:10px}
 body .spot-heading h1 {font-size:42px}
 body .panel {padding:14px;border-radius:16px}
 body .swell-toolbar {gap:7px}
 body .forecast-horizon .swell-toolbar strong {font-size:12px;order:3}
 body #horizon-range {font-size:10px;line-height:1.5}
 body .component-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body .component-grid article {padding:9px;border-left-width:2px}
 body .component-grid h3 {font-size:10px;line-height:1.3;margin-bottom:7px}
 body .component-grid strong {font-size:18px}
 body .component-grid p {font-size:10px;line-height:1.4}
 body #swell-components > .fine-print {font-size:10px;line-height:1.4}
 body .session-graph #day-chart,body #forecast-details #model-chart {height:150px}
 body .chart-panel .section-heading {flex-wrap:wrap;gap:14px}
 body .chart-choice {width:100%;min-width:0;max-width:none;grid-template-columns:1fr;gap:6px}
 body .chart-choice select {width:100%;min-width:0;min-height:48px;font-size:16px;padding:12px 38px 12px 12px}
 body .swell-series-legend {font-size:10px;gap:7px}
 body #chart-note {font-size:10px}
}

/* Keep the save control clear of the beach title on mobile. */
@media(max-width:650px) {
 body .spot-actions {left:auto;right:0;width:auto;display:flex}
}

@media(max-width:650px) {body .hour-cards {margin-right:0}}
.coast-atlas {margin:0 0 22px;border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden}
.coast-atlas > summary {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;min-height:72px;cursor:pointer;list-style:none}
.coast-atlas > summary::-webkit-details-marker {display:none}
.coast-atlas > summary > span:first-child {display:grid;gap:7px}
.coast-atlas > summary strong {font-size:20px;font-weight:650;line-height:1.3;letter-spacing:-.6px;color:var(--heading)}
.coast-atlas > summary small {color:var(--muted);font-size:12px;line-height:1.5}
.atlas-expand {font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;color:var(--sea)}
.coast-atlas[open] > summary {border-bottom:1px solid var(--line)}
.coast-atlas > summary:focus-visible {outline:3px solid var(--sea);outline-offset:-4px}
#swell-maps-view {color:var(--ink);color-scheme:inherit}
#swell-map {background:var(--foam);color:var(--ink);font-family:inherit}
#swell-map .leaflet-popup-content-wrapper,#swell-map .leaflet-popup-tip,
#swell-map .leaflet-control-zoom a,#swell-map .leaflet-control-attribution {background:var(--card);color:var(--ink)}
#swell-map .leaflet-popup-content a,#swell-map .leaflet-control-attribution a {color:var(--sea)}
#swell-map .leaflet-control-zoom a:hover {background:var(--foam)}
#swell-map .leaflet-bar,#swell-map .leaflet-control-zoom a {border-color:var(--line)}
#swell-map a.leaflet-popup-close-button {color:var(--muted)}
#swell-maps-view > .panel {background:var(--card);border-radius:20px}
#swell-maps-view #atlas-title {color:var(--heading);font-size:38px;letter-spacing:-1px;margin:8px 0 14px}
#swell-maps-view .swell-toolbar {display:grid;grid-template-columns:1.2fr .8fr 1.1fr auto;gap:14px;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
#swell-maps-view .swell-toolbar label {min-width:0;color:var(--muted)}
#swell-maps-view .swell-toolbar select,#swell-maps-view .swell-toolbar input {width:100%;min-width:0}
#swell-maps-view > .panel > p:not(.eyebrow):not(.fine-print) {font-size:12px;line-height:1.6;color:var(--muted)}
#swell-map-play {align-self:end}
#coast-atlas-host #swell-maps-view > .panel {border:0;border-radius:0;margin:0}
#coast-atlas-host #atlas-title,#coast-atlas-host .eyebrow {display:none}
#swell-map-status,#swell-map-legend {line-height:1.7}
#swell-map-time-reading {font-size:12px;font-weight:600;line-height:1.5;margin-top:16px}
/* Move the top gutter into the header so scrolled content cannot peek above it.
   Existing body scroll regions, form nodes and dialog focus behavior stay intact. */
dialog[id] {--dialog-side-pad:26px;--dialog-top-pad:26px;scroll-padding-top:calc(var(--dialog-top-pad) + 72px)}
dialog[id][open] {padding-top:0!important}
dialog[id]::before {display:none!important}
dialog[id] > .dialog-header {position:sticky!important;top:0!important;z-index:5;flex:0 0 auto;margin-inline:calc(-1 * var(--dialog-side-pad))!important;padding:var(--dialog-top-pad) var(--dialog-side-pad) 12px;background:inherit!important}
dialog[id] > .dialog-header > :first-child {min-width:0}
dialog[id] > .dialog-header h2 {overflow-wrap:anywhere}
#account-dialog {--dialog-side-pad:28px;--dialog-top-pad:28px}
@media(max-width:760px) {
 dialog[id] {--dialog-side-pad:20px;--dialog-top-pad:25px}
 #account-dialog {--dialog-side-pad:20px;--dialog-top-pad:25px}
 dialog[id] > .dialog-header::before {content:""!important;position:absolute;z-index:0;top:10px;bottom:auto;right:auto;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:9px;background:var(--line)}
}
@media(max-width:600px) {
 dialog.feature-dialog,#experience-dialog {--dialog-side-pad:18px;--dialog-top-pad:22px}
}
@media(max-width:980px) {
 body .coast-row {grid-template-columns:minmax(0,1fr);grid-template-areas:"rating" "main" "sidebar";grid-template-rows:auto;gap:16px}
 body .session-primary {gap:16px}
 body .session-sidebar {gap:16px}
}
@media(max-width:650px) {
 body .session-window {padding:10px;gap:10px}
 body .session-window h2 {font-size:18px}
 body .session-graph .chart-choice {max-width:none;grid-template-columns:1fr;gap:6px}
 body .session-verdict .quality {font-size:26px}
 body .session-verdict .score strong {font-size:56px}
 body .session-verdict .verdict-main {gap:12px}
 body .session-verdict .score .score-scale {font-size:16px}
 body .session-verdict .score .score-explainer {font-size:11px;gap:5px}
 body .session-heading {flex-wrap:wrap}
 body .session-conditions {grid-template-columns:repeat(2,minmax(0,1fr))}
 body .session-conditions > div {padding:14px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
 body .session-conditions > div:nth-child(3n+1) {padding-left:10px}
 body .session-conditions > div:nth-child(2n+1) {padding-left:10px}
 body .session-conditions > div:nth-child(2n) {border-right:0}
 body .session-conditions > div:nth-last-child(-n+2) {border-bottom:0}
 body .session-conditions .eyebrow {font-size:8px;letter-spacing:.6px}
 body .session-conditions strong {font-size:23px}
 body .session-conditions .small-value {font-size:15px}
 body .session-extras .conditions {grid-template-columns:minmax(0,1fr)}
 body .session-extras .conditions > div {border-right:0;border-bottom:1px solid var(--line);padding:14px 0}
 body .session-extras .conditions > div:last-child {border-bottom:0}
}
@media(max-width:650px) {
 body .spot-heading {gap:12px} body .spot-actions {position:static;flex-wrap:wrap;justify-content:flex-end}
 body .spot-heading h1 {font-size:36px} body .spot-title {min-width:0}
 .coast-atlas > summary {padding:16px;align-items:flex-start}.coast-atlas > summary strong {font-size:20px}.atlas-expand {font-size:11px}
 #swell-maps-view .swell-toolbar {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px}
 #swell-map {height:365px}
 #swell-maps-view #atlas-title {font-size:30px}
}

/* Readable forecast: real HTML, native disclosure and the site's own tokens. */
.ssr-forecast {min-width:0}
.ssr-forecast h2 {margin-top:8px}
.ssr-current {display:grid;grid-template-columns:minmax(150px,1fr) 2fr;gap:24px;padding:20px;margin:20px 0;background:var(--foam);border:1px solid var(--line);border-radius:16px}
.ssr-score {font-size:44px;font-weight:650;line-height:1.15;margin:14px 0;color:var(--sea)}
.ssr-score small {display:block;font-size:12px;font-weight:400;margin-top:6px;color:var(--muted)}
.ssr-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:12px 0}
.ssr-metrics>div {min-width:0;padding:12px;border-bottom:1px solid var(--line)}
.ssr-metrics dt {font-size:12px;color:var(--muted);line-height:1.5}
.ssr-metrics dd {font-size:16px;margin:5px 0 0;overflow-wrap:anywhere}
.ssr-notice {border-left:3px solid var(--sea);background:var(--sand);padding:12px 16px;border-radius:4px}
.ssr-days {display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.ssr-days a {padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--foam);text-decoration:none;font-size:13px}
.server-content .ssr-day {border-top:1px solid var(--line);margin:12px 0;padding-top:8px;scroll-margin-top:24px}
.ssr-day>summary {display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600;list-style:none}
.ssr-day>summary::after {content:'+';font-size:20px}
.ssr-day[open]>summary::after {content:'−'}
.ssr-day>summary small {font-size:12px;font-weight:400;color:var(--muted);margin-left:auto}
.ssr-day h3 {font-size:16px;margin:22px 0 8px}
.server-content .ssr-hour {border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px;margin:8px 0}
.ssr-hour>summary {font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.ssr-hour-status {display:block;font-size:11px;color:var(--muted);margin-left:16px}
.ssr-hour h4 {margin:18px 12px 6px;font-size:14px;color:var(--heading)}
.ssr-forecast .forecast-table-wrap {max-width:100%;overscroll-behavior-x:contain}
.ssr-forecast .forecast-table-wrap:focus-visible {outline:2px solid var(--sea);outline-offset:2px}
.ssr-forecast .forecast-table th {position:static}
.ssr-forecast .forecast-table td {vertical-align:top}
:root:not([data-mode]) .top-actions,:root:not([data-mode]) .main-nav button,:root:not([data-mode]) .spot-actions,:root:not([data-mode]) .spot-meta #freshness,:root:not([data-mode]) #days,:root:not([data-mode]) .forecast-guide,:root:not([data-mode]) #spot-subtitle,:root:not([data-mode]) .spot-title>span,:root:not([data-mode]) #home-community button {display:none!important}
:root:not([data-mode]) .spot-title {pointer-events:none;cursor:default}
:root:not([data-mode]) .main-nav a {margin-left:0}
@media(max-width:760px) {
 .ssr-current {grid-template-columns:1fr;gap:8px;padding:16px}
 .ssr-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
 .ssr-current .ssr-metrics {margin:0}
 .ssr-days a {padding:10px 12px}
 .ssr-day>summary {font-size:14px}
 .server-content .ssr-hour {padding:8px 10px}
}
:root:not([data-mode])[data-palette="hunt-24"] {color-scheme:dark;--paper:#0b1117;--card:#1b2125;--ink:#d4d9de;--muted:#87919c;--heading:#88929a;--sea:#839581;--foam:#0d161d;--sand:#23282c;--line:#121e28;--slogan:#859199;--button-bg:#839581;--button-ink:#081018;--accent-secondary:#839581;--promo-bg:#1b2125;--promo-ink:#d4d9de;--promo-muted:#87919c}

.ssr-score-unavailable {font-size:20px;overflow-wrap:anywhere}
:root:not([data-mode]) .footer-links button {display:none!important}
/* Neutral rating-guide row uses the same readable surface in every palette. */
#rating-dialog .rating-bands>[data-rating-band="flat"] {background:var(--foam);color:var(--ink)}

/* The same forecast columns continue through conditions and both maps. */
body .session-sidebar .session-confidence {max-width:none}
body .session-sidebar h2 {font-size:18px;margin-top:6px}
body .session-sidebar .fine-print {line-height:1.6}
body .session-sidebar .model-list {gap:6px;margin-block:14px}
body .session-sidebar .model-chip {max-width:100%;white-space:normal;overflow-wrap:anywhere}
body .sidebar-nearby nav {display:grid;gap:0;margin-block:10px}
body .sidebar-nearby a {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding-block:10px;border-bottom:1px solid var(--line);text-decoration:none;font-size:13px}
body .sidebar-nearby a span {min-width:0;overflow-wrap:anywhere}
body .sidebar-nearby a small {white-space:nowrap;color:var(--muted);font-size:11px}
body .sidebar-nearby a:hover span {text-decoration:underline;text-underline-offset:4px}
body .sidebar-facts {margin:14px 0 0}
body .sidebar-facts div {display:flex;justify-content:space-between;gap:14px;padding-block:10px;border-bottom:1px solid var(--line);font-size:13px}
body .sidebar-facts dt {color:var(--muted)}
body .sidebar-facts dd {margin:0;text-align:end;overflow-wrap:anywhere;min-width:0}
body .sidebar-buoy .observation-values strong {font-size:26px}
body .sidebar-buoy .observation-source,body .sidebar-buoy .obs-status {font-size:12px}
body .session-primary .component-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px) {body .session-primary .component-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A real 404 with the same site surfaces, typography and native navigation. */
body .missing-shell {padding-bottom:28px}
.missing-shell .brand {text-decoration:none}
body .missing-page {padding:clamp(24px,5vw,64px);margin-block:22px;text-align:center}
.missing-code {margin:12px 0 0;font-size:clamp(76px,12vw,132px);font-weight:650;line-height:1;color:var(--sea);letter-spacing:-5px}
.missing-page h1 {font-size:clamp(30px,5vw,52px);letter-spacing:-1.5px;max-width:760px;margin:20px auto 12px}
.missing-copy {max-width:530px;margin:0 auto 22px;color:var(--muted);font-size:15px}
.missing-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.missing-actions a,.missing-shell .masthead>a:last-child {display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}
.missing-picks {border-top:1px solid var(--line);padding-top:24px}
.missing-picks h2 {font-size:17px}
.missing-picks nav,.missing-directory nav {display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.missing-picks a,.missing-directory nav a {display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;background:var(--foam);border:1px solid var(--line);border-radius:12px;text-decoration:none;font-size:13px}
.missing-picks a:hover,.missing-directory nav a:hover {text-decoration:underline;text-underline-offset:4px}
.missing-directory h2 {font-size:18px;margin-bottom:16px}
.missing-directory nav {justify-content:start}
@media(max-width:650px){.missing-shell .masthead {padding-bottom:16px;flex-wrap:wrap;gap:12px}.missing-shell .masthead>a:last-child {font-size:12px}.missing-actions a {width:100%}.missing-copy {font-size:14px}}

/* Mobile beach controls: status with refresh, then one aligned action row. */
@media(max-width:760px) {
 #forecast-view > .spot-heading {flex-direction:column;align-items:stretch;gap:10px}
 #forecast-view > .spot-heading > div:first-child {width:100%}
 #forecast-view .spot-meta {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px}
 #forecast-view .spot-meta > .subtitle {grid-column:1/-1}
 #forecast-view .spot-meta #freshness {min-width:0;white-space:normal}
 #forecast-view .spot-meta .forecast-refresh {max-width:48vw;white-space:normal}
 #forecast-view #homepage-choice {margin:8px 0 0}
 #forecast-view .spot-actions {display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);align-items:center;gap:8px;width:100%;max-width:none}
 #forecast-view .spot-actions #add-compare {order:0;width:100%;min-width:0;margin:0;white-space:normal;min-height:44px}
 #forecast-view .spot-actions .icon-button,#forecast-view .spot-actions .save-button {width:44px;height:44px}
 #forecast-view .coastal-map-heading {flex-wrap:wrap}
 #forecast-view .coastal-map-heading > div {margin-left:auto}
}
@media(max-width:360px) {body .session-conditions strong {font-size:20px}}

/* Confidence starts open; the native summary also works without JavaScript. */
.confidence-summary {cursor:pointer;list-style:none;min-height:44px}
.confidence-summary::-webkit-details-marker {display:none}
.confidence-summary h2 {margin:0;font-size:18px}
.confidence-summary .eyebrow {display:block;margin-bottom:6px}
.confidence-summary-row {display:flex;align-items:center;justify-content:space-between;gap:12px}
.context-action {color:var(--muted);white-space:nowrap;font-weight:550}
.confidence-summary:focus-visible {outline:2px solid var(--muted);outline-offset:4px;border-radius:4px}
#forecast-context[open] .context-expand,#forecast-context:not([open]) .context-minimise {display:none}
.context-evidence h3 {font-size:12px;margin:20px 0 8px;font-weight:600;color:var(--heading)}
/* Locality copy and planning tips, with native parking disclosures. */
#beach-guide {margin-top:20px}
body .session-primary>#beach-guide {margin-top:0}
.beach-guide h2 {margin:10px 0 16px;font-size:22px;line-height:1.3}
.beach-guide-description {font-size:15px;line-height:1.8;max-width:75ch;color:var(--ink)}
.beach-guide details {border:0;margin:4px 0;padding:0}
.beach-guide summary {cursor:pointer;min-height:44px;padding:12px 0;font-size:13px;color:var(--muted)}
.beach-guide .visit-disclosure>summary {padding-block:8px}
.beach-guide .visit-details>.fine-print {margin:8px 0 0}
.beach-guide ul {padding-left:20px;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.beach-guide li {margin-bottom:12px}
.beach-guide li small {display:block;color:var(--muted)}
.beach-guide .beach-guide-tips-heading {font-size:16px;line-height:1.5;margin:20px 0 10px}
.beach-guide .beach-guide-tips {font-size:15px;line-height:1.8;max-width:75ch;margin:0 0 16px;padding-left:22px}
.beach-guide .beach-guide-tips li:last-child {margin-bottom:0}
.beach-guide .beach-guide-reviewed {margin:16px 0 0}
.beach-guide-links {display:flex;flex-wrap:wrap;column-gap:24px;row-gap:0}
.beach-guide .text-button {display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font-size:13px}
.server-content>.beach-guide {margin-top:24px}