/* ========================================================= */
/* Tides Station                                               */
/* tides.css                                                   */
/* PRODUCTION — see tides.js header for data/architecture note */
/* ========================================================= */

/* Tides-local aliases to the shell tokens — same pattern
   weather.css, solar.css, and time.css use under their own station
   ids. Only the subset Tides' own rules actually reference. */
#tides-station{
    --soft:var(--soft-text);
    --glass-primary:var(--glass);
    --border-soft:var(--glass-border);
    --r-lg:var(--radius-large);
    --transition:var(--transition-fast);
    --ultra-t2:var(--text);
    --ultra-t3:var(--soft-text);
    --ultra-border:var(--glass-border);
    /* Card width — matches #weather-station / #solar-station /
       #time-station exactly. Kept local for now, same as Solar's
       and Time's own note: revisit once more stations exist and
       this proves out as the standard everywhere. */
    width:100%;
    max-width:656px;
    padding:0 clamp(10px,3vw,18px);
    margin-left:auto;
    margin-right:auto;
}

/* ── Tides' own identity — blue-family palette, distinct from
   Solar's gold/blue treatment and Time's gold-family treatment ──
   --tides-low-accent is a muted sand/dune tone, distinct from the
   app's gold branding and from the existing blue used for High.
   Direction (rising/falling) is shown via arrow rotation + label as
   before, and — as of this polish pass — also via color throughout
   the Current Tide / Upcoming Tides dashboard (see --tides-rising-
   accent below): blue for rising, sand for falling. The descriptive
   word itself ("Rising"/"Falling") stays neutral/unchanged. */
#tides-station{
    --tides-border:#3F93E8;
    --tides-label:#7BC4FF;
    --tides-accent:#8FD3FF;
    --tides-low-accent:#D1BD8C;
    /* --tides-caret-blue: a bright, saturated blue reserved for the
       location dropdown's caret affordance only — distinct from the
       station's soft --tides-accent so the "this opens a dropdown"
       signal reads clearly at a glance, on both the collapsed
       trigger and the interior Location row. */
    --tides-caret-blue:#2F8FFF;
    /* --tides-rising-accent: a deepened, more saturated version of
       --tides-accent used only inside the Current Tide / Upcoming
       Tides dashboard, where color now also communicates direction
       (rising vs. falling) — the extra saturation keeps rising rows
       readable against the background at this larger sizing. Falling
       rows reuse the existing --tides-low-accent sand tone. */
    --tides-rising-accent:#3FA6FF;
}

/* ── Tides Utility Bar — collapsed lens ── */
/* Same padding/border/radius/transition geometry as
   .solar-utility-bar / .time-utility-bar. Three-column layout —
   Today's High/Low, center icon + location, Next High/Low — same
   spacing philosophy as Solar's/Time's own multi-column lenses. */
.tides-utility-bar{position:relative;width:100%;background:var(--glass-primary);border:1.5px solid rgba(63,147,232,0.60);border-radius:var(--r-lg);padding:4px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background var(--transition)}
.tides-utility-bar:hover{background:var(--glass-primary)}
/* .tides-utility-bar is a role="button" div, not a native <button>;
   tides.js adds Enter/Space keyboard handling to compensate. */
.tides-utility-bar:focus-visible{outline:2px solid var(--tides-accent);outline-offset:2px}

/* Center column — owns the icon, its glow, and the reserved
   marine-summary area beneath it. The caret is not nested here; it's
   a direct child of .tides-utility-bar (see #tides-sky-caret below),
   matching Moon's .moon-bar-caret / .moon-bar-content sibling
   relationship. Vertical padding matches Time's exactly so all
   collapsed lenses read as the same size side by side. Horizontal
   padding is new: it eats into the space-between gap on both sides,
   pulling Today/Next in toward center without touching column
   widths, station width, or the layout model itself. */
/* .tides-utility-center is a plain div — the icon and the
   marine-summary area beneath it are both non-interactive; clicks on
   either bubble up to #tides-bar like anywhere else on the collapsed
   shell. Location has no collapsed-shell presentation any more — it
   lives only in the expanded panel's Location row (see tides.html's
   own note on this). */
.tides-utility-center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 9px 16px;flex:0 0 auto;min-width:0}
.tides-utility-center::before{content:'';position:absolute;width:56px;height:56px;border-radius:50%;background:rgba(185,232,255,.14);filter:blur(10px);top:50%;left:50%;transform:translate(-50%,-60%);pointer-events:none;z-index:0}
.tides-icon{display:block;width:58px;height:58px;position:relative;z-index:1}

