/* ========================================================= */
/* Wind Station                                                */
/* wind.css                                                    */
/* Every selector in this file is scoped under #wind-station   */
/* (by ID ancestor, not just class-name convention) so this     */
/* file cannot alter another Station even if a class name here   */
/* happens to collide with one elsewhere in the app.               */
/* ========================================================= */

/* Local aliases to the shell tokens — same pattern time.css,
   weather.css, tides.css use under their own station ids. */
#wind-station{
    --soft:var(--soft-text);
    --glass-primary:var(--glass);
    --border-soft:var(--glass-border);
    --r-lg:var(--radius-large);
    --r-md:var(--radius-medium);
    --r-sm:var(--radius-small);
    --transition:var(--transition-fast, 160ms ease);
    width:100%;
    max-width:580px;
    padding:0;
    margin-left:auto;
    margin-right:auto;
}

/* Wind's primary identity color — teal. Fixed at the same exact value
   in dark, light, and ultra: #28B8B0 is Wind's established brand
   color and is never dimmed/desaturated/substituted per mode.
   --wind-teal-light is a lighter companion/accent only — used for
   secondary tints (small labels, subtle backgrounds), never as the
   primary color of an accent border or the compass vector. */
#wind-station{
    --wind-teal:#28B8B0;
    --wind-teal-light:#80D0D0;
}

/* Dark-mode sustained-line reference color — dove grey. Light reuses
   --wind-teal above. See wind.js renderForecastGraph() for how each
   mode applies this (solid fill vs. dotted, no-fill). */
#wind-station{
    --wind-sustained-dark:#B8BEC7;
}

/* Ultra's sustained-line reference color — RED-LIGHT ULTRA palette,
   Wind-local (not shared with other stations). */
body.ultra-mode #wind-station{
    --wind-sustained-ultra:#642723;
}

/* ── Collapsed shell ── */
#wind-station .wind-bar{position:relative;width:100%;background:var(--glass-primary);border:1.5px solid var(--wind-teal);border-radius:var(--r-lg);padding:5px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background var(--transition)}
#wind-station .wind-bar:hover{background:var(--glass-hover)}
#wind-station .wind-bar-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:14px}

#wind-station .wind-bar-left{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
#wind-station .wind-bar-right{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
#wind-station .wind-bar-context{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--wind-teal-light);text-transform:uppercase;line-height:1;margin-bottom:1px}
#wind-station .wind-bar-speed{font-size:14px;font-weight:500;color:var(--text);line-height:1.05}
#wind-station .wind-bar-from{font-size:14px;font-weight:500;color:var(--soft);letter-spacing:.02em;line-height:1.1}
#wind-station .wind-bar-to{font-size:14px;font-weight:500;color:var(--soft);letter-spacing:.02em;line-height:1.1}

/* Center icon column: no fixed width, so it never claims more row
   height than the icon itself needs. Comfortable padding gives the
   icon breathing room within its cell. */
#wind-station .wind-bar-center{position:relative;display:flex;align-items:center;justify-content:center;padding:0 6px}

/* Icon: fixed 96x96 square per spec. object-fit:contain guards against
   distortion if the source asset isn't natively square — it scales the
   image to fit within the box while preserving its own aspect ratio
   rather than stretching it. Never modifies the source asset. */
#wind-station .wind-bar-icon{display:block;width:96px;height:96px;object-fit:contain;position:relative;z-index:1}

#wind-station .wind-bar-gust{font-size:14px;font-weight:500;color:var(--text);line-height:1.05}
#wind-station .wind-bar-gust-label{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--wind-teal-light);text-transform:uppercase;line-height:1.1}
#wind-station .wind-bar-gust-time{font-size:13px;font-weight:500;color:var(--soft);line-height:1.1}

#wind-station #wind-bar-caret{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);z-index:5}
#wind-station #wind-bar-caret .expand-icon{
    display:block;
    width:24px;
    height:24px;
    transition:transform var(--transition);
}
#wind-station #wind-bar-caret.open .expand-icon{transform:rotate(180deg)}
#wind-station .wind-caret-line-a{color:var(--wind-teal)}
#wind-station .wind-caret-line-b{color:var(--wind-teal-light)}

