/* ========================================================= */
/* LumoLynx Weather Station                                   */
/* weather.css                                                */
/* SOURCE-DRIVEN MIGRATION FROM WHICHPhase                    */
/* ========================================================= */

/* Weather-local aliases to the Lumo shell tokens. */
#weather-station{
    --soft:var(--soft-text);
    --glass-primary:var(--glass);
    --glass-deep:var(--glass);
    --glass-hover:var(--glass-hover);
    --glass-active:var(--glass-hover);
    --border-primary:var(--glass-border);
    --border-soft:var(--glass-border);
    --border-strong:var(--glass-border-strong);
    --r-lg:var(--radius-large);
    --r-md:var(--radius-medium);
    --r-sm:var(--radius-small);
    --sp-md:12px;
    --blur-glass:blur(12px);
    --blur-sm:blur(8px);
    --transition:var(--transition-fast);
    --ultra-border:var(--glass-border);
    --ultra-t1:var(--text);
    --ultra-t2:var(--text);
    --ultra-t3:var(--soft-text);
    --ultra-gold:var(--gold);
    --ultra-violet:var(--blue);
    --forecast-hourly-accent:rgb(212,175,55);
    --forecast-hourly-pill:rgba(212,175,55,.24);
    --forecast-hourly-glow-1:rgba(212,175,55,.38);
    --forecast-hourly-glow-2:rgba(212,175,55,.22);
    --forecast-hourly-glow-3:rgba(212,175,55,.10);
    --forecast-daily-accent:#C39BFF;
    --forecast-daily-pill:rgba(195,155,255,.24);
    --forecast-daily-glow-1:rgba(195,155,255,.44);
    --forecast-daily-glow-2:rgba(195,155,255,.26);
    --forecast-daily-glow-3:rgba(195,155,255,.12);
    width:100%;
    max-width:580px;
    margin-left:auto;
    margin-right:auto;
    --tile-gap:10px;
    --tile-inset:12px;
}

/* Forecast-mode visual identity: Light and Ultra swap only these
   variable values; the selected-pill, row-outline, row-glow, and
   caret selectors that consume them are unchanged across modes. */
body.light-mode #weather-station{
    --forecast-hourly-accent:#C48C1B;
    --forecast-hourly-pill:rgba(196,140,27,.20);
    --forecast-hourly-glow-1:rgba(196,140,27,.30);
    --forecast-hourly-glow-2:rgba(196,140,27,.18);
    --forecast-hourly-glow-3:rgba(196,140,27,.08);
    --forecast-daily-accent:#7A81E2;
    --forecast-daily-pill:rgba(122,129,226,.22);
    --forecast-daily-glow-1:rgba(122,129,226,.38);
    --forecast-daily-glow-2:rgba(122,129,226,.22);
    --forecast-daily-glow-3:rgba(122,129,226,.10);
}

/* Ultra Mode intentionally does not redefine the six forecast
   variables above — Ultra shares Dark's exact gold and cosmic-violet
   values (per design spec: Ultra uses the same "brighter cosmic
   violet" as Dark, not a separate muted tone), so it simply inherits
   the base #weather-station values with no override block needed. */

@media (max-width:520px){
    #weather-station{
        width:calc(100% + 12px);
        max-width:none;
        margin-left:-6px;
        margin-right:-6px;
        --tile-gap:7px;
        --tile-inset:8px;
    }
}