/* Marine-summary hook — reserved for a future pass to populate with
   live Wind/Waves data (e.g. "Wind WSW 12 kt · Waves 1.8 ft"). Empty
   for now; the :not(:empty) rule below is what keeps it from leaving
   an awkward blank row while there's no content — a plain text write
   into this same div is all the next pass needs, no markup rework. */
#tides-marine-summary{position:relative;z-index:1;margin-top:5px;max-width:220px;font-size:13px;font-weight:600;line-height:1.25;color:var(--ultra-t2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Large bright blue downward caret — used on the interior Location
   row only now that the collapsed shell no longer shows a location
   trigger. Not the Station's own expand caret (#tides-sky-caret),
   which is unrelated. */
.tides-location-caret{display:inline;line-height:1;color:var(--tides-caret-blue);flex-shrink:0}
.tides-location-row .tides-location-caret{font-size:14px}

/* ── Today / Next columns ──
   Same column geometry on both sides so the center (icon +
   location) stays visually anchored regardless of value string
   length. Fixed basis, no grow/shrink fight with the center column.
   High and Low sit side by side inside each column (.tides-stat-row)
   rather than stacked, using the breathing room already reserved by
   the station's existing 580px max-width. */
.tides-col{position:relative;z-index:1;flex:0 0 160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 0 16px}
.tides-col-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tides-label)}
.tides-stat-row{display:flex;flex-direction:row;justify-content:center;gap:8px}
/* Each stat's min-width is sized to the longest realistic strings
   this Station will render: a time like "12:59 PM" and a height
   like "+52.5 ft" (covers extreme-range CHS stations, e.g. Bay of
   Fundy, converted to feet) — not just the common case. */
.tides-stat{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:74px}
.tides-stat-label{font-size:11px;font-weight:500;color:var(--ultra-t3);letter-spacing:.02em}
.tides-stat-time{font-size:14px;font-weight:500;line-height:1.2;color:var(--ultra-t2)}
.tides-stat-value{font-size:14px;font-weight:500;color:var(--tides-accent)}

/* ── Loading / error states ──
   Degrade in place: numbers/time collapse to the placeholder glyph
   tides.js writes ("–"), and everything mutes to the soft token so
   the bar visually recedes instead of looking broken. No new
   iconography, no spinner — consistent with this Station's existing
   restraint. */
#tides-station.tides-state-loading .tides-stat-time,
#tides-station.tides-state-loading .tides-stat-value,
#tides-station.tides-state-error .tides-stat-time,
#tides-station.tides-state-error .tides-stat-value{color:var(--ultra-t3)}

/* Center caret — direct child of .tides-utility-bar (the station
   shell), not nested inside .tides-utility-center. */
#tides-sky-caret{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:5}
#tides-sky-caret .expand-icon{transition:transform var(--transition)}
#tides-sky-caret.open .expand-icon{transform:rotate(180deg)}

/* ── Tides Expand Panel ── */
/* Identical geometry to .solar-expand-panel / .time-expand-panel:
   same border, same radius, same background, same open/close
   mechanics (display toggle via .open, no separate animation —
   matches Solar and Time exactly). */
.tides-expand-panel{position:relative;display:none;border:1px solid var(--border-soft);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--glass-primary)}
.tides-expand-panel.open{display:block}
.tides-expand-panel .expand-inner{padding:16px 16px 16px;min-height:1px}

/* Close button — upper-right corner of the expand panel. Explicit
   close affordance alongside the existing toggle-by-clicking-the-bar
   behavior; clicking it always closes (never toggles), same as any
   other panel-level close control. */
.tides-expand-close-btn{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:none;border:0;border-radius:50%;color:var(--ultra-t3);cursor:pointer;transition:background var(--transition),color var(--transition)}
.tides-expand-close-btn:hover{background:var(--glass-hover);color:var(--ultra-t2)}
.tides-expand-close-btn:focus-visible{outline:2px solid var(--tides-accent);outline-offset:1px}

/* ── Expand Panel — section chassis ──
   .tides-section is the outer wrapper class for each expand-panel
   block (the merged Current Tide/Upcoming Tides dashboard card, and
   now the 7-Day Outlook; a future King Tides section would be
   another sibling). .tides-section-title was removed once when
   Current Tide/Upcoming Tides merged into one card with its own
   .tides-dashboard-half-title labels — it's back now that a section
   without that two-column split (7-Day Outlook) needs its own
   top-level label again. Same look as .tides-dashboard-half-title,
   intentionally, for visual consistency across the Station. */