/* ── Expand panel ── */
#wind-station .wind-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)}
#wind-station .wind-expand-panel.open{display:block}
#wind-station .wind-expand-inner{padding:16px 16px 18px}

/* Section title, shared by Forecast (Right Now uses .wind-now-heading) */
#wind-station .wind-section-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px}

/* ========================================================= */
/* WIND HERO / RIGHT NOW                                     */
/* ========================================================= */

#wind-station .wind-hero{
    position:relative;
    width:100%;
}

#wind-station .wind-hero-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
}

#wind-station .wind-hero-left{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
}

#wind-station .wind-location{
    flex:1 1 auto;
    min-width:0;
    max-width:260px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:5px 8px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-sm);
    background:var(--glass-hover);
    color:var(--text);
    cursor:pointer;
}

#wind-station .wind-location-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}

#wind-station .wind-location-name{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    line-height:1.1;
    font-weight:650;
    color:var(--text);
}

#wind-station .wind-updated{
    margin-top:2px;
    font-size:12px;
    line-height:1;
    font-weight:650;
    letter-spacing:.055em;
    color:var(--soft);
}

#wind-station .wind-location-caret{
    flex:0 0 auto;
    color:var(--wind-teal);
    font-size:9px;
}

#wind-station .wind-hero-controls{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:4px;
}

#wind-station .wind-star-btn,
#wind-station .wind-refresh-btn,
#wind-station .wind-settings-btn,
#wind-station .wind-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(--border-soft);
    border-radius:var(--r-sm);
    background:var(--glass-hover);
    color:var(--soft);
    cursor:pointer;
}

#wind-station .wind-star-btn[aria-pressed="true"]{
    color:var(--wind-teal);
    border-color:var(--wind-teal);
}

#wind-station .wind-alert-slot{
    margin:0 0 12px;
}

#wind-station #wind-location-panel{
    margin:0 0 12px;
}


/* RIGHT NOW */

#wind-station .wind-now{
    padding-top:2px;
}

#wind-station .wind-now-heading{
    display:flex;
    align-items:center;
    margin-bottom:5px;
    font-size:13px;
    font-weight:750;
    letter-spacing:.07em;
    color:var(--wind-teal);
}

#wind-station .wind-compass-instrument{
    display:grid;
    grid-template-columns:80px 244px max-content;
    align-items:center;
    justify-content:center;
    column-gap:14px;
    width:100%;
    margin:2px auto 8px;
}

#wind-station .wind-bearing-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:22px;
    min-width:0;
}

#wind-station .wind-bearing{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:3px;
    width:100%;
    text-align:right;
}

#wind-station .wind-bearing-from,
#wind-station .wind-bearing-to{
    align-items:flex-end;
    text-align:right;
}

#wind-station .wind-bearing-label{
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
    color:var(--wind-teal);
}

#wind-station .wind-bearing-cardinal{
    font-size:22px;
    line-height:1;
    font-weight:800;
    color:var(--text);
}

#wind-station .wind-bearing-degrees{
    order:1;
    margin-top:2px;
    font-size:15px;
    line-height:1;
    font-weight:500;
    color:var(--soft);
}

#wind-station .wind-compass-wrap{
    position:relative;
    width:244px;
    height:244px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
}

#wind-station .wind-compass{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

#wind-station .wind-compass-dial{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

#wind-station .wind-compass-ring{
    fill:none;
    stroke:var(--border-soft);
    stroke-width:1.25;
}

#wind-station .wind-compass-minor-tick{
    stroke:var(--soft);
    stroke-width:1.1;
    opacity:.62;
}

#wind-station .wind-compass-major-tick{
    stroke:var(--text);
    stroke-width:1.6;
    opacity:.88;
}

#wind-station .wind-compass-cardinal-tick{
    stroke:var(--wind-teal);
    stroke-width:2.2;
}

#wind-station .wind-compass-tick-label{
    font-size:15px;
    font-weight:800;
    fill:var(--text);
}

