/* ZVN weer — dashboard layout. North Sea palette: misty sea-grey ground, deep-water ink,
   signal orange reserved for the wind vane, green for the live status. */
:root {
  --ground: #E7EEEE;
  --surface: #F6F9F8;
  --ink: #14323C;
  --muted: #557079;
  --line: #C9D6D7;
  --signal: #E8590C;
  --sea: #1C7C8C;
  --warn: #B4231B;
  --ok: #2B8A3E;
  /* chart series: validated pair (scripts/validate_palette.js, light + dark) */
  --c-avg: #00809E;
  --c-gust: #E8590C;
  --grid: #DCE5E5;
  --land: #7A8F4E;
  --sand: #E6D6A8;
  --streak: #7FA2AB; /* wind streaks on the dial: airy sea-grey, lighter than the ink */
  /* Beaufort colour scale, calm blue -> green -> yellow -> orange -> red -> purple */
  --bft-0: #B3DEEC; --bft-1: #86CBE0; --bft-2: #52B4CC; --bft-3: #3FAE92; --bft-4: #6DBE4B;
  --bft-5: #B4CE3A; --bft-6: #F2C744; --bft-7: #F39A45; --bft-8: #E8590C; --bft-9: #D42F1F;
  --bft-10: #B0145A; --bft-11: #861B7C; --bft-12: #561A6C;

  --font: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --radius-lg: 18px;
  --radius-sm: 8px;
  --gap: 0.75rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0C1D23;
    --surface: #12282F;
    --ink: #E2ECEC;
    --muted: #8EA6AD;
    --line: #22414A;
    --signal: #FF7A33;
    --sea: #4DB3C2;
    --warn: #FF6B5E;
    --ok: #51CF66;
    --c-avg: #00A0C4;
    --c-gust: #E8590C;
    --grid: #1D3840;
    --land: #8FA35F;
    --sand: #6B6044;
    --streak: #E2ECEC;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.top, main, .foot {
  width: min(100% - 2 * var(--gap), 90rem);
  margin-inline: auto;
}

/* Header: one line */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.9rem 0.6rem;
}
.club { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; }
/* logo inline (not flex) so the h1 keeps its text baseline for the header row */
.club h1 { margin: 0; font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; }
.club h1 .logo { display: inline-block; height: 0.9em; width: auto; margin-right: 0.45em; vertical-align: -0.12em; }
.club p { margin: 0; color: var(--muted); font-size: var(--step--1); }

.status {
  display: inline-flex;
  align-items: baseline; /* text baseline lines up with the title; the dot centres itself */
  gap: 0.5rem;
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.status .dot { align-self: center; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); }
.status.live .dot { background: var(--ok); }
.status.live .dot.ping { animation: pulse 1.6s ease-out; } /* once per reading that arrives */
.status.stale { color: var(--warn); }
.status.stale .dot { background: var(--warn); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.55rem transparent; }
}

/* Dashboard grid. Source order is the phone order:
   wind, charts, now, sea, sun/moon, today. */
main {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
.panel {
  min-width: 0;
  padding: 0.9rem 1.1rem 1rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
}
.panel h2 {
  margin: 0 0 0.6rem;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 46rem) {
  main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "wind  wind"
      "trend trend"
      "now   today"
      "sea   sea"
      "sky   sky";
  }
  .wind { grid-area: wind; } .sea { grid-area: sea; } .now { grid-area: now; }
  .trend { grid-area: trend; } .today { grid-area: today; } .sky { grid-area: sky; }
}

@media (min-width: 72rem) {
  main {
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "wind  trend"
      "sea   now"
      "sea   today"
      "sky   today";
  }
  main:has(.sea[hidden]) { grid-template-areas: "wind trend" "now today" "now sky"; grid-template-rows: auto auto 1fr; }
}