.tides-section + .tides-section{margin-top:20px}
.tides-section-title{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tides-label);margin-bottom:10px}

/* 7-Day disclosure control — full-width outlined pill so the whole
   header reads as one tappable control, not a bare section heading.
   Border/background reuse .tides-utility-bar's own exact values (the
   station's established blue pill treatment); radius reuses
   --radius-medium, the same token .tides-dashboard-card/.tides-week-
   card already use for compact controls
   (deliberately smaller than --r-lg, which is reserved for the full
   station shell/panel). Padding (10px 14px) has no single existing
   full-width single-line pill to copy verbatim, so it's set in the
   same modest range as this Station's other compact controls
   (.tides-marine-view-btn's 6px 18px, .tides-utility-bar's 4px 16px).
   The button remains the entire, sole tap target — title left-
   aligned, indicator right-aligned via the same justify-content:
   space-between already in place. */
.tides-section-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--glass-primary);border:1.5px solid rgba(63,147,232,0.60);border-radius:var(--radius-medium);padding:10px 14px;margin-bottom:10px;font-family:inherit;cursor:pointer;text-align:left;box-sizing:border-box}
.tides-section-toggle:focus-visible{outline:2px solid var(--tides-accent);outline-offset:2px}
body.ultra-mode .tides-section-toggle{border-color:var(--ultra-border)}

/* State indicator — closed shows the caret, open swaps to an X (same
   stroke/shape language as .tides-expand-close-btn's own icon, sized
   down for this smaller control). Indicator only reflects state; it
   carries no listener of its own, the pill's own click handler is
   the only behavior. Kept in --tides-caret-blue in both states so the
   indicator reads as one consistent element rather than changing
   color when it swaps. */
.tides-section-toggle-caret{display:inline-block;font-size:14px;color:var(--tides-caret-blue);flex-shrink:0}
.tides-section-toggle-close-icon{display:none;color:var(--tides-caret-blue);flex-shrink:0}
.tides-section-toggle[aria-expanded="true"] .tides-section-toggle-caret{display:none}
.tides-section-toggle[aria-expanded="true"] .tides-section-toggle-close-icon{display:inline-block}

/* ── Interior Location row ──
   Sits above the Current Tide / Upcoming Tides dashboard, inside the
   expand panel. Toggles the exact same dropdown the collapsed bar's
   icon+location does — see toggleTidesLocationSelector() in
   tides.js, called from both. Visual weight kept modest (not a
   headline element) since it's a control, not data. */
.tides-location-row{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:0;border-radius:6px;padding:4px 34px 4px 2px;margin-bottom:8px;font-family:inherit;cursor:pointer;color:var(--ultra-t2);transition:background var(--transition)}
.tides-location-row:hover{background:var(--glass-hover)}
.tides-location-row:focus-visible{outline:2px solid var(--tides-accent);outline-offset:2px}
.tides-location-row-icon{display:flex;color:var(--tides-label);flex-shrink:0}
.tides-location-row-label{min-width:0;text-align:left;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Coordinate readout beside the (now more prominent) Location label —
   4-decimal N/S/E/W, populated by tides.js's setLocationCoords(). */
.tides-location-row-coords{flex-shrink:0;font-size:11px;font-weight:600;color:var(--ultra-t3);white-space:nowrap}
.tides-location-row-coords:empty{display:none}

/* ── Tide dashboard card ──
   Current Tide and Upcoming Tides merged into one shared bordered
   card, side by side, per Station direction: this should read as one
   dashboard, not stacked separate cards. No overall card title — the
   Station header already provides context; the card begins directly
   with its two section labels. */
.tides-dashboard-card{border:1px solid var(--glass-border-strong);border-radius:var(--radius-medium);padding:18px;display:flex;align-items:stretch;gap:16px}
body.ultra-mode .tides-dashboard-card{border-color:var(--ultra-border)}

.tides-dashboard-half{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.tides-dashboard-half-title{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tides-label);margin-bottom:10px}

/* Floating divider — visual reference to Weather's own
   .condition-tile-split-divider (same "doesn't touch top/bottom"
   shape), stronger per direction: 2px vs. Weather's 1px, 65% height
   vs. Weather's 60%, same border-strong color token. */
.tides-dashboard-divider{flex:0 0 auto;align-self:center;width:2px;height:65%;background:var(--glass-border-strong)}
body.ultra-mode .tides-dashboard-divider{background:var(--ultra-border)}

/* Current Tide half — direction icon, label, height, then time-
   until-next below. No progress bar or percentage (removed per
   Station direction); the underlying progress-percent computation
   in tides.js is untouched, it's simply no longer rendered. Arrow
   rotation remains the rising/falling signal, now reinforced by
   color on the arrow and height (see .tides-current-direction-icon
   and .tides-current-height below). */
.tides-current-body{display:flex;align-items:center;gap:12px;margin-bottom:10px}
/* Arrow — sized up per Station direction; color now communicates
   tide direction (deepened blue = rising, sand = falling), on both
   the ring and the glyph. The descriptive word beside it (below)
   stays neutral/unchanged, per direction. */
.tides-current-direction-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--tides-rising-accent);color:var(--tides-rising-accent);flex-shrink:0;transition:transform var(--transition),color var(--transition),border-color var(--transition)}
.tides-current-direction-icon svg{width:28px;height:28px}
.tides-current-direction-icon.falling{transform:rotate(180deg);color:var(--tides-low-accent);border-color:var(--tides-low-accent)}
.tides-current-info{display:flex;flex-direction:column;gap:2px;min-width:0}
/* The descriptive word ("Rising"/"Falling") — left unchanged in
   both size and color per Station direction. */