#wind-station .wind-compass-tick-deg{
    font-size:11px;
    font-weight:700;
    fill:var(--text);
    opacity:.82;
}

#wind-station .wind-compass-vector{
    stroke:var(--wind-teal);
    stroke-width:4;
    stroke-linecap:butt;
}

#wind-station .wind-compass-arrowhead{
    fill:var(--wind-teal);
}

#wind-station .wind-compass-speed{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

#wind-station .wind-compass-speed-value{
    font-size:42px;
    line-height:.88;
    font-weight:750;
    color:#E8A83E;
    font-variant-numeric:tabular-nums;
}

#wind-station .wind-compass-speed-unit{
    margin-top:5px;
    font-size:12px;
    line-height:1;
    font-weight:750;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--soft);
}

#wind-station .wind-compass-speed-caption{
    margin-top:4px;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    color:#E8A83E;
}

#wind-station .wind-now-metrics{
    width:max-content;
    min-width:190px;
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--border-soft);
    padding-left:18px;
}

#wind-station .wind-now-metric{
    min-height:39px;
    padding:6px 0;
    display:grid;
    grid-template-columns:72px auto;
    align-items:center;
    column-gap:12px;
}

#wind-station .wind-now-metric + .wind-now-metric{
    border-top:1px solid var(--border-soft);
}

#wind-station .wind-now-metric-label{
    margin:0;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.07em;
    color:var(--soft);
    text-align:left;
}

#wind-station .wind-now-metric-value{
    font-size:20px;
    line-height:1;
    font-weight:750;
    color:var(--text);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    text-align:left;
}

#wind-station .wind-now-metric-unit{
    font-size:18px;
}


/* ========================================================= */
/* UNIT CHOOSER                                               */
/* ========================================================= */

#wind-station .wind-unit-dialog{
    position:absolute;
    inset:0;
    z-index:50;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:20px 14px;
    background:rgba(0,0,0,.72);
    border-radius:0 0 var(--r-lg) var(--r-lg);
}

#wind-station .wind-unit-dialog[hidden]{
    display:none;
}

#wind-station .wind-unit-dialog-card{
    width:min(100%,330px);
    padding:14px;
    border:2px solid rgba(255,255,255,.28);
    border-radius:var(--r-md);
    background:#252A31;
    color:#F5F6F8;
}

#wind-station .wind-unit-dialog-title{
    font-size:13px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.04em;
    color:#F5F6F8;
}

#wind-station .wind-unit-dialog-copy{
    margin-top:5px;
    font-size:11px;
    line-height:1.35;
    color:#B8BEC7;
}

#wind-station .wind-unit-segmented{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:11px;
    padding:2px;
    border:1px solid var(--border-soft);
    border-radius:999px;
    background:var(--glass-hover);
}

#wind-station .wind-unit-segment{
    min-height:32px;
    padding:0 8px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--soft);
    font:inherit;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}

#wind-station .wind-unit-segment.selected{
    background:var(--wind-teal);
    color:#071211;
}

#wind-station .wind-unit-dialog-card .wind-unit-segment{
    color:#B8BEC7;
}

#wind-station .wind-unit-dialog-card .wind-unit-segment.selected{
    color:#071211;
}

#wind-station .wind-unit-ok,
#wind-station .wind-settings-ok{
    width:100%;
    min-height:34px;
    margin-top:10px;
    border:1px solid var(--wind-teal);
    border-radius:var(--r-sm);
    background:var(--wind-teal);
    color:#071211;
    font:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

#wind-station .wind-unit-ok:disabled,
#wind-station .wind-settings-ok:disabled{
    opacity:.35;
    cursor:default;
}


/* ========================================================= */
/* SETTINGS                                                   */
/* ========================================================= */

#wind-station .wind-settings-panel{
    margin:0 0 10px;
    padding:10px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-sm);
    background:var(--glass-hover);
}

#wind-station .wind-settings-panel[hidden]{
    display:none;
}

#wind-station .wind-settings-title{
    font-size:10px;
    font-weight:800;
    letter-spacing:.07em;
    color:var(--soft);
}


