/* ========================================================= */
/* Solar Station                                              */
/* solar.css                                                  */
/* ========================================================= */

/* Local aliases to the shell tokens. Only the subset Solar's own
   rules actually reference. */
#solar-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);
    width:100%;
    max-width:580px;
    padding:0;
    margin-left:auto;
    margin-right:auto;
}

/* ── Solar Utility Bar — 5-column layout ── */
#solar-station .solar-utility-bar{position:relative;width:100%;background:var(--glass-primary);border:1.5px solid rgba(212,175,55,0.60);border-radius:var(--r-lg);padding:4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background var(--transition)}
#solar-station .solar-utility-bar:hover{background:var(--glass-primary)}
#solar-station .solar-utility-grid{position:relative;width:100%;height:58px;margin-top:8px;margin-bottom:8px}
#solar-station .solar-col{position:absolute;top:50%;display:flex;flex-direction:column;align-items:center;gap:1px;transform:translate(-50%,-50%);white-space:nowrap}
#solar-station .solar-col:nth-child(1){left:14%}
#solar-station .solar-col:nth-child(2){left:32%}
#solar-station .solar-col:nth-child(3){left:50%;justify-content:center;padding-top:0;}
#solar-station .solar-col:nth-child(3)::before{content:'';position:absolute;width:56px;height:56px;border-radius:50%;background:rgba(212,175,55,.14);filter:blur(10px);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
#solar-station .solar-col:nth-child(3) .solar-icon{display:block;width:58px;height:58px;margin:0;position:relative;z-index:1;}
#solar-station .solar-col:nth-child(4){left:68%}
#solar-station .solar-col:nth-child(5){left:86%}

/* Per-event colors — shared by the collapsed bar's labels AND the
   expanded row list's event names (same classes, reused directly). */
#solar-station .solar-dawn{color:#B89AD8}
#solar-station .solar-sunrise{color:#F2D36B}
#solar-station .solar-golden{color:#D6A542}
#solar-station .solar-sunset{color:#E26D3F}
#solar-station .solar-blue{color:#4D9CFF}
#solar-station .solar-dusk{color:#7868C8}

#solar-station .solar-icon{width:50px;height:auto;opacity:.95;display:block;margin:0 auto}

#solar-station #solar-sky-caret{position:absolute;left:50%;bottom:-23px;transform:translateX(-50%);z-index:5;}
#solar-station #solar-sky-caret.open .expand-icon{transform:rotate(180deg);}

#solar-station .solar-label{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;display:block;white-space:nowrap;line-height:1.2;text-align:left}
#solar-station .solar-time{font-size:14px;font-weight:500;color:var(--text);letter-spacing:0;text-align:center;line-height:1.2}

/* ── Solar Expand Panel ── */
#solar-station .solar-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);background-image:linear-gradient(rgba(17,24,43,.55),rgba(17,24,43,.55)),url("assets/solar-dark-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
#solar-station .solar-expand-panel.open{display:block}
#solar-station .expand-inner{padding:12px 16px 10px}

#solar-station .solar-expand-close-btn{position:absolute;top:2px;right:6px;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)}
#solar-station .solar-expand-close-btn:hover{color:var(--ultra-t2)}
#solar-station .solar-expand-close-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* ── Event list — one row per event ── */
#solar-station .solar-event-list{display:flex;flex-direction:column}
#solar-station .solar-event-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0}
#solar-station .solar-event-icon{width:28px;height:28px;flex-shrink:0;display:block;object-fit:contain}
#solar-station .solar-event-main{display:flex;align-items:baseline;gap:8px;flex:1 1 auto;min-width:0}
#solar-station .solar-event-name{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap}
#solar-station .solar-event-time{font-size:13px;font-weight:500;color:var(--text);letter-spacing:0;white-space:nowrap}

/* CSS-only horizon mark (Dawn/Dusk) — no image asset. Sized to match
   .solar-event-icon so all six rows align identically. */
