.water-level-chart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.water-level-chart text { font: 10px "Segoe UI", system-ui, sans-serif; }
.water-chart-label { fill: var(--color-chart-label); }
.water-chart-grid { stroke: var(--color-chart-grid); stroke-width: 1; }
.water-chart-primary { fill: none; stroke: var(--color-chart-main); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.water-chart-restricted { stroke: var(--color-chart-passage); }
.water-chart-restricted.water-chart-sample { fill: var(--color-chart-passage); }
.water-chart-passage-limit { stroke: var(--color-chart-passage); stroke-width: 1.5; stroke-dasharray: 6 3; }
.water-chart-passage-label { fill: var(--color-chart-passage); paint-order: stroke; stroke: var(--color-chart-label-outline); stroke-width: 3px; stroke-linejoin: round; }
.phone-ui .phone-value.water-chart-reading-restricted, .water-chart-reading-restricted { color: var(--color-chart-passage); }
.water-chart-passage-summary { margin: .2rem 0 0; color: var(--color-chart-label-strong); font-size: .7rem; }
.water-chart-reference { fill: none; stroke: var(--color-chart-reference); stroke-width: 1; stroke-dasharray: 5 4; opacity: .65; }
.water-chart-sample { fill: var(--color-chart-main); stroke: none; }
.water-chart-now { stroke: var(--color-chart-now); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.water-chart-now-label, .water-chart-marker-label { fill: var(--color-chart-label-strong); }
.water-chart-marker { fill: var(--color-chart-marker-fill); stroke: var(--color-chart-marker-border); stroke-width: 1.5; }
.water-chart-cursor { stroke: var(--color-chart-cursor); stroke-width: 1; }
.water-chart-cursor-point { fill: var(--color-chart-cursor); stroke: var(--color-chart-cursor-border); stroke-width: 1.5; }
.phone-ui .water-chart-cursor { stroke-width: 2.5; }
.phone-ui .water-chart-cursor-point { r: 4; stroke-width: 2; }
.water-level-chart .water-chart-cursor-label { fill: var(--color-chart-cursor); font-weight: 700; paint-order: stroke; stroke: var(--color-chart-label-outline); stroke-width: 3px; stroke-linejoin: round; }
.water-chart-legend-primary::before, .water-chart-legend-reference::before { content: ""; display: inline-block; width: 1rem; margin-right: .25rem; vertical-align: middle; border-top: 2px solid var(--color-chart-main); }
.water-chart-legend-reference::before { border-top: 1px dashed var(--color-chart-reference); }
.phone-chart-range { display: none; }
.phone-tide-portrait .phone-chart-range { display: block; margin: 0; color: var(--color-chart-label); font-size: .65rem; }

/* One chart per station, in the existing desktop slot or the phone card. */
body:not(.phone-ui) .phone-tide-block > :not(.phone-graph):not(.phone-tide-footer) { display: none; }
body:not(.phone-ui) .phone-graph { margin-block: 1rem; }
body:not(.phone-ui) .phone-graph-surface { position: relative; height: 15rem; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; touch-action: pan-y; }
body:not(.phone-ui) .phone-graph-legend,
body:not(.phone-ui) .phone-tide-footer { color: var(--color-chart-label); font-size: .7rem; }
.phone-tide-landscape .phone-tide-footer { flex: 0 0 auto; font-size: .6rem; max-height: 3rem; overflow-y: auto; }

.water-level-trend { color: var(--color-chart-main); font-size: inherit; line-height: 1.2; font-weight: 600; }
.water-level-reading > .water-level-trend { font-size: 1.5rem; flex: 0 0 auto; }
.water-chart-next-passage { margin: .15rem 0 0; font-size: .7rem; color: var(--color-text-muted); }
@media (min-width: 44rem) and (min-height: 44rem) {
 body.desktop-ui:not(.phone-ui) .water-level-reading > .water-level-trend { font-size: clamp(1.5rem, 1.75vw, 2rem); }
}

.water-level-reading { display: inline-flex; align-items: baseline; gap: .3rem; max-width: 100%; min-width: 0; }
.water-level-reading > .phone-value { min-width: 0; }

/* Standalone extrema have no trend; retain the arrow's inline footprint. */
.water-level-trend[hidden][data-extreme="true"] { display: inline-block !important; visibility: hidden; }
.water-level-trend[hidden][data-extreme="true"]:empty::before { content: "↑"; }