/* Forecast — 24-hour graph + direction rail scroll together as one
   unit inside .wind-graph-scroll; the 7-day selector below does not
   scroll. PX_PER_HOUR in wind.js (60px) matches GRAPH_LEFT_PAD below,
   both mirrored here so canvas sizing and DOM layout agree exactly. */
#wind-station .wind-forecast-section{margin-bottom:4px}

#wind-station .wind-graph-scroll{overflow-x:hidden;overflow-y:hidden;touch-action:pan-y;scrollbar-width:none;border-radius:var(--r-sm);border:1px solid var(--border-soft);background:var(--glass-hover)}
#wind-station .wind-graph-scroll::-webkit-scrollbar{display:none}
#wind-station .wind-graph-inner{position:relative;display:flex;flex-direction:column}
#wind-station #wind-graph-canvas{display:block}

/* Unified visual scroll rail — .wind-graph-scroll no longer scrolls via
   direct touch/swipe/drag (see overflow-x:hidden below); this custom
   rail/thumb is the only horizontal navigation control, on desktop and
   mobile alike. Width/position of the thumb are set via inline style
   from wind.js. */
#wind-station .wind-scroll-rail{
    display:block;
    position:relative;
    width:100%;
    height:8px;
    border-radius:999px;
    background:var(--border-soft);
    margin-top:6px;
    box-sizing:border-box;
    touch-action:none;
    cursor:pointer;
}

#wind-station .wind-scroll-thumb{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    border-radius:999px;
    background-color:var(--wind-teal);
    background-image:repeating-linear-gradient(to right, rgba(0,0,0,.45) 0 1.5px, transparent 1.5px 4px);
    background-repeat:no-repeat;
    background-position:center;
    background-size:9px 60%;
    touch-action:none;
    cursor:grab;
}

#wind-station .wind-scroll-thumb.is-dragging{
    cursor:grabbing;
}
body.ultra-mode #wind-station .wind-scroll-rail{background:#000000}
body.ultra-mode #wind-station .wind-scroll-thumb{background-color:#481A18}

#wind-station .wind-graph-time-axis{position:relative;height:20px}
#wind-station .wind-graph-time-label{position:absolute;top:0;font-size:12px;font-weight:500;color:var(--soft);transform:translateX(-50%);white-space:nowrap}

#wind-station .wind-rail{position:relative;height:52px;border-top:1px solid var(--border-soft)}
#wind-station .wind-rail-item{position:absolute;top:6px;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translateX(-50%)}
#wind-station .wind-rail-arrow{width:24px;height:24px;color:var(--wind-teal)}
#wind-station .wind-rail-cardinal{font-size:12px;font-weight:600;color:var(--soft);letter-spacing:.02em}

/* Day/date header — replaces the old static "Forecast" title. Color
   comes from --forecast-day-color, set per render from DAY_COLORS[
   selectedDayIndex] so the header and nav arrows always visually match
   the graph currently on screen. Nav buttons stay in the DOM and are
   only ever disabled (never removed), so the label never re-centers
   when an arrow isn't valid for the current day. */
#wind-station .wind-forecast-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
#wind-station .wind-forecast-header-label{font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--forecast-day-color, var(--wind-teal));text-transform:uppercase;text-align:center}
#wind-station .wind-forecast-nav-btn{background:none;border:none;padding:2px 4px;margin:0;font-size:16px;line-height:1;color:var(--forecast-day-color, var(--wind-teal));cursor:pointer;font-family:inherit}
#wind-station .wind-forecast-nav-btn:disabled{visibility:hidden;cursor:default}

/* Compact graph legend — explanatory furniture above the graph, not a
   panel. Sustained sample color is set inline per render to match the
   selected day (DAY_COLORS[selectedDayIndex]); gust sample + the
   speed-color key both use one CSS gradient built from the same 7
   fixed mph stops the canvas gust curve interpolates between, so the
   two always agree (evenly-spaced stops = same linear interpolation
   in CSS as in the canvas color-scale math). Speed-key tick labels are
   built in JS in the user's selected Wind unit. */