#solar-station .solar-horizon-mark{position:relative;width:28px;height:28px;flex-shrink:0}
#solar-station .solar-horizon-mark::before{content:'';position:absolute;left:50%;top:6px;width:16px;height:16px;margin-left:-8px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}
#solar-station .solar-horizon-mark::after{content:'';position:absolute;left:2px;right:2px;top:14px;height:1.5px;background:currentColor}
#solar-station .solar-horizon-mark.solar-dawn::before{clip-path:inset(0 0 50% 0)}
#solar-station .solar-horizon-mark.solar-dusk::before{clip-path:inset(50% 0 0 0)}

/* Favorite star — outline when unselected, filled when selected via
   aria-pressed. Leading element in every row (see solar.html). */
#solar-station .solar-fav-btn{background:none;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
#solar-station .solar-fav-btn[aria-pressed="true"] .solar-fav-star{fill:currentColor}
#solar-station .solar-fav-btn:disabled{opacity:.35;cursor:default}

#solar-station .expand-solar-sep{width:100%;height:1px;background:rgba(191,199,209,0.12);margin:2px 0}

/* Sits as its own full-width element below each event's row, not
   nested inside it. */
#solar-station .expand-alarm{border-top:1px solid var(--border-soft);padding-top:10px;margin-top:2px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#solar-station .expand-alarm-lbl{font-size:11px;font-weight:700;color:var(--soft);white-space:nowrap;min-width:170px;flex:0 0 auto}
#solar-station .expand-alarm-lbl--gold{color:var(--gold)}
#solar-station .expand-alarm-lbl--blue{color:var(--blue)}
#solar-station .expand-timing-opts{display:flex;align-items:center;gap:6px}

#solar-station .sky-timing-btn{background:var(--glass-primary);border:1px solid var(--border-soft);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:600;color:var(--soft);cursor:pointer;font-family:inherit;transition:all 0.15s}
#solar-station .sky-timing-btn.sel{background:rgba(212,175,55,0.15);border-color:rgba(212,175,55,0.55);color:rgba(212,175,55,0.95)}

/* Only the gold and blue variants are included — the only two
   Solar's markup uses. */
#solar-station .tog{position:relative;width:44px;height:25px;flex-shrink:0}
#solar-station .tog input{opacity:0;width:0;height:0;position:absolute}
#solar-station .tog-track{position:absolute;inset:0;border-radius:999px;background:#4A4F59;border:1.5px solid rgba(255,255,255,.18);cursor:pointer;transition:all 0.22s}
#solar-station .tog-track::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:#B7BCC8;top:2px;left:2px;transition:all 0.22s}
#solar-station .tog.gold input:checked+.tog-track{background:rgba(212,175,55,0.22);border-color:rgba(212,175,55,0.55)}
#solar-station .tog.gold input:checked+.tog-track::after{transform:translateX(19px);background:#D4AF37}
#solar-station .tog.blue input:checked+.tog-track{background:rgba(77,163,255,0.22);border-color:rgba(77,163,255,0.55)}
#solar-station .tog.blue input:checked+.tog-track::after{transform:translateX(19px);background:#4DA3FF}

#solar-station .field-tip-toggle{appearance:none;background:transparent;border:1px solid var(--border-soft);border-radius:999px;padding:4px 11px;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--soft);cursor:pointer;font-family:inherit;transition:all 0.15s;flex-shrink:0}
#solar-station .field-tip-toggle:hover{background:var(--glass-hover)}
#solar-station .field-tip-body{display:none;padding:0 0 10px}
#solar-station .field-tip-body.open{display:block}
#solar-station .field-tip-text{font-size:11px;color:var(--soft);line-height:1.6;margin:0}

#solar-station .expand-disclaimer{font-size:10px;color:var(--soft);opacity:0.65;margin:8px 0 0;text-align:center}
#solar-station .expand-disclaimer a{text-decoration:none;color:var(--gold)}

