.tide-detail-popup {
  --tide-surface: #102a3b;
  --tide-panel: #18384a;
  --tide-ink: #eef9fc;
  --tide-muted: #adcad4;
  --tide-accent: #79d9e5;
  --tide-border: #3a6171;
}
.tide-detail-popup,
.point-tide-disclosure {
  --tide-chart-bg: #102b3b;
  --tide-chart-grid: #456675;
  --tide-chart-axis: #bbd2da;
  --tide-chart-muted: #91b4bf;
  --tide-chart-line: #83e2e9;
  --tide-chart-zero: #95cdd5;
  --tide-chart-event-ink: #f1fbfd;
}
.map-shell.analysis-popup-open .leaflet-control-zoom { visibility: hidden; }
.tide-detail-popup .leaflet-popup-content-wrapper {
  overflow: hidden;
  border: 1px solid var(--tide-border);
  border-radius: 18px;
  background: var(--tide-surface);
  box-shadow: 0 20px 55px rgba(5, 20, 30, .27);
}
.tide-detail-popup .leaflet-popup-content {
  max-width: 900px;
  min-width: 0;
  margin: 0;
  overflow: auto;
}
.tide-detail-popup .leaflet-popup-tip { border-color: var(--tide-border); background: var(--tide-surface); }
.tide-detail-card { position: relative; padding: 19px 22px 17px; color: var(--tide-ink); background: var(--tide-surface); }
.tide-detail-close {
  position: absolute;
  top: 15px;
  right: 16px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--tide-border);
  border-radius: 50%;
  color: var(--tide-ink);
  background: var(--tide-panel);
  font: 700 20px/1 Arial, sans-serif;
  cursor: pointer;
}
.tide-detail-close:hover, .tide-detail-close:focus-visible { border-color: var(--tide-accent); outline: none; }
.tide-detail-header { padding-right: 40px; }
.tide-title-block span {
  color: var(--tide-accent);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tide-detail-header h2 { margin: 5px 0 4px; color: var(--tide-ink); font-size: 1.38rem; line-height: 1.18; }
.tide-detail-header p { margin: 0; color: var(--tide-muted); font-size: .8rem; }
.tide-detail-summary { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 11px 0 8px; border-top: 1px solid var(--tide-border); }
.tide-detail-summary > div { display: grid; gap: 2px; }
.tide-detail-summary small { color: var(--tide-muted); font-size: .75rem; font-weight: 750; }
.tide-detail-summary strong { color: var(--tide-ink); font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tide-detail-summary > span { padding: 5px 10px; border: 1px solid var(--tide-border); border-radius: 999px; color: var(--tide-accent); background: var(--tide-panel); font-size: .75rem; font-weight: 800; }
.tide-detail-caption { margin: 7px 0 9px; color: var(--tide-muted); font-size: .78rem; font-weight: 720; }
.tide-detail-popup .tide-chart { margin: 0; padding: 6px 8px 2px; border: 1px solid var(--tide-border); border-radius: 14px; background: var(--tide-chart-bg); }
.tide-detail-popup .tide-chart svg { cursor: crosshair; touch-action: none; }
.tide-detail-popup .point-tide-axis,
.tide-detail-popup .point-tide-annotation { font-size: 12px; }
.tide-detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.tide-detail-metrics > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--tide-border); border-radius: 10px; background: var(--tide-panel); }
.tide-detail-metrics span { color: var(--tide-muted); font-size: .67rem; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.tide-detail-metrics strong { color: var(--tide-ink); font-size: 1.05rem; }
.tide-detail-metrics small { color: var(--tide-muted); font-size: .71rem; line-height: 1.3; }
.tide-detail-source { margin: 12px 2px 0; color: var(--tide-muted); font-size: .7rem; line-height: 1.4; }
html[data-ui-theme="light"] .tide-detail-popup {
  --tide-surface: #fffefa;
  --tide-panel: #f2f8f7;
  --tide-ink: #17394b;
  --tide-muted: #587783;
  --tide-accent: #167f98;
  --tide-border: #cbdde0;
}
html[data-ui-theme="light"] .tide-detail-popup,
html[data-ui-theme="light"] .point-tide-disclosure {
  --tide-chart-bg: #fffefa;
  --tide-chart-grid: #d0e0e3;
  --tide-chart-axis: #506d79;
  --tide-chart-muted: #718e99;
  --tide-chart-line: #168aa5;
  --tide-chart-zero: #548d9a;
  --tide-chart-event-ink: #174255;
}
@media (max-width: 600px) {
  .tide-detail-popup .leaflet-popup-content { max-height: calc(100dvh - 74px) !important; }
  .tide-detail-card { padding: 15px 13px 13px; }
  .tide-detail-header h2 { font-size: 1.05rem; }
  .tide-detail-summary strong { font-size: 1.55rem; }
  .tide-detail-metrics { grid-template-columns: 1fr 1fr; }
  .tide-detail-metrics > div:last-child { grid-column: 1 / -1; }
}
/* Same point tide series in the Hs card, folded until requested. */
.point-tide-disclosure,
.point-tide-unavailable {
  margin-top: 7px;
  border: 1px solid #456b7b;
  border-radius: 13px;
  color: #edfaff;
  background: #173645;
}
.point-tide-disclosure summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 780;
  cursor: pointer;
  list-style: none;
}
.point-tide-disclosure summary::-webkit-details-marker { display: none; }
.point-tide-disclosure summary:focus-visible { outline: 2px solid #81ddec; outline-offset: 2px; border-radius: 12px; }
.point-tide-disclosure summary strong { font-size: inherit; font-weight: inherit; line-height: 1.1; }
.point-tide-chevron { color: #9ec7d4; font-size: 1.25rem; line-height: 1; text-align: center; transition: transform .2s ease; }
.point-tide-disclosure[open] .point-tide-chevron { transform: rotate(180deg); }
.point-tide-disclosure[open] summary { border-bottom: 1px solid #446778; }
.point-tide-body { padding: 13px 12px 14px; }
.point-tide-body > p { margin: 0 0 10px; color: #a8ceda; font-size: .79rem; font-weight: 720; }
.point-tide-chart { overflow: hidden; padding: 10px 5px 4px; border: 1px solid #315768; border-radius: 12px; background: var(--tide-chart-bg); }
.point-tide-chart:focus-visible { outline: 2px solid var(--tide-chart-line); outline-offset: 2px; }
.point-tide-chart svg { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.point-tide-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 11px 2px; color: var(--tide-chart-axis); font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.point-tide-readout small { color: var(--tide-chart-muted); font-size: .7rem; font-weight: 600; }
.point-tide-readout strong { color: var(--tide-chart-event-ink); font-size: 1.05rem; font-weight: 850; white-space: nowrap; }
.point-tide-grid { stroke: var(--tide-chart-grid); stroke-width: .8; stroke-dasharray: 3 5; }
.point-tide-zero { stroke: var(--tide-chart-zero); stroke-width: 1.8; stroke-dasharray: none; }
.point-tide-axis { fill: var(--tide-chart-axis); font: 700 11px "Avenir Next", Inter, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.point-tide-zero-label { fill: var(--tide-chart-event-ink); font-weight: 850; }
.point-tide-time { font-size: 12px; font-weight: 800; }
.point-tide-date { fill: var(--tide-chart-muted); font-size: 10px; font-weight: 650; }
.point-tide-area { fill: var(--tide-chart-line); fill-opacity: .09; }
.point-tide-line { fill: none; stroke: var(--tide-chart-line); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.point-tide-now-line { stroke: var(--tide-chart-zero); stroke-width: 1; stroke-dasharray: 3 6; opacity: .65; }
.point-tide-extreme { fill: var(--tide-chart-bg); stroke: var(--tide-chart-line); stroke-width: 2.3; }
.point-tide-annotation { fill: var(--tide-chart-event-ink); font: 800 10px "Avenir Next", Inter, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.point-tide-no-past { fill: var(--tide-chart-muted); font: 11px "Avenir Next", Inter, "Segoe UI", sans-serif; }
.point-tide-probe-line { stroke: var(--tide-chart-line); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .9; }
.point-tide-probe-dot { fill: var(--tide-chart-bg); stroke: var(--tide-chart-line); stroke-width: 3; }
.point-tide-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.point-tide-events > span { display: grid; gap: 2px; padding: 8px; border: 1px solid #315768; border-radius: 8px; background: #103040; }
.point-tide-events b { color: #a8ceda; font-size: .73rem; font-weight: 780; }
.point-tide-events strong { color: #f3fdff; font-size: .92rem; }
.point-tide-events small { color: #a8ceda; font-size: .72rem; }
.point-tide-missing { display: block; margin-top: 9px; color: #9dbdc8; font-size: .72rem; line-height: 1.4; }
.point-tide-missing { color: #e5c783; }
.point-tide-unavailable { display: flex; align-items: center; min-height: 42px; padding: 7px 11px; color: #a8ceda; font-size: .86rem; font-weight: 780; }
html[data-ui-theme="light"] .point-tide-disclosure,
html[data-ui-theme="light"] .point-tide-unavailable { border-color: #ccdcdf; color: #163849; background: #f1f8f7; }
html[data-ui-theme="light"] .point-tide-disclosure[open] summary { border-bottom-color: #d8e5e7; }
html[data-ui-theme="light"] .point-tide-body > p,
html[data-ui-theme="light"] .point-tide-events b,
html[data-ui-theme="light"] .point-tide-events small,
html[data-ui-theme="light"] .point-tide-chevron { color: #457886; }
html[data-ui-theme="light"] .point-tide-chart { border-color: #d7e5e7; }
html[data-ui-theme="light"] .point-tide-area { fill-opacity: .16; }
html[data-ui-theme="light"] .point-tide-events > span { border-color: #d7e5e7; background: #fffefa; }
html[data-ui-theme="light"] .point-tide-events strong { color: #173b4b; }
html[data-ui-theme="light"] .point-tide-missing { color: #946b1c; }