:root {
  --bg: #051018;
  --panel: #0a1b27;
  --panel-2: #0d2433;
  --panel-3: #102d3d;
  --text: #eef8fb;
  --muted: #8fa8b4;
  --line: rgba(255,255,255,.09);
  --cyan: #62e7ff;
  --green: #72efb0;
  --amber: #ffd166;
  --red: #ff7b72;
  --purple: #c6a6ff;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 70% -20%, rgba(33,133,161,.34), transparent 32%),
    radial-gradient(circle at -10% 22%, rgba(14,83,107,.26), transparent 28%),
    var(--bg);
  color: var(--text);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar {
  max-width: 1120px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
h1,h2,p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(34px, 6vw, 52px); line-height: .95; letter-spacing: -.055em; }
h2 { margin-bottom: 0; font-size:22px; letter-spacing: -.025em; }
.eyebrow { color: var(--cyan); font-size:14px; font-weight: 900; letter-spacing: .14em; }
.icon-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  color: var(--text); background: rgba(10,27,39,.9); font-size:25px;
}
.icon-btn:hover { border-color: rgba(98,231,255,.35); }
main { max-width: 1120px; margin: 0 auto; padding: 0 18px 64px; }
.status-strip { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; margin: 8px 0 14px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
.dot.loading { background:var(--amber); animation:pulse 1s infinite alternate; }
.dot.error { background:var(--red); }
@keyframes pulse { to { opacity:.35; } }

.hero {
  background:
    linear-gradient(145deg, rgba(98,231,255,.16), rgba(10,27,39,.95) 44%),
    var(--panel);
  border: 1px solid rgba(98,231,255,.2);
  border-radius: 28px; padding: clamp(20px,4vw,30px); box-shadow: var(--shadow); overflow:hidden;
}
.hero-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.hero-verdict { margin-top: 9px; font-weight: 950; font-size: clamp(31px,7vw,61px); line-height:.95; letter-spacing:-.055em; }
.score-lockup { text-align:right; min-width:82px; }
.score-label { color:var(--muted); font-size:14px; font-weight:900; letter-spacing:.14em; }
.overall-score { font-size: clamp(38px,6vw,58px); font-weight:950; line-height:.95; }

.surf-size-lockup { margin-top:24px; padding:18px 20px; border-radius:20px; background:rgba(0,0,0,.16); border:1px solid var(--line); }
.surf-size-lockup span { display:block; color:var(--muted); font-size:14px; letter-spacing:.14em; font-weight:900; }
.surf-size-lockup strong { display:block; margin-top:3px; font-size:clamp(28px,6vw,46px); letter-spacing:-.045em; }
.surf-size-lockup small { display:block; margin-top:4px; color:#a9c0ca; }

.hero-window-row { margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hero-window-row > div { border-radius:16px; background:rgba(255,255,255,.045); border:1px solid var(--line); padding:14px 16px; }
.hero-window-row strong { display:block; font-size:18px; margin-top:3px; }
.hero-window-row small { display:block; color:var(--muted); margin-top:3px; }
.mini-label { display:block; color:var(--muted); font-size:14px; font-weight:900; letter-spacing:.12em; }
.second-window { background:rgba(255,209,102,.045)!important; }

.condition-grid { margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.condition-card {
  min-height:78px; display:flex; align-items:center; gap:11px; padding:13px 14px;
  background:rgba(255,255,255,.042); border:1px solid var(--line); border-radius:16px;
}
.condition-icon { font-size:21px; filter:saturate(.8); }
.condition-card small { display:block; color:var(--muted); font-size:14px; font-weight:900; letter-spacing:.1em; }
.condition-card strong { display:block; margin-top:3px; font-size:14px; line-height:1.25; }
.hero-summary { color:#c5d9e1; max-width:880px; line-height:1.5; margin:16px 2px 0; }
.gear-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.gear-chip { min-width:190px; padding:11px 14px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid var(--line); }
.gear-chip span { display:block; color:var(--muted); font-size:14px; letter-spacing:.11em; font-weight:900; }
.gear-chip strong { display:block; margin-top:3px; }

section { margin-top:30px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:12px; }
.section-heading.compact { margin-bottom:18px; }

.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mode-card {
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"icon copy score" "icon label label";
  gap:0 12px; align-items:center; text-align:left; color:var(--text); padding:17px;
  background:var(--panel); border:1px solid var(--line); border-radius:20px; transition:.15s ease;
}
.mode-card:hover { transform:translateY(-2px); border-color:rgba(98,231,255,.28); }
.mode-card.active { border-color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(98,231,255,.16); background:linear-gradient(145deg,rgba(98,231,255,.08),var(--panel)); }
.mode-icon { grid-area:icon; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.055); font-size:22px; }
.mode-copy { grid-area:copy; }
.mode-title { font-size:16px; font-weight:900; }
.mode-subtitle { color:var(--muted); font-size:14px; margin-top:2px; }
.mode-score { grid-area:score; font-size:34px; font-weight:950; }
.mode-label { grid-area:label; color:#cadae1; font-size:14px; margin-top:8px; }

.day-cards { display:grid; grid-template-columns:repeat(8,minmax(135px,1fr)); gap:10px; overflow-x:auto; padding:1px 1px 10px; }
.day-card {
  min-width:135px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:19px;
  text-align:left; padding:15px; transition:.15s ease;
}
.day-card:hover { transform:translateY(-2px); border-color:rgba(98,231,255,.28); }
.day-card.selected { border-color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(98,231,255,.12); }
.day-head { display:flex; align-items:start; justify-content:space-between; gap:8px; }
.day-name { font-weight:950; font-size:14px; }
.day-date { color:var(--muted); font-size:14px; margin-top:2px; }
.day-score { font-size:28px; font-weight:950; line-height:1; }
.day-size { margin-top:14px; font-size:14px; font-weight:900; min-height:34px; }
.day-window { color:#c8d8df; font-size:14px; margin-top:5px; min-height:29px; }
.day-badges { margin-top:10px; display:flex; gap:5px; flex-wrap:wrap; }
.badge { font-size:14px; padding:4px 6px; border-radius:999px; font-weight:950; letter-spacing:.04em; background:rgba(255,255,255,.07); }
.badge.quality { color:var(--cyan); }.badge.longboard { color:var(--green); }.badge.beginner { color:var(--purple); }

.hourly-legend { color:var(--muted); font-size:14px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.good-bg { background:var(--green); }.okay-bg { background:var(--amber); }.bad-bg { background:var(--red); }
.hourly-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:10px; }
.hour-card { position:relative; overflow:hidden; padding:14px; border-radius:18px; background:var(--panel); border:1px solid var(--line); min-height:190px; }
.hour-card.best { border-color:rgba(98,231,255,.52); background:linear-gradient(155deg,rgba(98,231,255,.09),var(--panel)); }
.hour-card.second { border-color:rgba(255,209,102,.35); }
.hour-card .window-tag { position:absolute; right:9px; top:9px; padding:4px 6px; border-radius:999px; background:rgba(98,231,255,.12); color:var(--cyan); font-size:14px; font-weight:950; letter-spacing:.06em; }
.hour-card.second .window-tag { background:rgba(255,209,102,.1); color:var(--amber); }
.hour-time { font-size:14px; font-weight:900; }
.hour-score { margin-top:10px; font-size:29px; font-weight:950; line-height:1; }
.hour-size { margin-top:9px; font-size:15px; font-weight:900; min-height:37px; }
.hour-raw { color:var(--muted); font-size:14px; margin-top:2px; }
.hour-condition { margin-top:8px; color:#c9d9df; font-size:14px; line-height:1.45; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:21px; padding:20px; }
.settings-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:14px; font-weight:700; }
select,input { width:100%; background:#07151f; color:var(--text); border:1px solid var(--line); border-radius:11px; padding:11px 12px; outline:none; }
select:focus,input:focus { border-color:var(--cyan); }
.primary-btn,.secondary-btn { margin-top:16px; border:0; border-radius:12px; padding:11px 16px; font-weight:950; }
.primary-btn { background:var(--cyan); color:#021219; }
.secondary-btn { background:#173142; color:var(--text); border:1px solid var(--line); }
.feedback-panel { display:grid; grid-template-columns:1fr 1.3fr; gap:20px; align-items:center; }
.feedback-panel p { color:var(--muted); line-height:1.5; margin-bottom:0; }
.feedback-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feedback-controls input { grid-column:1/-1; }
.feedback-controls .secondary-btn { margin:0; grid-column:1/-1; }
.fineprint { color:#75909c; font-size:14px; line-height:1.5; }
.sources { border-top:1px solid var(--line); padding-top:18px; }
.good { color:var(--green)!important; }.okay { color:var(--amber)!important; }.bad { color:var(--red)!important; }

@media (max-width:860px) {
  .condition-grid { grid-template-columns:1fr 1fr; }
  .settings-grid { grid-template-columns:1fr 1fr; }
  .feedback-panel { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .mode-grid { grid-template-columns:1fr; }
  .hero-window-row { grid-template-columns:1fr; }
  .day-cards { grid-template-columns:repeat(8,145px); }
  .hourly-cards { display:flex; overflow-x:auto; padding-bottom:8px; }
  .hour-card { min-width:145px; }
}
@media (max-width:480px) {
  main { padding-left:12px; padding-right:12px; }
  .topbar { padding-left:14px; padding-right:14px; }
  .hero { padding:19px; border-radius:23px; }
  .condition-grid { grid-template-columns:1fr 1fr; }
  .condition-card { min-height:72px; padding:11px; }
  .condition-icon { font-size:18px; }
  .condition-card strong { font-size:14px; }
  .settings-grid { grid-template-columns:1fr; }
  .gear-chip { flex:1 1 100%; }
}

.version-pill{display:inline-block;vertical-align:middle;margin-left:8px;padding:4px 8px;border-radius:999px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.09);color:var(--muted);}

/* v1.2 forecast story */
.forecast-story{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:16px 0 4px;
}
.story-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  border-radius:18px;
  padding:14px 15px;
  min-height:112px;
}
.story-kicker{
  font-size:.72rem;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.72;
  margin-bottom:9px;
}
.story-copy{
  font-size:.94rem;
  line-height:1.4;
  font-weight:650;
}
.story-wind{border-color:rgba(255,255,255,.16)}
@media(max-width:760px){
  .forecast-story{grid-template-columns:1fr}
  .story-card{min-height:auto}
}

/* v1.3 — visual ocean layer */
.hero { position: relative; isolation: isolate; }
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -55px;
  top: 56px;
  width: 310px;
  height: 130px;
  opacity: .16;
  background:
    radial-gradient(120px 50px at 35% 78%, transparent 58%, rgba(98,231,255,.85) 60% 64%, transparent 66%),
    radial-gradient(155px 62px at 76% 82%, transparent 59%, rgba(114,239,176,.7) 61% 64%, transparent 66%);
  transform: rotate(-6deg);
  pointer-events: none;
}

.ocean-visuals {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap: 11px;
  margin-top: 18px;
}
.visual-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px 11px;
  background: rgba(4,17,25,.42);
  overflow: hidden;
}
.visual-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.visual-head > div { display:flex; align-items:center; gap:7px; min-width:0; }
.visual-head strong { font-size:14px; letter-spacing:.11em; font-weight:950; color:#d8e8ee; }
.visual-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.055); color:var(--cyan); font-size:14px; }
.visual-chip { flex:0 0 auto; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:#bcd0d8; font-size:14px; font-weight:950; letter-spacing:.07em; text-transform:uppercase; }
.forecast-svg { width:100%; height:122px; display:block; overflow:visible; }
.visual-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#688793; font-size:14px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.visual-foot span:nth-child(2) { color:#9cb4be; text-align:center; }

.surface-scale { margin:17px 2px 13px; }
.surface-track { position:relative; height:13px; border-radius:999px; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; padding:2px; background:rgba(0,0,0,.2); border:1px solid var(--line); }
.surface-track > span { border-radius:999px; background:rgba(114,239,176,.38); }
.surface-track > span:nth-child(2) { background:rgba(114,239,176,.24); }
.surface-track > span:nth-child(3) { background:rgba(255,209,102,.28); }
.surface-track > span:nth-child(4) { background:rgba(255,123,114,.25); }
.surface-track > span:nth-child(5) { background:rgba(255,123,114,.42); }
.surface-track i { position:absolute; top:50%; left:0; width:7px; height:21px; border-radius:4px; background:#eef8fb; box-shadow:0 0 0 2px rgba(5,16,24,.72); transform:translate(-50%,-50%); transition:left .25s ease; }
.surface-labels { display:flex; justify-content:space-between; margin-top:6px; color:#75909b; font-size:14px; font-weight:950; letter-spacing:.07em; }
.wind-timeline { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-top:12px; }
.wind-step { min-width:0; text-align:center; }
.wind-arrow-wrap { width:32px; height:32px; margin:0 auto 4px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.045); border:1px solid var(--line); }
.wind-arrow { display:block; font-size:16px; line-height:1; color:#dcedf2; transform-origin:center; }
.wind-step strong { display:block; color:#aec2ca; font-size:14px; white-space:nowrap; }
.wind-step small { display:block; margin-top:2px; color:#688894; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wind-step.wind-clean .wind-arrow-wrap { border-color:rgba(114,239,176,.38); background:rgba(114,239,176,.055); }
.wind-step.wind-mixed .wind-arrow-wrap { border-color:rgba(255,209,102,.32); background:rgba(255,209,102,.045); }
.wind-step.wind-bad .wind-arrow-wrap { border-color:rgba(255,123,114,.38); background:rgba(255,123,114,.05); }

.day-spark { height:28px; display:flex; align-items:flex-end; gap:3px; margin:9px 0 1px; opacity:.86; }
.day-spark span { flex:1; min-width:3px; border-radius:4px 4px 2px 2px; background:rgba(143,168,180,.24); }
.day-spark span.spark-good { background:rgba(114,239,176,.65); }
.day-spark span.spark-okay { background:rgba(255,209,102,.58); }
.day-spark span.spark-bad { background:rgba(255,123,114,.42); }

.mode-score { position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:20px; isolation:isolate; background:conic-gradient(currentColor calc(var(--score,0) * 1%), rgba(255,255,255,.07) 0); }
.mode-score::before { content:""; position:absolute; inset:5px; z-index:-1; border-radius:50%; background:var(--panel); }
.mode-card.active .mode-score::before { background:#0a202d; }
.day-score { --score:0; position:relative; width:39px; height:39px; border-radius:50%; display:grid; place-items:center; font-size:16px; isolation:isolate; background:conic-gradient(currentColor calc(var(--score,0) * 1%), rgba(255,255,255,.065) 0); }
.day-score::before { content:""; position:absolute; inset:4px; z-index:-1; border-radius:50%; background:var(--panel); }
.day-card.selected .day-score::before { background:#0b202d; }

@media (max-width: 900px) {
  .ocean-visuals { grid-template-columns:1fr 1fr; }
  .visual-day-shape { grid-column:1/-1; }
}
@media (max-width: 620px) {
  .ocean-visuals { grid-template-columns:1fr; }
  .visual-day-shape { grid-column:auto; }
  .forecast-svg { height:108px; }
  .wind-timeline { gap:3px; }
  .wind-arrow-wrap { width:29px; height:29px; }
}

/* Web accessibility */
button:focus-visible, input:focus-visible, select:focus-visible {outline: 3px solid var(--cyan); outline-offset: 4px;}
[hidden] {display:none !important;}
.status-strip {overflow-wrap:anywhere;}
@media(prefers-reduced-motion:reduce){*{animation:none !important;scroll-behavior:auto !important;}}

/* Each wind observation keeps enough room for a readable time and speed. */
.wind-timeline {grid-template-columns:repeat(auto-fit,minmax(4.75rem,1fr));gap:14px 8px;}
.wind-step strong {font-size:.875rem;line-height:1.5;}
.wind-step small {font-size:.875rem;line-height:1.5;white-space:normal;overflow:visible;color:#9cb4be;}
.wind-step small span {display:block;}
.tide-chart-scroll {overflow-x:auto;margin:16px 0;}
#dailyTideSvg {display:block;width:100%;min-width:600px;height:auto;}
.tide-event-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:12px 0 20px;}
.tide-event {padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);}
.tide-event strong,.tide-event span {display:block;margin-top:4px;}
.tide-event small {color:var(--purple);font-size:.875rem;}
.daily-tides a {color:var(--cyan);}

.window-why {margin:10px 0 0;font-size:1rem;line-height:1.55;color:#bcd0d8;}
.hero-window-row > div:first-child {grid-column:1/-1;}
.feedback-controls select {grid-column:1/-1;}