/* ── Light mode ── */
body.light-mode #solar-station .solar-expand-panel{
    background:transparent;
    background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url("assets/solar-light-bg.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
body.light-mode #solar-station .solar-time{color:#2E3138}
body.light-mode #solar-station .solar-event-time{color:#2E3138}
body.light-mode #solar-station .sky-timing-btn{border-color:var(--border-soft);color:#5B6470}
body.light-mode #solar-station .sky-timing-btn.sel{background:rgba(45,125,246,0.12);border-color:rgba(45,125,246,0.35);color:#2E3138}
body.light-mode #solar-station .field-tip-toggle{border-color:var(--border-soft);color:#5B6470}

/* ── Ultra mode ── */
#solar-station .solar-station-label{display:none}
body.ultra-mode #solar-station .solar-utility-bar{background:#050101;border-color:#321312}
body.ultra-mode #solar-station .solar-utility-bar:hover{background:#050101}
body.ultra-mode #solar-station .solar-col:nth-child(3)::before{content:none}
body.ultra-mode #solar-station .solar-col:nth-child(3) .solar-icon{display:none}
body.ultra-mode #solar-station .solar-station-label{display:block;font-size:18px;font-weight:750;letter-spacing:.10em;line-height:1;color:#702A27;text-align:center}
body.ultra-mode #solar-station .solar-expand-panel{background:#050101;border-color:#321312}
body.ultra-mode #solar-station .solar-label{color:#642723}
body.ultra-mode #solar-station .solar-time{color:#9A403A}
body.ultra-mode #solar-station .solar-event-time{color:#9A403A}
body.ultra-mode #solar-station .solar-dawn,
body.ultra-mode #solar-station .solar-sunrise,
body.ultra-mode #solar-station .solar-golden,
body.ultra-mode #solar-station .solar-sunset,
body.ultra-mode #solar-station .solar-blue,
body.ultra-mode #solar-station .solar-dusk{color:#642723}
body.ultra-mode #solar-station .solar-expand-close-btn{color:#642723}
body.ultra-mode #solar-station .solar-expand-close-btn:hover{color:#8A302B}
body.ultra-mode #solar-station .solar-expand-close-btn:focus-visible{outline:2px solid #8A302B;outline-offset:1px}
body.ultra-mode #solar-station .solar-event-icon{display:none}
body.ultra-mode #solar-station .solar-horizon-mark{display:none}
body.ultra-mode #solar-station .solar-fav-btn[aria-pressed="true"] .solar-fav-star{color:#8A302B}
body.ultra-mode #solar-station .solar-fav-btn:disabled{opacity:1;color:#3D1917}
body.ultra-mode #solar-station .sky-timing-btn{border-color:#321312;color:#642723}
body.ultra-mode #solar-station .sky-timing-btn.sel{background:#8A302B;border-color:#8A302B;color:#000000}
body.ultra-mode #solar-station .expand-alarm-lbl{color:#642723}
body.ultra-mode #solar-station .field-tip-toggle{border-color:#321312;color:#642723}
body.ultra-mode #solar-station .field-tip-toggle:hover{background:#090202}
body.ultra-mode #solar-station .field-tip-text{color:#642723}
body.ultra-mode #solar-station .expand-disclaimer a{color:#642723}
body.ultra-mode #solar-station .expand-solar-sep{background:#26100F}
body.ultra-mode #solar-station #solar-sky-caret .expand-icon path{stroke:#642723}

body.ultra-mode #solar-station .tog-track{background:#090202;border-color:#321312}
body.ultra-mode #solar-station .tog-track::after{background:#642723}
body.ultra-mode #solar-station .tog.gold input:checked+.tog-track,
body.ultra-mode #solar-station .tog.blue input:checked+.tog-track{background:#8A302B;border-color:#8A302B}
body.ultra-mode #solar-station .tog.gold input:checked+.tog-track::after,
body.ultra-mode #solar-station .tog.blue input:checked+.tog-track::after{background:#000000}

/* ── Mobile refinement ── */
@media (max-width:520px){

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

    #solar-station .solar-label{
        font-size:12px;
    }

    #solar-station .solar-time{
        font-size:12px;
    }

}

@media (max-width:390px){

    #solar-station .solar-label{
        font-size:11px;
    }

    #solar-station .solar-time{
        font-size:11px;
    }

}