#wind-station .wind-graph-legend{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
#wind-station .wind-legend-row{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;color:var(--soft)}
#wind-station .wind-legend-item{display:flex;align-items:center;gap:6px}
#wind-station .wind-legend-swatch{display:inline-block;width:20px;border-radius:2px}
#wind-station .wind-legend-swatch--sustained{
    display:inline-block;
    width:20px;
    min-width:20px;
    height:2px;
    flex:0 0 20px;
}
#wind-station .wind-legend-swatch--gust{height:4px}

/* Ultra sustained legend sample — matches the barely-there dotted
   canvas treatment (no fill, no connecting line): ~1px graphite dots
   every 6px. Applied instead of an inline solid background (see
   renderGraphLegend() in wind.js). */
#wind-station .wind-legend-swatch--sustained-dotted{
    height:2px;
    background-image:radial-gradient(circle, rgba(100,39,35,0.5) 0.5px, transparent 1px);
    background-size:6px 2px;
    background-repeat:repeat-x;
}
#wind-station .wind-legend-scale-bar{width:100%;height:4px;border-radius:2px}
#wind-station .wind-legend-scale-labels{display:flex;justify-content:space-between;font-size:9px;font-weight:500;color:var(--soft);margin-top:2px}

/* 7-day selector — Today is always exactly Wind teal; the remaining
   six days each get a restrained, distinct companion color. The color
   swatch/underline is a permanent per-day identity; .active marks
   which day is currently graphed, independent of hue, so selecting a
   non-Today day never makes it look teal. */
#wind-station .wind-day-selector{display:flex;gap:5px;margin-top:10px}
#wind-station .wind-day-chip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px 5px;border-radius:var(--r-sm);border:1.5px solid var(--border-soft);background:var(--glass-hover);color:var(--soft);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;cursor:pointer}
#wind-station .wind-day-chip-swatch{width:14px;height:3px;border-radius:2px}
#wind-station .wind-day-chip.active{color:var(--text);border-color:var(--day-color, var(--wind-teal));background:rgba(40,184,176,.08)}

/* Location panel shell (content built by wind.js). Background, border,
   border-radius, and padding preserved from the pre-Hero implementation;
   margin is governed by the .wind-hero-scoped rule above. */
#wind-station #wind-location-panel{background:var(--glass-hover);border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:10px}

/* ── Light mode ── */
body.light-mode #wind-station .wind-location,
body.light-mode #wind-station .wind-star-btn,
body.light-mode #wind-station .wind-refresh-btn,
body.light-mode #wind-station .wind-settings-btn,
body.light-mode #wind-station .wind-expand-close-btn,
body.light-mode #wind-station .wind-settings-panel,
body.light-mode #wind-station .wind-unit-segmented,
body.light-mode #wind-station .wind-graph-scroll,
body.light-mode #wind-station .wind-day-chip,
body.light-mode #wind-station #wind-location-panel{background:rgba(0,0,0,.04)}

/* Compass — deliberate per-mode surface/contrast around the dial.
   The teal itself (--wind-teal/--wind-teal-light) never changes; only
   the ring stroke contrast is tuned per mode so the dial reads
   clearly against each background. Tick labels use --text/--soft,
   which already adapt across all three modes on their own. */
body.light-mode #wind-station .wind-compass-ring{stroke:rgba(0,0,0,.14)}

/* ── Ultra mode: RED-LIGHT ULTRA ──
   A dedicated red-on-black field-interface palette, independent of the
   Light/Dark theming above. Classification used throughout: outer
   control/panel borders use Border (#321312); internal separators
   within one instrument (compass ring, graph gridlines, rail rule,
   now-metric dividers) use Divider/grid (#26100F). Text hierarchy:
   essential live readings #9A403A, ordinary values/text #81332F,
   labels/supporting info #642723, disabled #3D1917. No opacity is
   applied to whole containers/controls anywhere in this block. */

/* Station label — replaces the decorative icon in Ultra only; Light/
   Dark never show it (base rule below, outside any mode scope). */