#weather-station .hourly-expand-panel{display:none;border:1px solid transparent;border-radius:var(--r-md);border-top:1px solid transparent;overflow:hidden;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#weather-station .hourly-expand-panel.open{display:block}
#weather-station .forecast14-panel{
    display:none;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#weather-station .forecast14-panel.open{
    display:block;
}
#weather-station .location-panel{display:none;width:100%;background:rgba(212,175,55,0.22);border:1.5px solid rgba(212,175,55,0.75);border-radius:var(--r-lg);padding:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-sizing:border-box;margin-bottom:8px}
#weather-station .location-panel.open{display:block}
#weather-station .location-panel-title{font-size:13px;font-weight:700;letter-spacing:0.6px;color:var(--text);margin-bottom:10px}
#weather-station .location-section{margin-bottom:12px}
#weather-station .location-section:last-child{margin-bottom:0}
#weather-station .location-section-label{font-size:12px;font-weight:700;letter-spacing:0.8px;color:var(--soft);margin-bottom:8px;text-transform:uppercase}
#weather-station .date-loc-results{margin-top:4px}
#weather-station .date-loc-result-item{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border-soft);background:var(--glass-primary);border-radius:6px;margin-bottom:3px;color:#BFC7D1;transition:background 0.15s}
#weather-station .date-loc-result-item:hover{background:var(--glass-hover);color:#F5EDE3}
#weather-station .recent-location-btn{width:100%;appearance:none;border:1px solid rgba(191,199,209,0.12);background:linear-gradient(180deg,rgba(10,14,22,0.35),rgba(10,14,22,0.20)),rgba(10,14,22,0.42);color:var(--text);border-radius:12px;font-family:inherit;font-size:14px;font-weight:500;text-align:left;padding:10px 12px;cursor:pointer;margin-bottom:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;justify-content:space-between;align-items:center}
#weather-station .recent-location-btn:last-child{margin-bottom:0}
#weather-station .location-input-wrap{display:flex;gap:8px}
#weather-station .location-input{flex:1;appearance:none;border:1px solid rgba(191,199,209,0.12);background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(10,14,22,0.20)),rgba(10,14,22,0.42);color:var(--text);border-radius:12px;font-family:inherit;font-size:14px;padding:10px 12px;outline:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#weather-station .location-input::placeholder{color:rgba(191,199,209,0.55)}
#weather-station .location-add-btn{appearance:none;border:1px solid rgba(191,199,209,0.14);background:linear-gradient(180deg,rgba(10,14,22,0.35),rgba(10,14,22,0.25)),rgba(10,14,22,0.50);color:var(--text);border-radius:12px;font-family:inherit;font-size:14px;font-weight:600;padding:10px 12px;cursor:pointer}
#weather-station .location-help{font-size:12px;color:var(--soft);margin-top:8px;line-height:1.35}
#weather-station .location-status{font-size:12px;color:var(--soft);margin-top:8px;min-height:16px}
#weather-station .recent-loc-label{flex:1;text-align:left}
#weather-station .recent-loc-elev{font-size:10px;color:var(--soft);font-weight:500;margin-left:8px;white-space:nowrap;flex-shrink:0}
#weather-station .location-elev-section{border-top:1px solid rgba(143,179,255,0.1);padding-top:12px;margin-top:4px}
#weather-station .elev-optional{font-size:8px;font-weight:700;letter-spacing:1px;color:var(--blue);text-transform:uppercase;margin-left:6px}
#weather-station .elev-input-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#weather-station .elev-input{flex:1}
#weather-station .elev-unit-toggle{display:flex;border:1px solid rgba(191,199,209,0.16);border-radius:999px;overflow:hidden;flex-shrink:0}
#weather-station .elev-unit-btn{padding:8px 11px;font-size:12px;font-weight:700;background:transparent;color:var(--soft);border:none;cursor:pointer;font-family:inherit;transition:all 0.15s}
#weather-station .elev-unit-btn.active{background:rgba(191,199,209,0.12);color:var(--text)}
#weather-station .elev-disclaimer{font-size:10px;color:var(--soft);line-height:1.5}
#weather-station .location-status.error{color:#F5EDE3}
#weather-station .location-status.success{color:#BFC7D1}
@media (max-width:520px){
#weather-station .location-panel{width:min(340px,calc(100vw - 24px))}
#weather-station .location-input-wrap{flex-direction:column}
}
#weather-station .hourly-strip{max-width:100%;margin:0;overflow:visible;padding:8px 8px 4px;}
#weather-station .hourly-strip-inner{display:flex;flex-direction:column;gap:4px;padding:2px 0;width:100%}
#weather-station .wp-forecast-panel{overflow:hidden;border-top:none;margin-top:2px}
#weather-station .hourly-expand-panel.open{display:block!important}
@media (max-width:390px){
#weather-station .hourly-strip-inner{flex-direction:column}
}
body.ultra-mode #weather-station .hourly-expand-panel{border-color:var(--ultra-border);background:transparent}
body.ultra-mode .ws-shape{background:transparent;border-color:var(--ultra-border)}
body.light-mode .ws-shape{background:var(--glass-primary);border:1px solid var(--border-primary);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);}
body.light-mode #weather-station .location-panel{background:var(--glass-deep);border:1px solid var(--border-primary);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
body.ultra-mode #weather-station .location-panel{background:#050507;border-color:var(--ultra-border)}
body.ultra-mode #weather-station .location-panel-title{color:var(--ultra-t1)}
body.ultra-mode #weather-station .location-section-label{color:var(--ultra-t3)}
body.ultra-mode #weather-station .recent-location-btn{border-color:var(--ultra-border);color:var(--ultra-t2)}
body.ultra-mode #weather-station .location-input,body.ultra-mode #weather-station .location-add-btn{border-color:var(--ultra-border);color:var(--ultra-t2)}
body.ultra-mode #weather-station .location-input::placeholder{color:var(--ultra-t3)}

/* These previously had no Light Mode override at all — their base
   rule is a hardcoded dark gradient built for Dark Mode, which is
   why they read as disconnected dark-gray boxes in Light Mode.
   Reusing the same shared warm-white tokens as the rest of the
   interface rather than inventing new one-off colors. */
body.light-mode #weather-station .recent-location-btn,
body.light-mode #weather-station .location-input,
body.light-mode #weather-station .location-add-btn{
    background:var(--glass-hover);
    border-color:var(--glass-border);
    color:var(--text);
}

