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

/* Tides-local aliases to the Lumo 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;
}

/* ── 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>
   (needed so #tides-location-trigger can nest inside it — 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, its glow, and the resolved
   location 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 now a plain div, not a button — the icon
   inside it is non-interactive (clicks bubble to #tides-bar), and
   the location text below owns its own .tides-location-trigger
   button. Split this way so "expand the Station" (icon) and "open
   the location selector" (text) are two distinct, unambiguous click
   targets — 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}
.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}

/* Location trigger — sits immediately beneath the icon, centered.
   Bumped up in weight/size and pulled closer to the icon so the two
   read as one connected identity unit (icon + name) rather than
   icon-then-caption — gives the center more visual mass to balance
   the two dense Today/Next columns. The caret beside the label makes
   the dropdown affordance explicit. */
.tides-location-trigger{position:relative;z-index:1;display:flex;align-items:center;gap:3px;margin-top:2px;max-width:160px;background:none;border:0;padding:2px 4px;border-radius:var(--radius-medium);font-family:inherit;cursor:pointer}
.tides-location-trigger:focus-visible{outline:2px solid var(--tides-accent);outline-offset:2px}
.tides-location{font-size:14px;font-weight:500;line-height:1.2;color:var(--soft);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Large bright blue downward caret — used both here (collapsed
   trigger) and on the interior Location row, so the two controls
   read as the same affordance. 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-trigger .tides-location-caret{font-size:13px}
.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)}
#tides-station.tides-state-loading .tides-location,
#tides-station.tides-state-error .tides-location{font-style:italic}

/* 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:-22px;transform:translateX(-50%);z-index:5}
#tides-sky-caret .tides-expand-icon{transition:transform var(--transition)}
#tides-sky-caret.open .tides-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}

/* ── 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:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

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

/* 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:rgba(232,225,245,0.72)}

/* ── 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-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{font-size:11px}
    .tides-location-trigger{max-width:110px}
    .tides-location-trigger .tides-location-caret{font-size:11px}
    .tides-location-row-label{font-size:13px}
    .tides-location-row .tides-location-caret{font-size: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-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-location{font-size:10px}
    .tides-location-trigger{max-width:88px}
    .tides-location-trigger .tides-location-caret{font-size:10px}
    .tides-location-row{padding:4px 30px 4px 2px;gap:6px}
    .tides-location-row-label{font-size:12px}
    .tides-location-row .tides-location-caret{font-size: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}
}