.tides-current-direction-label{font-size:14px;font-weight:700;color:var(--ultra-t2);line-height:1.1}
.tides-current-height{font-size:13px;font-weight:700;color:var(--tides-rising-accent);transition:color var(--transition)}
.tides-current-height.falling{color:var(--tides-low-accent)}
.tides-current-next-in{font-size:13px;font-weight:500;color:var(--ultra-t3)}

/* Upcoming Tides half — same list markup/JS pattern as before,
   re-parented into the right half of the shared card. Sizing bumped
   up per Station direction; color now runs through the whole row
   (arrow + time + height) to communicate direction, not just the
   height value as before — tides.js applies the same .tides-upcoming-
   high/.tides-upcoming-low class to both the time and value elements
   now, so a single pair of rules colors both. */
.tides-upcoming-list{display:flex;flex-direction:column;gap:2px}
.tides-upcoming-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--glass-border-strong)}
.tides-upcoming-row:last-child{border-bottom:none}
.tides-upcoming-icon{display:flex;color:var(--tides-rising-accent);flex-shrink:0;transition:transform var(--transition),color var(--transition)}
.tides-upcoming-icon svg{width:18px;height:18px}
.tides-upcoming-icon.falling{transform:rotate(180deg);color:var(--tides-low-accent)}
.tides-upcoming-time{font-size:13px;font-weight:600;color:var(--ultra-t2);flex:1}
.tides-upcoming-value{font-size:13px;font-weight:500}
.tides-upcoming-high{color:var(--tides-rising-accent)}
.tides-upcoming-low{color:var(--tides-low-accent)}

/* ── 7-Day Tide Outlook ──
   Seven day-cards in a horizontally scrollable row (not a redesign
   into a grid/wrap layout — a simple scroll is the smallest way to
   keep 7 fixed-width cards usable at narrow widths without changing
   the "one row per day" shape the mockup specified). Cards, colors,
   and icon language all reuse tokens already established elsewhere
   in this Station — Tides blue for High, the muted-sand token for
   Low, the same up/down arrow rotation Current Tide and Upcoming
   Tides already use. No new colors. */
.tides-week-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}

/* The native scrollbar is hidden — #tides-week-slider below is now
   the visible, premium drag control for this strip. The grid stays
   natively scrollable underneath (so trackpad/touch swipe still
   works, and the slider stays in sync with it either way — see
   wireWeekSlider() in tides.js), it's just not drawing its own
   scrollbar chrome any more. */
.tides-week-grid::-webkit-scrollbar{display:none}

/* Custom pill-handle slider — the track shows scroll progress as a
   solid blue fill (.tides-week-slider-fill); the handle itself uses
   the same neutral glass treatment as the Previous/Next week-nav
   buttons, so blue reads purely as "position," not as a third accent
   color competing with High/Low. Purely a scroll-position control;
   it has no state of its own. */
