/* ========================================================= */
/* 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:580px;
    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;
}

/* Ultra: redefine label/accent/caret to the shared subdued blue —
   cascades into column labels, section/dashboard titles, week-card
   day labels, the collapsed-bar High/Low values, focus rings, the
   KEEP LOCATION toggle's ON state, and both dropdown carets.
   --tides-rising-accent / --tides-low-accent (the rising/falling
   direction indicator) are deliberately left untouched. */
body.ultra-mode #tides-station{
    --tides-label:var(--blue);
    --tides-accent:var(--blue);
    --tides-caret-blue:var(--blue);
}

/* ── 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 8px;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)}
body.ultra-mode .tides-utility-bar{border-color:var(--ultra-border)}
/* .tides-utility-bar is a role="button" div, not a native <button>
   for this pass — see tides.html — so focus-visible needs an
   explicit outline a real button would have supplied for free. */
.tides-utility-bar:focus-visible{outline:2px solid var(--tides-accent);outline-offset:2px}

/* Center column — owns the icon. 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. Horizontal padding 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 — icon only. The
   collapsed-bar Location trigger has been removed (location lives
   only in the expand panel's #tides-location-row now); clicks
   anywhere in this column bubble up to #tides-bar. The collapsed bar
   remains one hit target — 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 6px;flex:0 0 auto}
.tides-icon{display:block;width:72px;height:72px;position:relative;z-index:1}

/* Large bright blue downward caret — used on the interior Location
   row. 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 6px}
.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)}
body.ultra-mode #tides-sky-caret .expand-icon path{stroke:var(--soft-text)}

/* ── 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. */
/* ── 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
   the 7-Day Outlook; a future King Tides section would be another
   sibling). */
.tides-section + .tides-section{margin-top:20px}

/* ── 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-hero-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.tides-hero-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.tides-hero-controls{flex:0 0 auto;display:flex;align-items:center;gap:4px}

.tides-location-row{flex:1 1 auto;min-width:0;max-width:260px;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--glass-border-strong);border-radius:var(--radius-medium);background:var(--glass-hover);color:var(--ultra-t2);font-family:inherit;cursor:pointer;transition:background var(--transition)}
.tides-location-row:hover{background:var(--glass-border-strong)}
.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:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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}

.tides-favorite-btn,
.tides-refresh-btn,
.tides-expand-close-btn{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--glass-border-strong);border-radius:var(--radius-medium);background:var(--glass-hover);color:var(--ultra-t3);cursor:pointer;transition:background var(--transition),color var(--transition)}
.tides-favorite-btn:hover,
.tides-refresh-btn:hover,
.tides-expand-close-btn:hover{background:var(--glass-border-strong);color:var(--ultra-t2)}
.tides-favorite-btn:focus-visible,
.tides-refresh-btn:focus-visible,
.tides-expand-close-btn:focus-visible{outline:2px solid var(--tides-accent);outline-offset:2px}
.tides-favorite-btn[aria-pressed="true"]{color:var(--tides-accent);border-color:var(--tides-accent)}

/* ── 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 — heading ──
   Full-width outlined rectangle, static, always visible. Deliberately
   NOT the large station-shell radius (--r-lg) — uses --radius-medium,
   the same compact card/control radius as .tides-dashboard-card and
   .tides-week-card, so this reads as a header nested inside the
   panel, not another station shell. Border reuses the same thin blue
   outline recipe as .tides-utility-bar (rgba(63,147,232,0.60) at
   1.5px). Label reuses the existing Tides-blue heading treatment
   (same size/weight/tracking/color as .tides-dashboard-half-title). */
.tides-week-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;font-family:inherit}
body.ultra-mode .tides-week-toggle{border-color:var(--ultra-border)}
.tides-week-toggle-label{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tides-label)}
.tides-week-body{margin-top:14px}

/* ── 7-Day Tide Outlook — content ──
   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}
body.ultra-mode .tides-week-slider-fill{background:#5877A6}
.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}

/* 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)}

/* ── 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;
        padding-left:0;
        padding-right:0;
    }
    .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-location-row-label{font-size:13px}
    .tides-location-row-coords{font-size:10px}
    .tides-location-row .tides-location-caret{font-size:13px}
    .tides-hero-header{gap:6px}
    .tides-hero-controls{gap:3px}
    .tides-favorite-btn,
    .tides-refresh-btn,
    .tides-expand-close-btn{width:32px;height:32px;flex-basis:32px}
    .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-utility-bar{padding:4px 16px 8px 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-location-row{padding:4px 6px;gap:6px}
    .tides-location-row-label{font-size:12px}
    .tides-location-row .tides-location-caret{font-size:12px}
    .tides-hero-controls{gap:2px}
    .tides-favorite-btn,
    .tides-refresh-btn,
    .tides-expand-close-btn{width:30px;height:30px;flex-basis:30px}
    .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}
}