#wind-station .wind-bar-station-label{display:none}
body.ultra-mode #wind-station .wind-bar-icon{display:none}
body.ultra-mode #wind-station .wind-bar-station-label{
    display:block;
    font-size:18px;
    font-weight:750;
    letter-spacing:.10em;
    line-height:1;
    color:#702A27;
}

/* Shell */
body.ultra-mode #wind-station .wind-bar{border-color:#321312;background:#050101}
body.ultra-mode #wind-station .wind-bar:hover{background:#090202}
body.ultra-mode #wind-station .wind-bar-context{color:#642723}
body.ultra-mode #wind-station .wind-bar-speed,
body.ultra-mode #wind-station .wind-bar-gust{color:#9A403A}
body.ultra-mode #wind-station .wind-bar-from,
body.ultra-mode #wind-station .wind-bar-to{color:#81332F}
body.ultra-mode #wind-station .wind-bar-gust-label{color:#642723}
body.ultra-mode #wind-station .wind-bar-gust-time{color:#81332F}
body.ultra-mode #wind-station .wind-caret-line-a{color:#8A302B}
body.ultra-mode #wind-station .wind-caret-line-b{color:#642723}

/* Expand panel / hero / location */
body.ultra-mode #wind-station .wind-expand-panel{border-color:#321312;background:#050101}
body.ultra-mode #wind-station .wind-location{border-color:#321312;background:#090202;color:#81332F}
body.ultra-mode #wind-station .wind-location-name{color:#81332F}
body.ultra-mode #wind-station .wind-updated{color:#642723}
body.ultra-mode #wind-station .wind-location-caret{color:#8A302B}
body.ultra-mode #wind-station .wind-star-btn,
body.ultra-mode #wind-station .wind-refresh-btn,
body.ultra-mode #wind-station .wind-settings-btn,
body.ultra-mode #wind-station .wind-expand-close-btn{border-color:#321312;background:#090202;color:#81332F}
body.ultra-mode #wind-station .wind-star-btn[aria-pressed="true"]{color:#8A302B;border-color:#8A302B}
body.ultra-mode #wind-station #wind-location-panel{background:#090202;border-color:#321312}

/* Right Now / compass */
body.ultra-mode #wind-station .wind-now-heading{color:#642723}
body.ultra-mode #wind-station .wind-bearing-label{color:#642723}
body.ultra-mode #wind-station .wind-bearing-cardinal{color:#9A403A}
body.ultra-mode #wind-station .wind-bearing-degrees{color:#81332F}
body.ultra-mode #wind-station .wind-compass-ring{stroke:#26100F}
body.ultra-mode #wind-station .wind-compass-minor-tick,
body.ultra-mode #wind-station .wind-compass-major-tick,
body.ultra-mode #wind-station .wind-compass-cardinal-tick{stroke:#642723}
body.ultra-mode #wind-station .wind-compass-tick-label,
body.ultra-mode #wind-station .wind-compass-tick-deg{fill:#642723}
body.ultra-mode #wind-station .wind-compass-vector{stroke:#8A302B}
body.ultra-mode #wind-station .wind-compass-arrowhead{fill:#8A302B}
body.ultra-mode #wind-station .wind-compass-speed-value{color:#9A403A}
body.ultra-mode #wind-station .wind-compass-speed-unit{color:#642723}
body.ultra-mode #wind-station .wind-compass-speed-caption{color:#642723}
body.ultra-mode #wind-station .wind-now-metrics{border-left-color:#26100F}
body.ultra-mode #wind-station .wind-now-metric + .wind-now-metric{border-top-color:#26100F}
body.ultra-mode #wind-station .wind-now-metric:nth-child(2),
body.ultra-mode #wind-station .wind-now-metric:nth-child(4){border-left-color:#26100F}
body.ultra-mode #wind-station .wind-now-metric:nth-child(3),
body.ultra-mode #wind-station .wind-now-metric:nth-child(4){border-top-color:#26100F}
body.ultra-mode #wind-station .wind-now-metric-label{color:#642723}
body.ultra-mode #wind-station .wind-now-metric-value{color:#9A403A}