.tides-week-slider{width:100%;padding:8px 3px 0;box-sizing:border-box}
.tides-week-slider-track{position:relative;width:100%;height:6px;border-radius:999px;background:rgba(0,0,0,0.35);overflow:hidden}
body.ultra-mode .tides-week-slider-track{background:rgba(255,255,255,0.06)}
.tides-week-slider-fill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--tides-rising-accent);border-radius:999px;pointer-events:none}
.tides-week-slider-handle{position:absolute;top:50%;left:0;transform:translate(0,-50%);width:40px;height:22px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid var(--glass-border-strong);display:flex;align-items:center;justify-content:center;color:var(--ultra-t2);cursor:grab;touch-action:none;transition:background var(--transition)}
body.ultra-mode .tides-week-slider-handle{border-color:var(--ultra-border)}
.tides-week-slider-handle:hover{background:var(--glass-hover)}
.tides-week-slider-handle:active{cursor:grabbing;background:var(--glass-border-strong)}
.tides-week-slider-handle-icon{pointer-events:none}
.tides-week-slider:focus-visible .tides-week-slider-handle{outline:2px solid var(--tides-caret-blue);outline-offset:2px}
/* Disabled state — applied when there's nothing to scroll (content
   narrower than the strip, e.g. very wide viewports); the handle
   fills the track and stops accepting drags rather than jittering
   at zero. */
.tides-week-slider.tides-week-slider-disabled .tides-week-slider-handle{cursor:default;opacity:.5}

.tides-week-card{flex:0 0 auto;width:144px;border:1px solid var(--glass-border-strong);border-radius:var(--radius-medium);padding:12px;display:flex;flex-direction:column;gap:10px}
body.ultra-mode .tides-week-card{border-color:var(--ultra-border)}

.tides-week-card-day{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--tides-label)}
.tides-week-card-date{font-size:11px;font-weight:600;color:var(--ultra-t3);margin-top:-4px}

