/* Compact instrument cards: neutral surfaces, orange readings, mint water data. */
#conditionsTitle { scroll-margin-top:86px; }
.forecast-grid { --chart-bg:#171717; --chart-inset:#202020; --chart-header:#121212; --chart-edge:#303030; --chart-text:#ececea; --chart-muted:#999995; --chart-bar:#444442; --chart-orange:#f29a55; --chart-mint:#53deb0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
[data-theme="light"] .forecast-grid { --chart-bg:#f4f3ef; --chart-inset:#e9e8e3; --chart-header:#faf9f6; --chart-edge:#d5d3cc; --chart-text:#272722; --chart-muted:#65655e; --chart-bar:#bbb9b0; --chart-orange:#ac501c; --chart-mint:#187c5b; }
.forecast-grid .conditions-panel { background:var(--chart-bg); border-color:var(--chart-edge); color:var(--chart-text); border-radius:14px; padding:18px; box-shadow:0 2px 3px #0000000a; }
.forecast-heading,.forecast-grid .conditions-panel>h3 { display:flex; align-items:center; justify-content:space-between; min-height:45px; margin:-18px -18px 18px; padding:12px 18px; background:var(--chart-header); border-bottom:1px solid var(--chart-edge); border-radius:14px 14px 0 0; }
.forecast-grid h3 { color:var(--chart-text); font:500 13px/1.3 "Barlow Semi Condensed",sans-serif; letter-spacing:.015em; }
.forecast-heading h3 { margin:0; }
.forecast-date,.selected-time { color:var(--chart-muted); font:9px "IBM Plex Mono",monospace; }
.forecast-grid .metric { font:400 30px/1.2 "IBM Plex Mono",monospace; letter-spacing:-.055em; white-space:nowrap; }
.forecast-grid .metric small { font-size:13px; color:var(--chart-muted); letter-spacing:0; }
.forecast-grid .metric-caption { color:var(--chart-muted); font-size:13px; margin-top:5px; }
.surf-summary,.wind-summary { display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:92px; margin-bottom:12px; }
.forecast-swells { display:grid; gap:8px; }
.forecast-swells>div,.forecast-swells>button { display:grid; grid-template-columns:7px 42px 28px 70px; gap:9px; align-items:center; font:10px "IBM Plex Mono",monospace; white-space:nowrap; }
.forecast-swells b { font-weight:400; }.forecast-swells small { font-size:9px; color:var(--chart-muted); }
.swell-key { width:5px; height:5px; border-radius:1px; background:currentColor; }
.swell-0 { color:var(--chart-orange); fill:var(--chart-orange); }.swell-1 { color:#d5ccba; fill:#d5ccba; }.swell-2 { color:var(--chart-mint); fill:var(--chart-mint); }
.forecast-timeline { position:relative; padding-top:18px; isolation:isolate; }
.hour-bars { display:grid; grid-template-columns:repeat(19,minmax(0,1fr)); gap:5px; height:106px; position:relative; border-bottom:1px solid var(--chart-edge); background:repeating-linear-gradient(to top,transparent 0 34px,var(--chart-edge) 35px,transparent 36px); }
.hour-slot { display:flex; align-items:flex-end; min-width:0; }
.forecast-grid .chart-bar { background:var(--chart-bar); opacity:.7; border-radius:2px 2px 0 0; }
.forecast-grid .is-selected .chart-bar { background:var(--chart-orange); opacity:.9; }
.profile-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.profile-line polyline { fill:none; stroke:var(--chart-orange); stroke-width:1.7; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.night-band { position:absolute; top:18px; height:106px; background:repeating-linear-gradient(125deg,transparent 0 3px,#8888880d 3px 4px); z-index:-1; }
.night-morning { left:0; width:19%; }.night-evening { right:0; width:14%; }
.time-cursor { position:absolute; top:9px; height:116px; border-left:1px dotted var(--chart-orange); pointer-events:none; z-index:2; }
.time-cursor>span { position:absolute; top:-14px; left:0; transform:translateX(-50%); color:var(--chart-orange); font:9px "IBM Plex Mono",monospace; }
.hour-labels { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:7px -8px 0; }
.time-sample { display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:0; border-radius:5px; padding:6px 0; color:var(--chart-muted); font:9px "IBM Plex Mono",monospace; cursor:pointer; }
.time-sample b { font-size:11px; font-weight:500; color:var(--chart-text); }.time-sample small { font-size:10px; }
.time-sample.is-active { background:var(--chart-inset); color:var(--chart-orange); }
.wind-hour-arrow { display:block; width:17px; height:17px; color:var(--chart-text); }.wind-hour-arrow svg { width:100%; height:100%; }
.forecast-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; margin:14px -18px -18px; padding:11px 18px; border-top:1px solid var(--chart-edge); color:var(--chart-muted); font:9px/1.5 "IBM Plex Mono",monospace; }
.wind-metrics { display:flex; align-items:center; gap:15px; }.gust-metric { display:grid; gap:2px; font:10px "IBM Plex Mono",monospace; color:var(--chart-muted); }.gust-metric b { font-size:18px; font-weight:400; color:var(--chart-text); }
.wind-overhead { width:132px; height:78px; border-radius:8px; overflow:hidden; position:relative; flex-shrink:0; background:#242a29; }
.wind-overhead img,.coast-map img { width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(.48); }
.map-north,.map-wind-label { position:absolute; color:white; font:9px "IBM Plex Mono",monospace; }.map-north { top:6px; right:7px; }.map-wind-label { left:7px; top:6px; }
.map-wind-arrow { position:absolute; left:calc(50% - 15px); top:calc(50% - 15px); width:30px; height:30px; color:#fff; }.map-wind-arrow svg { width:100%; height:100%; }
.map-credit { position:absolute; bottom:3px; right:5px; color:#fff; background:#0009; padding:2px 3px; font:7px/1.2 sans-serif; text-decoration:none; }
.tide-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; }.tide-trend { color:var(--chart-mint); font:10px "IBM Plex Mono",monospace; }
.forecast-grid .tide-chart { margin:18px 0 0; color:var(--chart-mint); }
.tide-plot { position:relative; }.forecast-grid .tide-chart svg { height:auto; width:100%; overflow:visible; }
.tide-night { fill:#99999906; }.forecast-grid .chart-gridline { stroke:var(--chart-edge); stroke-width:1; stroke-dasharray:3 6; }
#tideArea { fill:url(#tideFill); }.tide-line { stroke:var(--chart-mint); stroke-width:2; vector-effect:non-scaling-stroke; }
#tideCursor line { stroke:var(--chart-mint); stroke-width:1; stroke-dasharray:3 4; }#tideCursor circle { fill:var(--chart-mint); stroke:var(--chart-bg); stroke-width:3; }
.forecast-grid .tide-axis { margin:0 0 16px; color:var(--chart-muted); font-size:9px; }
.forecast-grid .tide-events { gap:8px; }.forecast-grid .tide-events>div { border-color:var(--chart-edge); gap:5px; }
.forecast-grid .tide-events b { font:11px "IBM Plex Mono",monospace; }.forecast-grid .tide-events span { font-size:11px; color:var(--chart-muted); }
.coast-map { position:relative; height:208px; border-radius:8px; overflow:hidden; }.coast-compass { position:absolute; height:100%; width:100%; top:0; left:0; }
.compass-grid { stroke:#ffffff65; stroke-width:1; fill:none; }.compass-grid circle:not(:first-child),.compass-grid path { stroke-dasharray:2 5; }.compass-degrees { fill:#fff; text-anchor:middle; font:10px "IBM Plex Mono",monospace; }
.swell-vector { opacity:.42; transition:opacity 150ms ease; }.swell-vector.is-active { opacity:1; filter:drop-shadow(0 0 3px #0008); }.coast-name { position:absolute; bottom:10px; left:12px; color:#fff; font:9px "IBM Plex Mono",monospace; }
.coast-forecast .forecast-swells { margin-top:12px; gap:4px; }.coast-forecast .forecast-swells>button { grid-template-columns:8px 1fr 1fr 1fr; width:100%; border:1px solid transparent; border-radius:5px; background:none; color:var(--chart-muted); padding:7px 9px; text-align:left; cursor:pointer; }
.coast-forecast .forecast-swells>button[aria-pressed="true"] { color:var(--chart-text); border-color:var(--chart-edge); background:var(--chart-inset); }
.forecast-grid .temperature-row { gap:12px; }.temperature-row>div { padding:16px; border:1px solid var(--chart-edge); border-radius:8px; background:var(--chart-inset); }.forecast-grid .temperature-row>div>span { color:var(--chart-muted); font-size:12px; }.temperature-row>div:first-child .metric { color:var(--chart-mint); }.temperature-row>div:last-child .metric { color:var(--chart-orange); }
.forecast-grid .daylight { gap:14px 24px; border-color:var(--chart-edge); margin-top:18px; }.forecast-grid .daylight>div { flex-direction:row; font-size:12px; }.forecast-grid .daylight span { color:var(--chart-muted); }.daylight b { font:11px "IBM Plex Mono",monospace; }
.forecast-grid .energy-row { font-size:12px; color:var(--chart-muted); }.forecast-grid .energy-row b { color:var(--chart-text); font:18px "IBM Plex Mono",monospace; }.forecast-grid .energy-row small { font-size:10px; }
.forecast-grid .energy-track { position:relative; height:12px; border-radius:2px; overflow:visible; background:repeating-linear-gradient(to right,var(--chart-bar) 0 4px,transparent 4px 7px); cursor:crosshair; }
.forecast-grid .energy-track i { background:repeating-linear-gradient(to right,var(--chart-orange) 0 4px,transparent 4px 7px); }.forecast-grid .offshore i { opacity:.45; }.forecast-grid .chart-footnote { color:var(--chart-muted); font:9px "IBM Plex Mono",monospace; }
.forecast-grid .consistency { margin-top:16px; padding-top:15px; border-color:var(--chart-edge); color:var(--chart-muted); font-size:12px; }.consistency>div:first-child { display:grid; gap:9px; }.forecast-grid .consistency>div:first-child>b { color:var(--chart-text); font:23px "IBM Plex Mono",monospace; }.forecast-grid .consistency>div:first-child>b>small { font-size:12px; }
.consistency-gauge { position:relative; width:142px; height:77px; cursor:crosshair; }.consistency-gauge i { position:absolute; left:calc(50% - 1px); top:1px; width:2px; height:10px; background:var(--chart-bar); border-radius:2px; transform-origin:1px 70px; }.consistency-gauge i.is-filled { background:var(--chart-mint); }.consistency-gauge>span:not(.chart-tooltip) { position:absolute; bottom:5px; left:0; width:100%; text-align:center; font:23px "IBM Plex Mono",monospace; color:var(--chart-text); }
.scrub-plot { cursor:crosshair; touch-action:pan-y; }.chart-tooltip { position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:8; display:grid; gap:5px; width:max-content; max-width:calc(100% - 12px); padding:9px 11px; border:1px solid #ffffff29; border-radius:7px; box-shadow:0 5px 16px #0004; background:#252525f5; color:#eee; font:10px/1.5 "IBM Plex Mono",monospace; opacity:0; pointer-events:none; visibility:hidden; }
.chart-tooltip b { font-weight:500; color:#f2a466; }.chart-tooltip small { font:9px/1.3 "IBM Plex Mono",monospace; color:#b4b4ad; }.is-inspecting>.chart-tooltip { opacity:1; visibility:visible; }.tide-plot .chart-tooltip b { color:#53deb0; }.inspect-energy .chart-tooltip { top:auto; bottom:18px; }.consistency-gauge .chart-tooltip { top:auto; bottom:calc(100% + 12px); }
.forecast-grid :is(button,.scrub-plot,.coast-map,.inspect-energy,.consistency-gauge):focus-visible { outline:2px solid var(--chart-orange); outline-offset:4px; }
@media(min-width:1000px) { .surf-forecast .forecast-bottom { margin-top:77px; } }
@media(max-width:999px) { .surf-summary { flex-wrap:wrap; gap:12px; }.surf-summary .forecast-swells { grid-template-columns:1fr; width:100%; }.surf-summary .forecast-swells>div { grid-template-columns:7px 1fr 1fr 1fr; }.wind-overhead { width:96px; }.wind-metrics { gap:9px; } }
@media(max-width:767px) { .forecast-grid { grid-template-columns:1fr; }.forecast-grid .conditions-panel { padding:16px; }.forecast-heading,.forecast-grid .conditions-panel>h3 { margin:-16px -16px 16px; padding-inline:16px; }.forecast-bottom { margin-inline:-16px; margin-bottom:-16px; padding-inline:16px; }.surf-summary { flex-wrap:nowrap; }.surf-summary .forecast-swells { width:auto; }.surf-summary .forecast-swells>div { grid-template-columns:5px 33px 23px 60px; gap:5px; font-size:9px; }.forecast-grid .metric { font-size:27px; }.hour-bars { gap:4px; height:98px; }.night-band { height:98px; }.time-cursor { height:108px; }.wind-overhead { width:110px; }.coast-map { height:215px; }.forecast-grid .daylight { gap:14px; }.forecast-grid .temperature-row>div { padding:12px; }.forecast-grid .tide-events span { font-size:10px; }.forecast-grid .tide-events b { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .swell-vector { transition:none; } }
.tide-annotations text { fill:var(--chart-muted); text-anchor:middle; font:11px "IBM Plex Mono",monospace; }.tide-annotations path { stroke:var(--chart-edge); stroke-width:1; fill:none; }#tideCursor path { stroke:var(--chart-mint); stroke-width:1; stroke-dasharray:3 4; fill:none; }
.surf-forecast .forecast-swells { background:var(--chart-inset); border:1px solid var(--chart-edge); border-radius:7px; padding:10px; }
@media(max-width:380px) { .surf-summary { flex-wrap:wrap; }.surf-summary .forecast-swells { width:100%; }.surf-summary .forecast-swells>div { grid-template-columns:5px 1fr 1fr 1fr; } }
@media(max-width:767px) { .tide-annotations text { font-size:15px; }.tide-annotations text:nth-child(2) { display:none; } }
.forecast-grid .tide-axis { position:relative; display:block; height:12px; }.tide-axis span { position:absolute; transform:translateX(-50%); }.tide-axis span:first-child { transform:none; }.tide-axis span:last-child { transform:translateX(-100%); }

/* Tooltip typography stays independent of the large rating readout. */
.consistency-gauge .chart-tooltip b { font:500 10px/1.5 "IBM Plex Mono",monospace; color:#53deb0; }
.consistency-gauge .chart-tooltip small { font:9px/1.3 "IBM Plex Mono",monospace; }
.coast-map[data-active-swell="0"] .chart-tooltip b { color:#f29a55; }
.coast-map[data-active-swell="1"] .chart-tooltip b { color:#eee; }
.coast-map[data-active-swell="2"] .chart-tooltip b { color:#53deb0; }
.coast-forecast [data-swell="0"][aria-pressed="true"]>span:last-child { color:var(--chart-orange); }
.coast-forecast [data-swell="1"][aria-pressed="true"]>span:last-child { color:var(--chart-text); }
.coast-forecast [data-swell="2"][aria-pressed="true"]>span:last-child { color:var(--chart-mint); }
.temperature-row>div { --temperature-accent:var(--chart-mint); --temperature-glow:#53deb026; transition:border-color 180ms ease,box-shadow 180ms ease; }
.temperature-row>div:last-child { --temperature-accent:var(--chart-orange); --temperature-glow:#f29a5526; }
.temperature-row>div:focus-visible { outline:none; border-color:var(--temperature-accent); box-shadow:0 0 0 1px var(--temperature-accent),0 0 22px var(--temperature-glow); }
@media(hover:hover) { .temperature-row>div:hover { border-color:var(--temperature-accent); box-shadow:0 0 0 1px var(--temperature-accent),0 0 22px var(--temperature-glow); } }
@media(prefers-reduced-motion:reduce) { .temperature-row>div { transition:none; } }
/* Keep the session entry visible; reveal other readings only on inspection. */
.surf-forecast .hour-slot .chart-bar { background:var(--chart-bar); opacity:.7; }
.surf-forecast .hour-slot[data-hour="8"] .chart-bar { background:var(--chart-orange); opacity:.9; }
.surf-forecast .is-inspecting .hour-slot.is-selected .chart-bar { background:var(--chart-orange); opacity:1; }
.surf-forecast .chart-tooltip b { color:var(--chart-orange); }
.surf-forecast .time-cursor>span { display:none; }
.surf-entry-marker { position:absolute; left:28.9474%; top:6px; height:118px; border-left:1px dashed var(--chart-text); pointer-events:none; z-index:3; }
.surf-entry-marker>span { position:absolute; top:-18px; left:0; transform:translateX(-50%); width:max-content; color:var(--chart-text); font:9px "IBM Plex Mono",monospace; }
@media(min-width:1000px) { .surf-forecast .forecast-bottom { margin-top:77px; } }
@media(max-width:767px) { .surf-entry-marker { height:110px; } }