.tide-heading, .tide-controls, .tide-key, .tide-slider-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.tide-heading, .tide-slider-label { justify-content: space-between; }
.tide-heading h2 { font: 600 21px 'Space Grotesk', Inter, sans-serif; }
.tide-controls label, .tide-slider-label { font-size: 13px; color: var(--ink2); }
.tide-controls select {
  color-scheme: dark;
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--ink);
  border-radius: 8px;
  min-height: 44px;
  font: inherit;
  padding: 0 8px;
}
.tide-controls button { min-height: 44px; }
.tide-measurements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.tide-measurements strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#tide-height { color: var(--link); }
#tide-hour { width: 100%; margin: -8px 0; min-height: 44px; accent-color: var(--link); }
.tide-controls :focus-visible, #tide-hour:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.tide-key { gap: 14px; color: var(--muted); font-size: 12px; }
.tide-key i { display: inline-block; width: 16px; vertical-align: .25em; }
.tide-cursor-key { border-top: 2px solid var(--link); }
.tide-now-key { border-top: 2px dashed var(--ink); }
.tide-slider-label span { color: var(--muted); }
#tide-datum { font-size: 12px; }

.chart canvas[tabindex] { touch-action: pan-y; }
.chart canvas[tabindex]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.chart-selection { min-height: 2.8em; font-variant-numeric: tabular-nums; }
#tide-replay:disabled { cursor: default; opacity: .7; }

.tide-help summary { color:var(--link); cursor:pointer; }
.tide-help p { max-width:68ch; margin:.5em 0; }

#tide-reference-control:not([hidden]) { display:inline-flex; align-items:center; gap:6px; cursor:pointer; min-height:44px; }
#tide-reference { width:1.2rem; height:1.2rem; accent-color:var(--link); }