.tides-week-card-stat{display:flex;align-items:center;gap:5px}
.tides-week-card-icon{display:flex;color:var(--ultra-t3);flex-shrink:0;transition:transform var(--transition)}
.tides-week-card-icon.falling{transform:rotate(180deg)}
.tides-week-card-time{font-size:13px;font-weight:600;color:var(--ultra-t2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tides-week-card-value{font-size:13px;font-weight:500;white-space:nowrap}
.tides-week-high{color:var(--tides-accent)}
.tides-week-low{color:var(--tides-low-accent)}

.tides-week-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.tides-week-nav-btn{appearance:none;border:1px solid var(--glass-border-strong);background:rgba(255,255,255,0.04);color:var(--ultra-t2);width:34px;height:34px;border-radius:8px;font-size:13px;line-height:1;cursor:pointer;transition:background var(--transition);display:flex;align-items:center;justify-content:center}
.tides-week-nav-btn:hover:not(:disabled){background:var(--glass-hover)}
.tides-week-nav-btn:disabled{opacity:.35;cursor:not-allowed}
body.ultra-mode .tides-week-nav-btn{border-color:var(--ultra-border)}
.tides-week-range-label{font-size:13px;font-weight:700;color:var(--ultra-t2);min-width:170px;text-align:center}

/* ── Data source line ──
   Small, muted, deliberately low-emphasis — the resolved station
   name is an implementation detail, not something the primary UI
   should draw attention to (see tides.js header note). */
.tides-data-source{margin-top:14px;font-size:10px;font-weight:400;color:var(--ultra-t3);text-align:center;opacity:.75}

/* ── Marine Conditions ──
   Requires an explicitly selected Location (see tides.js's
   getSelectedTidesLocation()/setMarineActive()) — with none selected,
   only .tides-marine-no-location shows; #tides-marine-active (intro
   copy, legend, both report cards, map) stays hidden and the Leaflet
   map never initializes. Once active: centered intro + legend, two
   independent report cards (Local red accent / Wave blue accent, no
   red section outline — color lives only in the small dot/title),
   then the map. */
.tides-marine-no-location{font-size:13px;color:var(--ultra-t3);text-align:center;padding:22px 12px}

.tides-marine-disclosure{font-size:13px;color:var(--ultra-t3);line-height:1.4;text-align:center;margin-bottom:8px}

.tides-marine-freshness-note{font-size:12px;font-style:italic;color:var(--ultra-t3);line-height:1.4;text-align:center;margin-bottom:12px;opacity:.75}

.tides-marine-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:600;color:var(--ultra-t3);margin-bottom:12px}
.tides-marine-legend-item{display:inline-flex;align-items:center;gap:5px}
.tides-marine-legend-sep{opacity:.5}
.tides-marine-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tides-marine-legend-dot-location{background:#2ECC71}
.tides-marine-legend-dot-station{background:#D64545}
.tides-marine-legend-dot-wave{background:#1B4F9C}
.tides-marine-legend-dot-saved{background:#F5A623}

/* Compact, no red outline — border stays the neutral glass tone on
   both sections; the Local/Wave color distinction lives only in the
   rail's small dot + title accent below. */
.tides-marine-report-card{border:1px solid var(--glass-border-strong);border-radius:var(--radius-medium);background:rgba(10,14,22,.55);padding:10px 14px}
body.ultra-mode .tides-marine-report-card{border-color:var(--ultra-border);background:rgba(0,0,0,.5)}

.tides-marine-report-divider{height:1px;background:var(--tides-accent);opacity:.35;margin:10px 0}
#tides-marine-wave{margin-bottom:12px}

/* Rail: dot + title, station id + mileage, Lock — one horizontal row
   where width allows, wrapping on narrow viewports rather than
   truncating the station text. */
.tides-marine-report-rail{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tides-marine-report-rail-title{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ultra-t2);white-space:nowrap;flex-shrink:0}
.tides-marine-report-rail-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tides-marine-report-rail-dot-local{background:#D64545}
.tides-marine-report-rail-dot-wave{background:#1B4F9C}
.tides-marine-report-rail-station{flex:1 1 auto;min-width:0;font-size:12px;font-weight:600;color:var(--ultra-t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tides-marine-lock-pill{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;font-size:12px;font-weight:600;color:var(--ultra-t3);user-select:none}
.tides-marine-lock-toggle-wrap{position:relative;display:inline-block;width:30px;height:17px;flex-shrink:0}
.tides-marine-lock-toggle{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tides-marine-lock-toggle-track{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,0.12);border:1px solid var(--glass-border-strong);transition:background var(--transition)}
.tides-marine-lock-toggle-track::before{content:"";position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;background:var(--ultra-t2);transition:transform var(--transition),background var(--transition)}
.tides-marine-lock-toggle:checked + .tides-marine-lock-toggle-track{background:var(--tides-accent);border-color:var(--tides-accent)}
.tides-marine-lock-toggle:checked + .tides-marine-lock-toggle-track::before{transform:translateX(13px);background:#05070A}

/* 4 columns on desktop, as many compact rows as the station's
   available fields require — no maximum row count. */
.tides-marine-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 8px;margin-top:8px}
.tides-marine-report-grid:empty{margin-top:0}
.tides-marine-report-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.tides-marine-report-cell-label{font-size:12px;font-weight:600;color:var(--ultra-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tides-marine-report-cell-value{font-size:15px;font-weight:700;color:var(--ultra-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tides-marine-map-container{position:relative;width:100%;border:1px solid var(--glass-border-strong);border-radius:var(--radius-medium);overflow:hidden;height:min(62vh,520px);margin-top:12px}
body.ultra-mode .tides-marine-map-container{border-color:var(--ultra-border)}
.tides-marine-map{position:absolute;inset:0;background:#0A0E16}
.tides-marine-map-loading,.tides-marine-map-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--ultra-t3);background:rgba(10,14,22,.75);z-index:500;pointer-events:none}
.tides-marine-map-error{color:#E67E7E}
.tides-marine-map-loading[hidden],.tides-marine-map-error[hidden]{display:none!important}
.tides-marine-map-container .leaflet-control-attribution{background:rgba(10,14,22,.75);color:var(--ultra-t3);font-size:10px}
.tides-marine-map-container .leaflet-control-attribution a{color:var(--ultra-t2)}
.tides-marine-map-container .leaflet-control-zoom a{background:rgba(10,14,22,.85);color:var(--ultra-t2);border-color:var(--glass-border-strong)}
.tides-marine-map-container .leaflet-control-zoom a:hover{background:var(--glass-hover)}

/* Marker colors — green = selected Location, red = reporting station,
   blue = a station currently reporting Wave Data (wvht/dpd/apd — see
   ndbcRowIsWave() in tides.js). Leaflet's own marker/popup chrome
   comes from the CDN stylesheet; only fill color is overridden here
   via divIcon classes. .marine-marker-hit is the invisible ~36px
   touch/mouse target wrapping each station marker's dot — the dot
   itself keeps its existing visible size. */
.marine-marker-hit{width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.marine-marker-station{background:#D64545;border:2px solid #fff;border-radius:50%;width:12px;height:12px}
.marine-marker-wave{background:#1B4F9C}
.marine-marker-saved{background:#F5A623}
.marine-marker-tides-location{background:#2ECC71;border:2px solid #fff;border-radius:50%;width:14px;height:14px}
.marine-marker-label{font-size:10px;font-weight:700;color:var(--text);background:var(--glass-primary);padding:1px 4px;border-radius:4px;white-space:nowrap}

/* Modest instructional text — not a heading, not a button — shown
   between the Location row and its action buttons whenever no valid
   Location is selected; hidden entirely once one is (see
   setLocationRequiredPrompt() in tides.js). */
.tides-location-required-prompt{font-size:12px;font-weight:500;color:var(--ultra-t3);text-align:center;margin-top:2px;margin-bottom:8px}

/* ── Tides location action row — Use Weather Location / Keep Location ── */
.tides-location-action-row{display:flex;gap:8px;margin-top:10px}
.tides-location-action-pill{flex:1 1 0;appearance:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--glass-border-strong);background:var(--glass-hover);color:var(--ultra-t2);border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;padding:9px 14px;cursor:pointer;text-align:center}
.tides-keep-toggle-wrap{position:relative;flex:0 0 auto;display:inline-block;width:34px;height:20px}
.tides-keep-toggle{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tides-keep-toggle-track{position:absolute;inset:0;border-radius:10px;background:rgba(255,255,255,0.12);border:1px solid var(--glass-border-strong)}
.tides-keep-toggle-track::before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ultra-t2);transition:transform var(--transition),background var(--transition)}
.tides-keep-toggle:checked + .tides-keep-toggle-track{background:var(--tides-accent);border-color:var(--tides-accent)}
.tides-keep-toggle:checked + .tides-keep-toggle-track::before{transform:translateX(14px);background:#05070A}
.tides-keep-location-pill-label{font-size:13px;font-weight:600;color:var(--ultra-t2)}


/* Current Tide / Upcoming Tides degrade the same way the rest of the
   Station does — same state classes on #tides-station, same muted
   treatment as the collapsed bar's own loading/error states. */
#tides-station.tides-state-loading .tides-current-height,
#tides-station.tides-state-loading .tides-current-next-in,
#tides-station.tides-state-loading .tides-upcoming-value,
#tides-station.tides-state-error .tides-current-height,
#tides-station.tides-state-error .tides-current-next-in,
#tides-station.tides-state-error .tides-upcoming-value{color:var(--ultra-t3)}

/* ── Location dropdown ──
   Deliberately minimal — an inline input + OK button beneath the
   location row, nothing else. No title, no close button, no mode
   text, no large "Use Weather Location" button, no bordered dialog
   chrome: this is a compact utility control, not a settings panel.
   In-flow beneath the shell (see .tides-location-panel's own rule),
   never an overlay — no Station panel may ever cover the collapsed
   shell. Search mechanics (live results, match-tier ranking) mirror
   Weather's own, per direction; only the surrounding chrome is
   Tides' own minimal treatment. */
.tides-location-panel{display:none;width:100%;margin-top:2px}
.tides-location-panel.open{display:block}

.tides-location-input-row{display:flex;gap:6px}
.tides-location-search-input{flex:1;min-width:0;appearance:none;border:1px solid var(--glass-border-strong);background:rgba(10,14,22,0.35);color:var(--ultra-t2);border-radius:8px;font-family:inherit;font-size:13px;padding:7px 10px;outline:none;box-sizing:border-box}
.tides-location-search-input::placeholder{color:var(--ultra-t3)}
.tides-location-search-input:focus-visible{outline:2px solid var(--tides-accent);outline-offset:1px}

.tides-location-ok-btn{flex:0 0 auto;appearance:none;border:1px solid var(--glass-border-strong);background:var(--glass-hover);color:var(--ultra-t2);border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;transition:background var(--transition)}
.tides-location-ok-btn:hover{background:var(--glass-border-strong)}

.tides-location-search-results{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.tides-location-result-item{display:block;width:100%;text-align:left;appearance:none;font-family:inherit;padding:8px 10px;font-size:13px;font-weight:600;color:var(--ultra-t2);background:var(--glass-primary);border:1px solid var(--glass-border-strong);border-radius:7px;cursor:pointer;transition:background var(--transition)}
.tides-location-result-item:hover{background:var(--glass-hover)}
.tides-location-result-item:focus-visible{outline:2px solid var(--tides-accent);outline-offset:1px}

.tides-location-status{font-size:12px;color:var(--ultra-t3);min-height:14px;margin-top:4px}

body.ultra-mode .tides-location-search-input,
body.ultra-mode .tides-location-ok-btn,
body.ultra-mode .tides-location-result-item{border-color:var(--ultra-border);color:var(--ultra-t2)}

/* ── Light mode ── */
body.light-mode .tides-expand-panel{background:var(--glass-primary)}
body.light-mode .tides-marine-map{background:var(--glass)}
body.light-mode .tides-marine-map-loading,
body.light-mode .tides-marine-map-error{background:var(--glass-hover)}
body.light-mode .tides-marine-map-container .leaflet-control-attribution{background:var(--glass-hover)}
body.light-mode .tides-marine-map-container .leaflet-control-zoom a{background:var(--glass-hover)}
body.light-mode .tides-marine-report-card{background:var(--glass-primary)}

/* ── Ultra mode ── */
body.ultra-mode .tides-expand-panel{background:rgba(0,0,0,0.92)}

/* ── Mobile refinement ── */
/* Scales the Today/Next columns and location text down in two
   steps, same breakpoints Solar/Time use elsewhere in the shell.
   High/Low stay side by side at every width — only spacing and
   typography shrink, per Station direction: layout doesn't change
   on mobile, size does. Icon size and caret position are untouched. */
@media (max-width:520px){
    #tides-station{
        width:calc(100% + 12px);
        max-width:none;
        margin-left:-6px;
        margin-right:-6px;
    }
    .tides-col{flex-basis:130px;gap:3px}
    .tides-stat-row{gap:6px}
    .tides-stat{min-width:62px}
    .tides-col-label{font-size:10px}
    .tides-stat-label{font-size:9px}
    .tides-stat-time{font-size:12px}
    .tides-stat-value{font-size:11px}
    #tides-marine-summary{max-width:110px;font-size:10px}
    .tides-location-row-label{font-size:14px}
    .tides-location-row-coords{font-size:10px}
    .tides-location-row .tides-location-caret{font-size:13px}
    .tides-section-toggle-caret{font-size:13px}
    .tides-section-toggle-close-icon{width:13px;height:13px}
    .tides-dashboard-card{padding:14px;gap:10px}
    .tides-current-direction-icon{width:46px;height:46px}
    .tides-current-direction-icon svg{width:24px;height:24px}
    .tides-current-direction-label{font-size:13px}
    .tides-current-height{font-size:12px}
    .tides-current-next-in{font-size:12px}
    .tides-upcoming-icon svg{width:15px;height:15px}
    .tides-upcoming-time,.tides-upcoming-value{font-size:12px}
    .tides-week-card{width:124px;padding:10px;gap:8px}
    .tides-week-card-day{font-size:10px}
    .tides-week-card-date{font-size:10px}
    .tides-week-card-time,.tides-week-card-value{font-size:12px}
    .tides-week-slider-handle{width:34px;height:20px}
    .tides-week-nav-btn{width:32px;height:32px;font-size:12px}
    .tides-week-range-label{font-size:13px;min-width:150px}
}

@media (max-width:390px){
    .tides-marine-map-container{height:min(52vh,360px)}
    .tides-marine-report-grid{grid-template-columns:repeat(2,1fr)}
    .tides-utility-bar{padding:4px 10px}
    .tides-col{flex-basis:112px;gap:2px}
    .tides-stat-row{gap:4px}
    .tides-stat{min-width:54px}
    .tides-col-label{font-size:9px}
    .tides-stat-label{font-size:8px}
    .tides-stat-time{font-size:11px}
    .tides-stat-value{font-size:10px}
    #tides-marine-summary{max-width:88px;font-size:9px}
    .tides-location-row{padding:4px 30px 4px 2px;gap:6px}
    .tides-location-row-label{font-size:13px}
    .tides-location-row-coords{font-size:9px}
    .tides-location-row .tides-location-caret{font-size:12px}
    .tides-section-toggle-caret{font-size:12px}
    .tides-section-toggle-close-icon{width:12px;height:12px}
    .tides-dashboard-card{padding:12px;gap:8px}
    .tides-current-direction-icon{width:40px;height:40px}
    .tides-current-direction-icon svg{width:21px;height:21px}
    .tides-current-direction-label{font-size:12px}
    .tides-current-height{font-size:11px}
    .tides-current-next-in{font-size:11px}
    .tides-upcoming-icon svg{width:14px;height:14px}
    .tides-upcoming-time,.tides-upcoming-value{font-size:11px}
    .tides-week-card{width:112px;padding:9px;gap:7px}
    .tides-week-card-day{font-size:9px}
    .tides-week-card-date{font-size:9px}
    .tides-week-card-time,.tides-week-card-value{font-size:11px}
    .tides-week-slider-handle{width:30px;height:18px}
    .tides-week-slider-handle-icon{width:11px;height:11px}
    .tides-week-nav-btn{width:28px;height:28px;font-size:11px}
    .tides-week-range-label{font-size:12px;min-width:130px}
}