body.light-mode #weather-station .location-input::placeholder{
    color:var(--soft-text);
}

body.light-mode #weather-station .elev-unit-toggle{
    border-color:var(--glass-border);
}

body.light-mode #weather-station .elev-unit-btn.active{
    background:var(--glass-hover);
}

body.light-mode #weather-station #snow-comparison{
    background:var(--glass);
    border-color:var(--glass-border);
}

.ws-shape{
    position:relative;
    overflow:visible;
    background:rgba(124,92,255,.22);
    border:2px solid rgba(124,92,255,.75);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:var(--r-lg);
    padding:12px 16px 8px;
    margin-top:-8px;
}
.ws-now-temp{
    font-size:36px;
    font-weight:200;
    letter-spacing:-1px;
    line-height:1;
    margin-bottom:0;
}
.ws-forecast-row{
    display:grid;
    grid-template-columns:auto auto auto;
    align-items:center;
    gap:6px;
    padding:5px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    white-space:nowrap;
}
.ws-forecast-row:last-child{
    border-bottom:none;
}
.ws-fc-day{
    font-size:11px;
    font-weight:700;
    min-width:36px;
}
.ws-fc-temps{
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
}
.ws-meta-row{
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
/* font-size/font-weight intentionally not declared here — .ws-util-btn
   (this element always carries both classes) is the single
   authoritative source for those two properties, since it's later in
   the cascade and was the one actually controlling the rendered
   result. Declaring them here too would just recreate a shadowed,
   silently-dead value. */
.ws-hourly-toggle{
    letter-spacing:.04em;
    opacity:1;
    white-space:nowrap;
    flex-shrink:0;
    cursor:pointer;
    color:var(--text);
}
.ws-location{
    appearance:none;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    flex-shrink:0;
}
#ws-location-name{
    font-size:13px;
    font-weight:700;
    color:var(--text);
}
.ws-location-caret{
    font-size:16px;
    margin-left:4px;
    opacity:1;
    color:#2F8FFF;
}
.ws-location:hover{
    opacity:.8;
}
#weather-station .hourly-bar{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-sm);background:linear-gradient(to top, var(--forecast-hourly-glow-1) 0%, var(--forecast-hourly-glow-2) 24%, var(--forecast-hourly-glow-3) 52%, transparent 82%), var(--glass-primary);border:1px solid var(--border-soft);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);box-sizing:border-box;margin-bottom:4px;border-color:color-mix(in srgb, var(--forecast-hourly-accent) 60%, white 40%);}
#weather-station .hourly-bar:last-child{margin-bottom:0;}
#weather-station .hourly-bar-time{font-size:11px;font-weight:700;letter-spacing:0.4px;color:#F5EDE3;white-space:nowrap;min-width:34px;text-align:left;}
#weather-station .hourly-bar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;}
#weather-station .hourly-bar-cond{font-size:12px;font-weight:400;color:var(--text);flex:1 1 0;min-width:0;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word;}
#weather-station .hourly-bar-temp{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;min-width:28px;text-align:right;}
#weather-station .hourly-bar-precip{font-size:11px;color:var(--blue);white-space:nowrap;min-width:34px;text-align:right;}
#weather-station .hourly-bar-cloud{font-size:11px;color:var(--soft);white-space:nowrap;min-width:30px;text-align:right;}
#weather-station .hourly-bar-wind{font-size:11px;color:var(--soft);white-space:nowrap;min-width:46px;text-align:right;}
body.light-mode #weather-station .hourly-bar-time{color:#2E3138;}
body.light-mode #weather-station .hourly-bar-cond{color:#2E3138;}
body.light-mode #weather-station .hourly-bar-temp{color:#1E2A3A;}
body.ultra-mode #weather-station .hourly-bar-time{color:var(--ultra-t3);}
body.ultra-mode #weather-station .hourly-bar-cond{color:var(--ultra-t2);}
body.ultra-mode #weather-station .hourly-bar-temp{color:var(--ultra-t1);}
body.ultra-mode #weather-station .hourly-bar-precip{color:var(--ultra-t3);}
body.ultra-mode #weather-station .hourly-bar-cloud{color:var(--ultra-t3);}
body.ultra-mode #weather-station .hourly-bar-wind{color:var(--ultra-t3);}
#weather-station .forecast-grid{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    max-width:none;
    margin:0;
    padding:8px 8px 4px;
    box-sizing:border-box;
}
#weather-station .forecast-bar{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px 8px 8px;border-radius:var(--r-sm);background:linear-gradient(to top, var(--forecast-daily-glow-1) 0%, var(--forecast-daily-glow-2) 24%, var(--forecast-daily-glow-3) 52%, transparent 82%), var(--glass-primary);border:1px solid var(--border-soft);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);box-sizing:border-box;border-color:color-mix(in srgb, var(--forecast-daily-accent) 75%, white 25%);cursor:pointer;}
#weather-station .forecast-bar-date{font-size:11px;font-weight:700;letter-spacing:0.3px;color:#F5EDE3;white-space:nowrap;min-width:58px;}
#weather-station .forecast-bar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;}
#weather-station .forecast-bar-hilo{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;min-width:44px;}
#weather-station .forecast-bar-precip{font-size:11px;color:var(--blue);white-space:nowrap;min-width:42px;}
#weather-station .forecast-bar-cloud{font-size:11px;color:var(--soft);white-space:nowrap;min-width:38px;}
#weather-station .forecast-bar-wind{font-size:11px;color:var(--soft);white-space:nowrap;min-width:48px;}