dl { margin: 0; }
dl div { min-width: 0; }
dt { color: var(--muted); font-size: var(--step--1); }
dd { margin: 0.05rem 0 0; font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
dd.sub, dd.src { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
dd.src { line-height: 1.3; }
dd.src span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.8rem 1rem;
}

/* Wind */
.wind {
  display: grid;
  grid-template-columns: minmax(13rem, 23.5rem) minmax(10rem, 1fr);
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.dial-wrap { display: flex; align-items: stretch; gap: 0.6rem; min-width: 0; }
.dial { margin: 0; flex: 1 1 auto; min-width: 0; }

/* Beaufort bar chart left of the dial: one row per force, bar length grows with it */
.bft-scale {
  --live-w: 2.6rem;  /* live-wind gauge column left of the numbers */
  --live-bar: 0.6rem; /* width of the live-wind bar itself */
  flex: 0 0 calc(3rem + var(--live-w));
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-block: 0.35rem 0;
}
.bft-body { flex: 1 1 auto; display: flex; min-height: 0; }
.bft-scale ol {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column-reverse; /* 0 at the bottom, 12 on top */
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bft-scale li {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  --c: var(--bft-0);
}
.bft-scale .n {
  flex: 0 0 1.05rem;
  text-align: right;
  font-size: 0.65rem;
  line-height: 1;
  color: var(--muted);
}
.bft-scale .bar {
  align-self: stretch;
  width: calc(25% + 75% * var(--b) / 12);
  border-radius: 2px;
  background: var(--c);
  opacity: 0.22;
  transition: opacity 0.6s, background 0.6s;
}
.bft-scale li:nth-child(1) { --c: var(--bft-0); }
.bft-scale li:nth-child(2) { --c: var(--bft-1); }
.bft-scale li:nth-child(3) { --c: var(--bft-2); }
.bft-scale li:nth-child(4) { --c: var(--bft-3); }
.bft-scale li:nth-child(5) { --c: var(--bft-4); }
.bft-scale li:nth-child(6) { --c: var(--bft-5); }
.bft-scale li:nth-child(7) { --c: var(--bft-6); }
.bft-scale li:nth-child(8) { --c: var(--bft-7); }
.bft-scale li:nth-child(9) { --c: var(--bft-8); }
.bft-scale li:nth-child(10) { --c: var(--bft-9); }
.bft-scale li:nth-child(11) { --c: var(--bft-10); }
.bft-scale li:nth-child(12) { --c: var(--bft-11); }
.bft-scale li:nth-child(13) { --c: var(--bft-12); }
.bft-scale li.on .bar { opacity: 1; }
.bft-scale li.cur .n { color: var(--ink); font-weight: 700; font-size: 0.75rem; }
/* live wind in knots: a bar whose fill rises to the latest reading */
.bft-live {
  position: relative;
  flex: 0 0 var(--live-w);
  --h: 0%;
  --g: 0%;
  --gl: 0px;
}
.bft-live[hidden] { display: block; visibility: hidden; } /* keep the column so nothing shifts */
.bft-live::before, .bft-live .fill, .bft-live .gust {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 0;
  width: var(--live-bar);
  border-radius: 3px;
}
.bft-live::before { top: 0; background: var(--line); opacity: 0.6; }
.bft-live .fill { height: var(--h); background: var(--ink); transition: height 0.8s ease-out; }
/* gusts: the same bar continued up to the gust, in the gust colour (drawn under the live fill) */
.bft-live .gust { height: var(--g); background: var(--c-gust); visibility: hidden; transition: height 0.8s ease-out; }
.bft-live .gust::after { background: var(--c-gust); }
.bft-live .gval {
  position: absolute;
  right: calc(var(--live-bar) + 6px);
  bottom: var(--gl);
  transform: translateY(50%);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-gust);
  font-variant-numeric: tabular-nums;
  visibility: hidden;
  transition: bottom 0.8s ease-out;
}
.bft-live.has-gust .gust, .bft-live.has-gust .gval { visibility: visible; }
.bft-live .fill::after, .bft-live .gust::after { /* tick at the tip */
  content: "";
  position: absolute;
  top: 0;
  right: -3px;
  width: calc(var(--live-bar) + 6px);
  height: 3px;
  border-radius: 1.5px;
}
.bft-live .fill::after { background: var(--ink); }
.bft-live .val {
  position: absolute;
  right: calc(var(--live-bar) + 6px);
  bottom: var(--h);
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: bottom 0.8s ease-out;
}
.bft-live .val b { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.bft-scale figcaption {
  margin-top: 0.3rem;
  padding-left: calc(1.35rem + var(--live-w));
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.dial svg { display: block; width: 100%; height: auto; overflow: visible; }

.ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.sea-half { fill: color-mix(in srgb, var(--sea) 16%, transparent); }
.land-half { fill: color-mix(in srgb, var(--land) 22%, transparent); }
.beach { stroke: var(--sand); stroke-width: 7; }
.shore { stroke: var(--sea); stroke-width: 1.25; opacity: 0.7; }
.coast-label { fill: var(--muted); font: italic 500 10px var(--font); text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.04em; }
.tick { stroke: var(--muted); stroke-width: 1; }
.tick.major { stroke: var(--ink); stroke-width: 2; }
.cardinal { fill: var(--muted); font: 600 11px var(--font); text-anchor: middle; dominant-baseline: middle; }
.cardinal.n { fill: var(--ink); }
.range { fill: none; stroke: var(--sea); stroke-width: 9; stroke-linecap: round; opacity: 0.35; }
.vane { transform-box: view-box; transform-origin: 0 0; transition: transform 1.2s cubic-bezier(.3,.7,.3,1); }
.vane path { fill: var(--signal); }
.dial-dir { fill: var(--ink); font: 650 30px var(--font); text-anchor: middle; }
.dial-deg { fill: var(--muted); font: 500 12px var(--font); text-anchor: middle; }
/* halo so the centre text stays legible over the shoreline */
.dial-dir, .dial-deg, .coast-label { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }

.speed { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; line-height: 0.9; }
/* the 10-minute average is the page's headline value */
#w-avg { font-size: clamp(3.75rem, 7.5vw, 5.5rem); font-weight: 500; letter-spacing: -0.04em; }
.speed .unit { font-size: var(--step-1); color: var(--muted); }
.speed-note { margin: 0.3rem 0 0.4rem; color: var(--muted); font-size: 0.8rem; }
.bft { margin: 0 0 0.25rem; font-size: var(--step-0); }
.kite { margin: 0 0 0.7rem; font-size: var(--step--1); color: var(--muted); }
.kite b { color: var(--sea); font-weight: 650; }
.kite.warn b, .kite.warn { color: var(--warn); }
#w-bft { font-weight: 650; }
.wind-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.wind-list { gap: 0.5rem 0.75rem; }
.wind-list dt { font-size: var(--step-0); }
.wind-list dd { font-size: var(--step-2); white-space: nowrap; }
.wind-list dd.sub { font-size: var(--step--1); }
/* steadiness line under the wind figures; red with a warning sign when very unsteady */
.steady { margin: 0.6rem 0 0; font-size: var(--step--1); color: var(--muted); }
.steady b { color: var(--ink); font-weight: 650; margin-right: 0.3em; }
.steady .detail { display: block; }
.steady .detail span { display: block; }
.steady.warn, .steady.warn b { color: var(--warn); }
.gust-warn { display: none; width: 1em; height: 1em; margin-right: 0.35em; vertical-align: -0.15em; }
.steady.warn .gust-warn { display: inline-block; }
.gust-warn .tri { fill: var(--warn); stroke: var(--warn); stroke-width: 1.2; stroke-linejoin: round; }
.gust-warn .mark { stroke: var(--surface); stroke-width: 1.7; stroke-linecap: round; }

/* Now */
.now .grid { grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); }
dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forecast {
  margin: 0.8rem 0 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--sea);
  font-size: var(--step--1);
}

/* Today */
.today table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.today th, .today td {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: baseline;
}
.today tr:last-child th, .today tr:last-child td { border-bottom: 0; }
.today th { font-weight: 400; color: var(--muted); padding-right: 0.75rem; }
.today td { font-weight: 600; white-space: nowrap; }
.today td.time { color: var(--muted); font-weight: 400; text-align: right; padding-left: 0.75rem; }

/* Sun and moon */
.sky .grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.sky dd { font-size: var(--step-0); }

/* Sea */
.sea-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.sea-grid > div { position: relative; }
.sea-grid dt { display: flex; align-items: center; gap: 0.2rem; }
.sea-grid dt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (i) button next to each sea label; its popover names the RWS station and time */
.src-info {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.3rem 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.src-info svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.src-info[aria-expanded="true"] { color: var(--ink); }
.src-info.warn { color: var(--warn); }
.src-info:focus-visible { outline: 2px solid var(--sea); outline-offset: 1px; }
.sea-grid dd.src {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  line-height: 1.35;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s, visibility 0.12s;
}
.sea-grid dd.src span { white-space: normal; overflow: visible; }
/* the panel's explanation + sources, behind the (i) next to "Zee" */
.sea { position: relative; }
.sea h2 { display: flex; align-items: center; gap: 0.2rem; }
.sea h2 .src-info { letter-spacing: 0; }
.sea .sea-note {
  position: absolute;
  top: 2.3rem;
  left: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  max-width: 34rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  font-size: 0.8rem;
  line-height: 1.45;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s, visibility 0.12s;
}
.sea .sea-note #z-tij-src:not(:empty) { display: block; margin-bottom: 0.35rem; }
.sea-grid dd.src.open, .sea .sea-note.open,
.sea-grid div:has(.src-info:focus-visible) dd.src,
.sea:has(> h2 .src-info:focus-visible) .sea-note { visibility: visible; opacity: 1; }
@media (hover: hover) {
  .src-info:hover { color: var(--ink); }
  .sea-grid div:has(.src-info:hover) dd.src,
  .sea:has(> h2 .src-info:hover) .sea-note { visibility: visible; opacity: 1; }
}
.tide-now { font-weight: 400; color: var(--muted); }
/* sea state: wave icon before the term; red when short and steep */
.chop-icon { width: 1.6em; height: 1.07em; margin-right: 0.3em; vertical-align: -0.1em; fill: none; stroke: var(--sea);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chop-icon .cap { stroke-width: 1.2; }
.chop.warn dd:not(.sub):not(.src), .chop.warn .chop-icon, .chop dd.sub.against { color: var(--warn); stroke: var(--warn); }

.sea .chart-tide { margin: 1.25rem 0 0.5rem; }
.chart-tide .plot { height: 150px; }
.legend .key-measured::before { border-color: var(--c-gust); }
.series.measured { stroke: var(--c-gust); stroke-width: 2; }
.gridline.zero { stroke: var(--muted); stroke-dasharray: 2 3; }
.nowline { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.now-label { fill: var(--ink); font-weight: 600; }
.tide-dot { fill: var(--c-avg); stroke: var(--surface); stroke-width: 1.5; }
.end-label.mid { text-anchor: middle; }
.note { margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.4; }

.foot {
  padding-block: 0.8rem 1.2rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.foot p { margin: 0; }

/* Trend charts */
.trend-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.6rem;
}
.trend-head h2 { margin: 0; }

.periods {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--ground);
  border: 1px solid var(--line);
}
.periods button {
  font: inherit;
  font-size: var(--step--1);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
}
.periods button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.periods button:focus-visible {
  outline: 2px solid var(--c-avg);
  outline-offset: 2px;
}

.chart { margin: 0 0 0.9rem; }
.chart figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.2rem;
  font-size: var(--step--1);
}
.chart-title { font-weight: 600; }
.chart-title .muted { font-weight: 400; color: var(--muted); }

.legend { display: inline-flex; gap: 1rem; font-size: var(--step--1); color: var(--muted); }
.key::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 0;
  margin-right: 0.4rem;
  vertical-align: middle;
  border-top: 2px solid;
}
.key-avg::before { border-color: var(--c-avg); }
.key-gust::before { border-color: var(--c-gust); border-top-style: dashed; }

.plot { position: relative; }
.plot svg { display: block; width: 100%; overflow: visible; }
.plot svg { touch-action: pan-y; } /* sideways drag scrubs the tooltip, vertical still scrolls */
.chart-wind .plot { height: 224px; } /* 190 + the direction arrow row */
.chart-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
/* in the narrower "Weer" card the charts stack when two wouldn't fit (charts.js draws at least 280px wide) */
.now .chart-pair { margin-top: 1rem; gap: 0.9rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.now .chart-pair .chart { margin-bottom: 0; }
.chart-pair .plot { height: 120px; }

.gridline { stroke: var(--grid); stroke-width: 1; }
.axis-label { fill: var(--muted); font: 11px var(--font); }
.axis-label.end { text-anchor: end; }
.axis-label.mid { text-anchor: middle; }
.series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.series.avg { stroke: var(--c-avg); }
.series.gust { stroke: var(--c-gust); stroke-width: 1.5; stroke-dasharray: 5 3; }
.series.temp, .series.press { stroke: var(--c-avg); }
.area.avg, .area.temp, .area.press { fill: var(--c-avg); opacity: 0.12; }
.dir-arrow { fill: var(--ink); }
.dir-arrow.off { fill: var(--warn); }
.dir-calm { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.dir-label { font-size: 10px; }
.end-label { font: 600 11px var(--font); fill: var(--ink); }
.crosshair { stroke: var(--muted); stroke-width: 1; }
.hoverdot { stroke: var(--surface); stroke-width: 2; }
.hoverdot.avg, .hoverdot.temp, .hoverdot.press { fill: var(--c-avg); }
.hoverdot.gust { fill: var(--c-gust); }
/* wind chart only: the area carries the Beaufort colours (gradient set in charts.js),
   so the lines, hover dots and legend keys switch to ink */
.chart-wind .series.avg { stroke: var(--ink); }
.chart-wind .series.gust { stroke: var(--ink); opacity: 0.75; }
.chart-wind .area.avg { opacity: 0.75; }
.chart-wind .hoverdot.avg, .chart-wind .hoverdot.gust { fill: var(--ink); }
.chart-wind .key-avg::before { border-color: var(--ink); }
.chart-wind .key-gust::before { border-color: var(--ink); opacity: 0.75; }

.tip {
  position: absolute;
  top: 0;
  pointer-events: none;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--step--1);
  line-height: 1.35;
  white-space: nowrap;
  z-index: 1;
}
.tip b { font-weight: 600; }

.chart-empty { color: var(--muted); margin: 0 0 0.75rem; font-size: var(--step--1); }



/* Phones: the dial gets the full width, the figures go underneath in a row:
   headline speed on the left, gusts/latest on the right, steadiness below. */
@media (max-width: 40rem) {
  .wind { grid-template-columns: minmax(0, 1fr); }
  .wind-figures {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
  }
  .wind-figures > .speed { grid-area: 1 / 1; }
  .wind-figures > .speed-note { grid-area: 2 / 1; }
  .wind-figures > .bft { grid-area: 3 / 1; }
  .wind-figures > .kite { grid-area: 4 / 1; margin-bottom: 0; }
  .wind-list {
    grid-area: 1 / 2 / 5 / 3;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding: 0 0 0 1.25rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .steady { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
  .panel { padding: 0.75rem 0.85rem 0.85rem; }
  .chart-pair { gap: 0 0.75rem; }
  .chart-wind .plot { height: 184px; }
  .chart-tide .plot { height: 130px; }
}

/* ---------- motion ---------- */
/* wind streaks and swell on the dial (driven by motion.js) */
.streak { stroke: var(--streak); stroke-width: 1.3; stroke-linecap: round; }
.swell {
  fill: none;
  stroke: var(--sea);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0;
  animation: swell 7.5s cubic-bezier(.3,.5,.5,1) infinite;
  animation-delay: calc(var(--i) * -2.5s);
}
@keyframes swell {
  0%   { transform: translateY(-80px); opacity: 0; }
  25%  { opacity: 0.4; }
  85%  { opacity: 0.35; }
  100% { transform: translateY(-3px); opacity: 0; }
}

/* a value that just changed lights up in sea blue and settles */
#w-avg, #w-bft { display: inline-block; }
.bump { animation: bump 1.1s ease-out; }
@keyframes bump {
  0%   { color: var(--sea); transform: translateY(-2px); }
  100% { transform: none; }
}

/* panels rise in, one after another, when the page opens (or the sea panel appears) */
.panel { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) both; }
.panel:nth-child(2) { animation-delay: 70ms; }
.panel:nth-child(3) { animation-delay: 140ms; }
.panel:nth-child(4) { animation-delay: 210ms; }
.panel:nth-child(5) { animation-delay: 280ms; }
.panel:nth-child(6) { animation-delay: 350ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* "now" on the tide curve */
.tide-now-dot { fill: var(--c-avg); stroke: var(--surface); stroke-width: 2; }
.tide-now-ring {
  fill: none;
  stroke: var(--c-avg);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: ring 2.6s ease-out infinite;
}
@keyframes ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.4); opacity: 0; } }

.periods button { transition: background-color 0.25s, color 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .vane, .bft-scale .bar, .bft-live .fill, .bft-live .val, .bft-live .gust, .bft-live .gval { transition: none; }
  .status.live .dot.ping, .bump, .panel, .swell, .tide-now-ring { animation: none; }
  .swell, .tide-now-ring { display: none; }
}