/* Unit chooser + Settings (shared segmented control / OK button) */
body.ultra-mode #wind-station .wind-unit-dialog-card{background:#090202;border:2px solid #481A18;color:#81332F}
body.ultra-mode #wind-station .wind-unit-dialog-title{color:#81332F}
body.ultra-mode #wind-station .wind-unit-dialog-copy{color:#642723}
body.ultra-mode #wind-station .wind-unit-segmented{border-color:#321312;background:#090202}
body.ultra-mode #wind-station .wind-unit-segment{color:#81332F}
body.ultra-mode #wind-station .wind-unit-dialog-card .wind-unit-segment{color:#81332F}
body.ultra-mode #wind-station .wind-unit-segment.selected,
body.ultra-mode #wind-station .wind-unit-dialog-card .wind-unit-segment.selected{background:#8A302B;color:#000000}
body.ultra-mode #wind-station .wind-unit-ok,
body.ultra-mode #wind-station .wind-settings-ok{border-color:#8A302B;background:#8A302B;color:#000000}
body.ultra-mode #wind-station .wind-unit-ok:disabled,
body.ultra-mode #wind-station .wind-settings-ok:disabled{opacity:1;background:#3D1917;border-color:#3D1917;color:#000000}
body.ultra-mode #wind-station .wind-settings-panel{border-color:#321312;background:#090202}
body.ultra-mode #wind-station .wind-settings-title{color:#642723}

/* Forecast — graph surface, legend, rail, day selector */
body.ultra-mode #wind-station .wind-graph-scroll{border-color:#321312;background:#090202}
body.ultra-mode #wind-station .wind-graph-time-label{color:#642723}
body.ultra-mode #wind-station .wind-rail{border-top-color:#26100F}
body.ultra-mode #wind-station .wind-rail-arrow{color:#8A302B}
body.ultra-mode #wind-station .wind-rail-cardinal{color:#642723}
body.ultra-mode #wind-station .wind-forecast-header-label,
body.ultra-mode #wind-station .wind-forecast-nav-btn{color:var(--forecast-day-color, #67201D)}
body.ultra-mode #wind-station .wind-legend-row,
body.ultra-mode #wind-station .wind-legend-scale-labels{color:#642723}
body.ultra-mode #wind-station .wind-day-chip{border-color:#321312;background:#090202;color:#642723}
body.ultra-mode #wind-station .wind-day-chip-swatch{
    background:#642723 !important;
}
body.ultra-mode #wind-station .wind-day-chip.active{
    color:#81332F;
    border-color:#8A302B;
    background:#090202;
}

/* ── Responsive: content already stacks in a single column at every
   width — this query only tightens sizing for small screens. The
   Forecast graph/rail are deliberately NOT resized here — see
   .wind-graph-scroll above; 24 hours must never compress. ── */
/* ── Narrow-width controls row: five inline controls (location +
   4 fixed icon buttons, in two groups) need to fit on one line down
   to iPhone SE (375px). Shrinking the icon buttons and gaps here —
   rather than ever wrapping — keeps the row's fixed elements fixed
   and leaves the location button, the one flexible element, more
   room. ── */
@media (max-width:520px){

    #wind-station{
        width:calc(100% + 12px);
        max-width:none;
        margin-left:-6px;
        margin-right:-6px;
        padding-left:0;
        padding-right:0;
    }

    #wind-station .wind-expand-inner{
        padding-left:12px;
        padding-right:12px;
    }

    #wind-station .wind-scroll-thumb::before{
        content:"";
        position:absolute;
        top:-10px;
        bottom:-10px;
        left:-6px;
        right:-6px;
        background:transparent;
    }

    #wind-station .wind-hero-header{
        gap:3px;
    }

    #wind-station .wind-hero-controls{
        gap:3px;
    }

    #wind-station .wind-hero-left{
        gap:3px;
    }

    #wind-station .wind-star-btn,
    #wind-station .wind-refresh-btn,
    #wind-station .wind-settings-btn,
    #wind-station .wind-expand-close-btn{
        width:32px;
        height:32px;
        flex-basis:32px;
    }

    #wind-station .wind-location{
        padding:6px 8px;
    }

    #wind-station .wind-bar-speed,
    #wind-station .wind-bar-gust{
        font-size:12px;
    }

    #wind-station .wind-bar{
        padding:4px 8px;
    }

    #wind-station .wind-day-selector{
        gap:3px;
    }

    #wind-station .wind-day-chip{
        padding:5px 1px;
        font-size:10px;
        letter-spacing:.01em;
    }
}