/* ========================================================= */
/* Mobile Forecast Spacing Refinement                         */
/* 12HR (.hourly-bar) rows. hourly-bar-cond is the row's only   */
/* flexible column — the other columns (time, hilo, precip,     */
/* cloud, wind) are all white-space:nowrap and can't shrink. On  */
/* a phone screen those already use nearly the full row width,   */
/* so the condition label was left with very little room and,    */
/* with word-wrap:break-word, broke mid-word into a jammed,       */
/* hard-to-read cluster of text.                                  */
/* Fix: keep min-width:0 on the label (critical — it's what lets  */
/* flexbox shrink it to whatever space genuinely remains, instead */
/* of forcing the row wider than the screen) and swap wrapping     */
/* for a single-line ellipsis truncation, which reads as clean     */
/* and calm instead of crushed.                                     */
/* (14DAY's .forecast-bar-cond, the same fix originally applied to, */
/* was later removed entirely — see the Daily Details section        */
/* below; the 14DAY row's padding here is now sized for its new       */
/* disclosure caret instead.)                                          */
/* ========================================================= */
@media (max-width:520px){

    #weather-station .hourly-strip{
        padding:8px var(--tile-inset) 4px;
    }

    #weather-station .hourly-bar{
        padding:8px 10px;
        gap:8px;
        align-items:center;
    }

    #weather-station .hourly-bar-cond{
        flex:1 1 auto;
        min-width:72px;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        line-height:1.15;
        word-break:normal;
        overflow-wrap:break-word;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    #weather-station .forecast-grid{
        padding:4px var(--tile-inset) 6px;
    }

    #weather-station .forecast-bar{
        padding:8px 12px 8px 10px;
    }

}
body.light-mode #weather-station .forecast-bar-date{color:#2E3138;}
body.light-mode #weather-station .forecast-bar-hilo{color:#1E2A3A;}
body.ultra-mode #weather-station .forecast-bar-date{color:var(--ultra-t2);}
body.ultra-mode #weather-station .forecast-bar-hilo{color:var(--ultra-t1);}
body.ultra-mode #weather-station .forecast-bar-precip{color:var(--ultra-t3);}
body.ultra-mode #weather-station .forecast-bar-cloud{color:var(--ultra-t3);}
body.ultra-mode #weather-station .forecast-bar-wind{color:var(--ultra-t3);}
.ws-gps-btn{background:none;border:none;padding:4px;margin:0 0 0 2px;cursor:pointer;color:#F5EDE3;opacity:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity 0.15s;position:relative;z-index:2;}
.ws-gps-btn svg{width:20px;height:20px;stroke-width:2.5;}
.ws-gps-btn:hover{opacity:0.75;}
body.light-mode .ws-gps-btn{color:#2E3138;}
body.ultra-mode .ws-gps-btn{color:var(--ultra-t2);}
.ws-meta-left{display:flex;align-items:center;flex-shrink:0;}
.ws-gps-error{font-size:10px;font-weight:600;color:rgba(245,237,227,0.65);letter-spacing:0.2px;white-space:nowrap;margin-left:6px;}
body.light-mode .ws-gps-error{color:rgba(46,49,56,0.55);}
.ws-caret{display:inline-block;color:var(--forecast-hourly-accent);transition:transform .2s ease;}
.ws-hourly-toggle.open .ws-caret{transform:rotate(180deg);}
#weather-station .elev-disclaimer a{color:var(--soft);text-decoration:underline;}
/* font-size/font-weight intentionally not declared here — see the
   matching note on .ws-hourly-toggle above; .ws-util-btn is the
   single authoritative source for both. */
.ws-14day-toggle{letter-spacing:.04em;white-space:nowrap;flex-shrink:0;cursor:pointer;color:var(--text);opacity:1;}
body.light-mode .ws-hourly-toggle,body.light-mode .ws-14day-toggle{color:var(--text);opacity:1;}
body.ultra-mode .ws-hourly-toggle,body.ultra-mode .ws-14day-toggle{color:var(--ultra-t1);opacity:1;}
.ws-14caret{display:inline-block;color:var(--forecast-daily-accent);transition:transform .2s ease;}
.ws-14day-toggle.open .ws-14caret{transform:rotate(180deg);}
.ws-body-row{display:flex;align-items:flex-start;gap:12px;margin-top:8px;margin-bottom:0;}
.ws-hero-left{display:flex;flex-direction:column;gap:0;flex:0 1 auto;min-width:0;overflow:hidden;}
.ws-temp-icon-row{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap;}
.ws-now-icon{display:flex;align-items:baseline;flex-shrink:0;}
.ws-hero-hl{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;opacity:0.75;margin-top:2px;}
.ws-hero-sep{opacity:0.4;}
.ws-hero-h{color:var(--text);}
.ws-hero-l{color:var(--text);}
body.ultra-mode .ws-hero-h,body.ultra-mode .ws-hero-l{color:var(--ultra-t2);}
.ws-tonight{font-size:11px;font-weight:600;color:var(--text);opacity:0.75;margin-top:2px;min-height:0;}
body.ultra-mode .ws-tonight{color:var(--ultra-t2);}
.ws-now-sentence{font-size:11px;font-weight:500;line-height:1.35;color:var(--blue);margin-top:3px;margin-bottom:0;min-height:0;}
body.light-mode .ws-now-sentence{color:var(--blue);}
body.ultra-mode .ws-now-sentence{color:var(--ultra-t2);}
.ws-forecast-section{flex:0 0 auto;flex-shrink:0;margin-left:auto;display:flex;flex-direction:column;align-items:center;}
@media (min-width:601px){
.ws-forecast-section{margin-right:20px;}
}
.ws-fc-icons{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.ws-fc-icon-sep{font-size:9px;opacity:0.35;line-height:1;padding:0 1px;}
.ws-util-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:var(--r-sm);background:var(--glass-primary);border:2px solid var(--border-primary);cursor:pointer;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--text);white-space:nowrap;transition:background var(--transition),border-color var(--transition);}
.ws-util-btn:hover{background:var(--glass-hover);}
.ws-util-btn.open{background:var(--glass-active);border-color:var(--border-strong);}
/* Inactive pills carry no forecast identity — standard glass,
   muted text, same treatment for both toggles and every viewing
   mode. Only the .open state (below) introduces the accent color. */
.ws-hourly-toggle.ws-util-btn:not(.open),
.ws-14day-toggle.ws-util-btn:not(.open){
    background:transparent;
    color:var(--soft);
    border-color:var(--border-primary);
}
.ws-hourly-toggle.ws-util-btn.open{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--forecast-hourly-pill);border-color:var(--forecast-hourly-accent);color:var(--text);}
.ws-14day-toggle.ws-util-btn.open{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--forecast-daily-pill);border-color:var(--forecast-daily-accent);color:var(--text);}
body.ultra-mode .ws-util-btn{background:transparent;border-color:var(--ultra-border);color:var(--ultra-t2);}
#weather-station #snow-comparison{margin:4px 0;padding:3px 10px;border-radius:8px;background:rgba(8,12,20,0.45);border:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:0;}
#weather-station .snow-title{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;opacity:.55;margin-bottom:0;line-height:1;}
#weather-station .snow-body{font-size:13px;font-weight:600;line-height:1.15;}
#weather-station .snow-note{font-size:13px;opacity:.60;line-height:1.2;}

/* ========================================================= */
/* Approved Lumo architecture additions                       */
/* ========================================================= */

/* =========================================================
   Extended Forecast Prompt
   Visual only.
   Weather card owns the click behavior.
========================================================= */

.ws-extended-prompt{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 20px;

    font-family:inherit;
    font-size:13px;
    font-weight:500;
    letter-spacing:.02em;
    line-height:1.2;
    white-space:nowrap;

    color:var(--gold);

    background:transparent;

    border:2px solid #7A81E2;
    border-radius:999px;

    pointer-events:none;
    user-select:none;

    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
    text-overflow:ellipsis;

}

.ws-lens-caret{
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    color:var(--gold);
    cursor:pointer;

    position:absolute;
    left:50%;
    bottom:-14px;
    transform:translateX(-50%);
    z-index:20;
}

/* Weather-only override of the shared .ll-expand-icon size below.
   Deliberately NOT editing that shared rule itself — it's also used
   by Solar's caret, and changing it there would resize Solar too.
   This selector is more specific (scoped to .ws-lens-caret), so it
   wins for Weather's instance without touching the shared rule or
   anything else that depends on it. */
.ws-lens-caret .ll-expand-icon{
    width:24px;
    height:24px;
}

/* Shared expand-affordance icon — inline SVG, used identically by
   Weather and Solar. This is the ONE authoritative rendering path;
   there is no external asset file and no CSS-generated triangle
   anywhere in the project. This is the only place this sizing rule
   is defined — Solar's own stylesheet does not redeclare it, since
   both stylesheets load on the same page and a shared class applies
   regardless of which file defines it. Each station keeps only its
   own rotation-trigger selector, since those genuinely differ by
   parent element (.ws-lens-caret vs #solar-sky-caret). */