@media (max-width:480px){

    #wind-station .wind-compass-instrument{
        grid-template-columns:1fr 58px 200px 1fr;
        grid-template-areas:
            ". bearing compass ."
            "metrics metrics metrics metrics";
        column-gap:10px;
        row-gap:12px;
        margin-top:0;
    }

    #wind-station .wind-bearing-stack{
        grid-area:bearing;
        gap:12px;
    }

    #wind-station .wind-bearing-label{
        font-size:8px;
    }

    #wind-station .wind-bearing-degrees{
        font-size:12px;
    }

    #wind-station .wind-bearing-cardinal{
        font-size:18px;
    }

    #wind-station .wind-compass-wrap{
        grid-area:compass;
        justify-self:center;
        width:200px;
        height:200px;
    }

    #wind-station .wind-compass-tick-label{
        font-size:14px;
    }

    #wind-station .wind-compass-tick-deg{
        font-size:9px;
    }

    #wind-station .wind-compass-speed-value{
        font-size:30px;
    }

    #wind-station .wind-compass-speed-unit{
        font-size:9px;
    }

    #wind-station .wind-compass-speed-caption{
        font-size:7px;
    }

    #wind-station .wind-now-metrics{
        grid-area:metrics;
        width:100%;
        min-width:0;
        padding-left:0;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0;
        border-left:none;
    }

    #wind-station .wind-now-metric{
        min-width:0;
        padding:10px 8px;
        grid-template-columns:minmax(0,1fr);
        column-gap:0;
        row-gap:4px;
    }

    #wind-station .wind-now-metric-label,
    #wind-station .wind-now-metric-value{
        min-width:0;
        text-align:center;
    }

    #wind-station .wind-now-metric + .wind-now-metric{
        border-top:none;
    }

    #wind-station .wind-now-metric:nth-child(2),
    #wind-station .wind-now-metric:nth-child(4){
        border-left:1px solid var(--border-soft);
    }

    #wind-station .wind-now-metric:nth-child(3),
    #wind-station .wind-now-metric:nth-child(4){
        border-top:1px solid var(--border-soft);
    }

    #wind-station .wind-now-metric-label{
        font-size:9px;
    }

    #wind-station .wind-now-metric-value{
        font-size:15px;
    }

    #wind-station .wind-now-metric-unit{
        font-size:12px;
    }

    #wind-station .wind-now-heading{
        font-size:11px;
    }
}

@media (max-width:390px){
    #wind-station .wind-bar-speed,
    #wind-station .wind-bar-gust{
        font-size:11px;
    }

    #wind-station .wind-hero-header{
        gap:2px;
    }

    #wind-station .wind-hero-controls{
        gap:2px;
    }

    #wind-station .wind-hero-left{
        gap:2px;
    }

    #wind-station .wind-star-btn,
    #wind-station .wind-refresh-btn,
    #wind-station .wind-settings-btn,
    #wind-station .wind-expand-close-btn{
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    #wind-station .wind-day-selector{
        gap:2px;
    }

    #wind-station .wind-day-chip{
        font-size:9px;
    }
}

@media (max-width:360px){

    #wind-station .wind-compass-instrument{
        grid-template-columns:1fr 54px 188px 1fr;
    }

    #wind-station .wind-compass-wrap{
        width:188px;
        height:188px;
    }

    #wind-station .wind-now-metric-value{
        font-size:14px;
    }

    #wind-station .wind-now-metric-unit{
        font-size:11px;
    }
}