.ll-expand-icon{
    display:block;
    width:20px;
    height:20px;
    transition:transform 180ms ease;
}

.ws-lens-caret.open .ll-expand-icon,
.ws-lens-caret[aria-expanded="true"] .ll-expand-icon{
    transform:rotate(180deg);
}

.weather-expand-panel{
    display:block;
    width:100%;
    margin:0 0 8px;
    padding:10px 0 12px;
    border:0;
    border-radius:var(--radius-large);
}

.weather-expand-panel[hidden]{
    display:none;
}

.weather-expand-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
    padding-left:var(--tile-inset);
    padding-right:var(--tile-inset);
}

.weather-expand-controls{
    display:flex;
    align-items:center;
    gap:3px;
    min-width:0;
    flex:1 1 auto;
}

/* 12HR / 14DAY: approved 50/50 elongated control row. Existing
   .ws-util-btn sizing/typography is preserved — only the flex
   basis changes so each pill fills half of the available row
   instead of sizing to its own text. */
.weather-expand-controls .ws-hourly-toggle,
.weather-expand-controls .ws-14day-toggle{
    flex:1 1 0;
    min-width:0;
    justify-content:center;
}

.weather-expand-close{
    margin-left:-4px;
}

.weather-expand-close,
#weather-station .location-panel-close{
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border:1px solid var(--glass-border);
    border-radius:999px;
    background:var(--glass);
    color:var(--soft-text);
    cursor:pointer;
    font-family:inherit;
    font-size:13px;
    line-height:1;
}

.weather-expand-close:hover,
#weather-station .location-panel-close:hover{
    background:var(--glass-hover);
    color:var(--text);
}

#weather-station .location-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

#weather-station .location-panel-header .location-panel-title{
    margin-bottom:0;
}

#weather-station .location-panel[hidden],
#weather-station .hourly-expand-panel[hidden],
#weather-station .forecast14-panel[hidden]{
    display:none !important;
}

body.light-mode .weather-expand-panel{
    border-color:var(--glass-border-strong);
}

body.ultra-mode .weather-expand-panel{
    background:transparent;
    border-color:var(--glass-border-strong);
    box-shadow:none;
}

/* ========================================================= */
/* Today Conditions — Tile Chassis                             */
/* .weather-expand-panel (above) is now a plain outline frame —  */
/* no fill, blur, or shadow of its own. Tiles are transparent,    */
/* outline-only too — no fill, blur, or shadow at the tile level   */
/* in any theme, same as before.                                    */
/* Six-column grid: 1.0 tile = 2 columns, 1.5 tile = 3 columns, */
/* so 3x1.0 or 2x1.5 both fill a row exactly. Normal (non-      */
/* dense) grid flow — visual order always matches DOM order.   */
/* ========================================================= */

.condition-tiles{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:var(--tile-gap);
    padding:0 var(--tile-inset);
    margin-top:var(--sp-md);
}

.condition-tile{
    grid-column:span 2;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    background:transparent;
    border:1.5px solid rgba(255,255,255,.32);
    border-radius:var(--radius-medium);
    padding:7px;
}

.condition-tile--wide{
    grid-column:span 3;
}

/* Cloud + Visibility structural support: one continuous 1.5
   tile, internally split left/right by a floating divider that
   does not touch the tile's top or bottom border. Content for
   each half is not designed in this pass. */
.condition-tile--split{
    flex-direction:row;
    align-items:stretch;
}

.condition-tile-split-half{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

/* Approximate 45/55 visual split — Cloud slightly narrower,
   Visibility slightly wider — rather than an exact mathematical
   half/half. Relies on DOM order (half, divider, half), so no
   HTML change is needed. */
.condition-tile-split-half:first-child{
    flex:0 1 45%;
}

.condition-tile-split-half:last-child{
    flex:0 1 55%;
}

.condition-tile-split-divider{
    flex:0 0 auto;
    align-self:center;
    width:1px;
    height:60%;
    margin:0 14px;
    background:var(--glass-border-strong);
}

/* Internal zones. Every zone is optional per-tile — none of
   these are required, and empty space is acceptable. Typography
   only; no icon/gauge/visualization slots are implemented here. */
.condition-tile-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--soft-text);
    /* Combines with .condition-tile's existing 2px flex gap to
       produce a modest space beneath the heading, without widening
       the other internal gaps (value→secondary, etc.), which the
       flex gap alone would do if raised directly. */
    margin-bottom:2px;
}

.condition-tile-value{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    line-height:1.15;
}

.condition-tile-secondary{
    font-size:11px;
    font-weight:500;
    color:var(--soft-text);
    line-height:1.3;
}

.condition-tile-note{
    font-size:11px;
    font-weight:500;
    color:var(--soft-text);
    opacity:.8;
    line-height:1.3;
}

/* Pressure tile's trend arrow (↓/→/↑) — a dedicated element rather
   than a whitespace character in the value string, so the gap is a
   real, deterministic margin instead of relying on font/kerning to
   keep the arrow from reading as visually attached to the number.
   See renderPressureTile() and the daily-detail pressure builder in
   weather.js, both of which now wrap the arrow this way. */
.pressure-trend-arrow{
    margin-left:12px;
}

/* Wind's condition (Light/Moderate/etc.) and Precipitation's amount
   are now folded into the line above them (#wind-gusts and
   #precipitation-probability respectively) as the permanent layout
   for these two tiles — see renderWindTile() and
   renderPrecipitationTile() in weather.js. These two elements are
   kept in the DOM, always empty, rather than removed from the HTML,
   so their ids stay available if a future pass needs to split the
   lines back out. Scoped to these specific ids, not the shared
   .condition-tile-note / .condition-tile-secondary classes, since
   those classes are also used by AQI and other untouched tiles. */
#wind-condition,
#precipitation-amount{
    display:none;
}

body.ultra-mode .condition-tile,
body.ultra-mode .condition-tile-split-divider{
    border-color:var(--ultra-border);
}

body.ultra-mode .condition-tile-split-divider{
    background:var(--ultra-border);
}

@media (max-width:520px){
    .ws-meta-row{
        gap:8px;
    }

    .ws-extended-prompt{
        font-size:calc(.80rem - 1px);
        text-align:right;
    }

    .weather-expand-panel{
        padding:10px 0;
    }

    .weather-expand-header{
        align-items:flex-start;
    }
}

/* ========================================================= */
/* AQI Scale Bar                                               */
/* Authorized addition — compact, always-visible US AQI        */
/* category scale with a position marker for the current       */
/* value. Colors correspond to the six standard US AQI          */
/* categories and must not be changed.                          */
/* ========================================================= */

.aqi-scale-bar{
    position:relative;
    width:100%;
    height:6px;
    margin-top:2px;
    border-radius:999px;
    background:linear-gradient(
        to right,
        #00E400 0%,
        #00E400 16.67%,
        #FFFF00 16.67%,
        #FFFF00 33.33%,
        #FF7E00 33.33%,
        #FF7E00 50%,
        #FF0000 50%,
        #FF0000 66.67%,
        #8F3F97 66.67%,
        #8F3F97 83.33%,
        #7E0023 83.33%,
        #7E0023 100%
    );
    overflow:visible;
}

.aqi-scale-marker{
    position:absolute;
    top:50%;
    left:0;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--text);
    border:1px solid var(--bg);
    transform:translate(-50%,-50%);
    pointer-events:none;
}

/* ========================================================= */
/* UV Scale Bar                                                */
/* Visual scale runs 0–12 (extended past the classification's  */
/* own 11+ Extreme cutoff) solely to give Extreme visible       */
/* width. Text classification in renderUVTile() is unchanged   */
/* and is the sole source of truth for category boundaries.     */
/* ========================================================= */

.uv-scale-bar{
    position:relative;
    width:100%;
    height:8px;
    margin-top:6px;
    border-radius:999px;
    overflow:visible;
    background:linear-gradient(
        to right,
        #18d52f 0%,
        #18d52f 25%,
        #fff000 25%,
        #fff000 50%,
        #ff8a00 50%,
        #ff8a00 66.67%,
        #f00000 66.67%,
        #f00000 91.67%,
        #8e44ad 91.67%,
        #8e44ad 100%
    );
}

.uv-scale-marker{
    position:absolute;
    top:50%;
    left:0;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--bg);
    transform:translate(-50%,-50%);
    pointer-events:none;
}

/* ========================================================= */
/* Severe Weather — Active Alert Treatment + Expansion         */
/* ========================================================= */

.severe-weather-tile.is-active{
    border-color:rgba(255,72,72,.72);
    background:rgba(120,18,28,.14);
    cursor:pointer;
}

.severe-weather-heading{
    display:flex;
    align-items:center;
    gap:7px;
}

.severe-weather-tile.is-active .condition-tile-label,
.severe-weather-icon{
    color:#ff5f63;
}

.severe-weather-icon{
    font-size:17px;
    line-height:1;
}

.severe-weather-details{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
}

.severe-weather-report-section + .severe-weather-report-section{
    margin-top:16px;
}

.severe-weather-report-heading{
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--soft-text);
    margin-bottom:6px;
}

.severe-weather-report-text{
    font-size:13px;
    line-height:1.45;
    color:var(--text);
    white-space:pre-line;
}

/* Restores real hidden behavior: .condition-tile sets an explicit
   display:flex (author rule), which otherwise wins the cascade tie
   against the browser's own [hidden]{display:none} default. Same
   fix already used elsewhere in this file for .location-panel,
   .hourly-expand-panel, and .forecast14-panel. */
#severe-weather-tile[hidden]{
    display:none !important;
}

/* Expanded report spans the full six-column grid width, only while
   both an alert is active AND the tile is currently expanded — a
   collapsed active tile stays at its normal compact width. Normal
   (non-dense) grid flow already pushes later tiles down when this
   item's span changes; no other rule is needed. */
.severe-weather-tile.is-active[aria-expanded="true"]{
    grid-column:span 6;
}

/* Reorders Severe Weather first in grid auto-placement while active,
   without moving anything in the DOM. All other tiles keep the
   default order:0 and their normal relative placement. */
.severe-weather-tile.is-active{
    order:-1;
}

/* ========================================================= */
/* Weather Hero — Severe Alert Icon                            */
/* Compact notification indicator only. Not a banner/ribbon.   */
/* Existing "Tap for extended forecasts" and caret are          */
/* untouched and behave exactly as before.                      */
/* ========================================================= */

.ws-extended-trigger{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 1 auto;
    min-width:0;
}

.hero-severe-alert-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#ff5f63;
    font-size:36px;
    line-height:1;
    padding:0;
    cursor:pointer;
}

.hero-severe-alert-icon[hidden]{
    display:none !important;
}

/* Per-section "Show more" toggle inside the Severe Weather report
   (Affected Area / Details). Stops propagation to the tile's own
   click-to-collapse handler — same pattern already established for
   the (unused this pass) external source link. */
.severe-weather-section-toggle{
    display:inline-block;
    margin-top:8px;
    padding:0;
    border:0;
    background:transparent;
    font-size:12px;
    font-weight:600;
    color:#ff7b7e;
    cursor:pointer;
}

/* ========================================================= */
/* 14DAY Row — Daily Details (expand-in-place)                 */
/* Reuses the existing .condition-tiles/.condition-tile chassis  */
/* (defined above for Today Conditions) rather than introducing   */
/* a second layout system — Daily Details is meant to read as      */
/* "the same design language, applied to a different day," not      */
/* a bolted-on feature. No new tile styling is added here; only     */
/* the row/caret/reveal mechanics specific to the 14DAY list.        */
/* ========================================================= */

/* Bar and its detail sit flush together (no internal gap) so they
   read as one connected unit; .forecast-grid's existing gap still
   separates one day's group from the next. */
.forecast-row-group{
    display:flex;
    flex-direction:column;
}

/* Subtle "this is the open one" cue — not dramatic, just enough
   that the eye reconnects the row with its revealed panel once the
   rest of the list has slid down. Squared-off bottom corners let it
   visually fuse with .daily-detail-inner directly beneath it. */
#weather-station .forecast-bar--expanded{
    border-color:color-mix(in srgb, var(--forecast-daily-accent) 75%, white 25%);
    background:var(--glass-hover);
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

/* Disclosure control — theme-driven, not section-driven. This is an
   interface affordance (like any other expand/collapse control in the
   app), not a piece of weather data, so its color follows the same
   logic as the rest of the UI chrome rather than the 14DAY section's
   own purple accent. */
.forecast-bar-caret{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin:0 -6px 0 auto;
    padding:0;
    border:0;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    flex-shrink:0;
}

body.light-mode .forecast-bar-caret{
    color:var(--blue);
}

body.ultra-mode .forecast-bar-caret{
    color:var(--ultra-t2);
}

/* CSS-drawn chevron (border-corner technique) — no SVG asset, no
   network request, sized a step larger than the row's own text so it
   reads as a deliberate control rather than a stray character.
   Resting = right-facing (▶); open = rotated to down-facing (▼). */
.forecast-bar-caret-icon{
    display:inline-block;
    width:9px;
    height:9px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(-45deg);
    transition:transform .2s ease;
}

.forecast-bar-caret.open .forecast-bar-caret-icon{
    transform:rotate(45deg);
}

/* Height reveal via the CSS grid-rows technique: animating a track
   from 0fr to 1fr avoids ever needing a JS-measured pixel height, and
   handles content of any length (including once future fields widen
   this panel) without further changes. */
.daily-detail-wrap{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows var(--transition-theme);
}

.daily-detail-wrap.open{
    grid-template-rows:1fr;
}

.daily-detail-inner{
    overflow:hidden;
    min-height:0;

    background:var(--glass-hover);
    border:1px solid color-mix(in srgb, var(--forecast-daily-accent) 75%, white 25%);
    border-top:none;
    border-bottom-left-radius:var(--r-sm);
    border-bottom-right-radius:var(--r-sm);
}

body.ultra-mode .daily-detail-inner{
    background:transparent;
    border-color:color-mix(in srgb, var(--forecast-daily-accent) 75%, white 25%);
}

/* The reused .condition-tiles grid needs its own top padding here
   since it's nested inside an already-padded card rather than sitting
   directly under the Weather Expand header. */
.daily-detail-tiles{
    padding-top:var(--sp-md);
    padding-bottom:var(--sp-md);
}