/* ========================================================= */
/* Aurora Station                                             */
/* aurora.css                                                 */
/* PASS 2 — Live NOAA Integration                             */
/* ========================================================= */

/* Aurora-local aliases to the shell tokens — same pattern
   solar.css uses under #solar-station. Only the subset Aurora's
   own rules actually reference. */
#aurora-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);
    --emerald:#2ECC71;
    width:100%;
    max-width:656px;
    padding:0 clamp(10px,3vw,18px);
    margin-left:auto;
    margin-right:auto;
}

/* ── Aurora Utility Bar — 3-column layout ── */
/* Horizontal padding matches .ws-shape's 16px exactly. Vertical
   padding (4px) is untouched — the collapsed bar's height does not
   change. */
.aurora-utility-bar{position:relative;width:100%;background:var(--glass-primary);border:1.5px solid rgba(46,204,113,0.60);border-radius:var(--r-lg);padding:4px 16px 14px;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)}
.aurora-utility-bar:hover{background:var(--glass-primary)}
.aurora-utility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px}
.aurora-col{display:flex;flex-direction:column;align-items:center;gap:1px}
.aurora-col:nth-child(2){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.aurora-col:nth-child(2)::before{content:'';position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(46,204,113,.14);filter:blur(10px);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.aurora-col:nth-child(2) .aurora-icon{display:block;width:50px;height:auto;margin:0 0 0 0;position:relative;z-index:1;}

/* Per-column colors — shared by the collapsed bar's labels. */
.aurora-current{color:#8FE3B0}
.aurora-forecast{color:#2ECC71}

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

/* Center caret — animates on expand/collapse */
#aurora-sky-caret{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);z-index:5;}
#aurora-sky-caret.open .expand-icon{transform:rotate(180deg);}

/* Label / value base styles (collapsed bar's outer columns) */
.aurora-label{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;display:block;white-space:nowrap;line-height:1.2;text-align:center}
.aurora-value{font-size:14px;font-weight:500;color:var(--text);letter-spacing:0;text-align:center;line-height:1.2}

/* Conditions column — Current/Coming lines are longer than the old
   split "KP —" / "— Storm" values ever were (e.g. "Coming: KP 6.0 /
   G2 Storm · 8:00 PM–11:00 PM"). Scoped to just these two ids so
   Your Skies' short "Clouds"/"Visibility" values, which still use the
   shared .aurora-value rule above untouched, aren't affected. Allows
   wrapping instead of overflowing the column, at a touch smaller than
   the shared size so a wrapped two-line value doesn't dominate the
   column or disturb the bar's existing height/icon geometry. */
#station-current-line,
#station-coming-line{
    white-space:normal;
    font-size:12px;
    line-height:1.25;
    max-width:100%;
}

/* ── Aurora Expand Panel ── */
/* Horizontal padding matches .ws-shape's 16px exactly. */
.aurora-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/aurora-dark-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
.aurora-expand-panel.open{display:block}
.aurora-expand-panel .expand-inner{padding:16px}

/* Close affordance — matches the Time/Tides expand-panel X exactly */
.aurora-expand-close-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;padding:0;color:var(--soft);cursor:pointer;font-family:inherit;transition:background var(--transition);z-index:6}
.aurora-expand-close-btn:hover{background:var(--glass-hover)}

/* Local clearance only for the Space Weather heading row, which is
   now the first thing inside .expand-inner and sits directly under
   the enlarged/repositioned close button (32x32 at top:8/right:8).
   .expand-inner's own padding is intentionally left untouched. */
.aurora-sw-heading-row{padding-right:40px}
.aurora-expand-close-btn:focus-visible{outline:2px solid rgba(46,204,113,0.75);outline-offset:2px}

/* ── Sections — one block per expansion item ── */
.aurora-section{display:flex;flex-direction:column;padding:8px 0}
.aurora-section-title{font-size:13px;font-weight:600;letter-spacing:0;color:var(--emerald);margin:0 0 6px}

/* ── Data rows — label/value pairs used across sections ── */
.aurora-data-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:4px 0}
/* Author rules above have equal specificity to the browser's default
   [hidden]{display:none} UA rule, so the native attribute alone isn't
   reliably respected here — same reinforcement already used for
   .aurora-forecast-image/.aurora-map-loading/.aurora-map-error below. */
.aurora-data-row[hidden]{display:none!important}
.aurora-data-label{font-size:13px;font-weight:600;letter-spacing:0;color:var(--soft);white-space:nowrap}
.aurora-data-value{font-size:13px;font-weight:500;color:var(--text);letter-spacing:0;white-space:nowrap}

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

/* ── Section 1: Space Weather grid (replaces the old Current
   Conditions + Approaching Space Weather sections) ── */
.aurora-sw-heading-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.aurora-sw-updated{font-size:11px;color:var(--soft);white-space:nowrap}

/* Item 2 (correction): only the NEW Space Weather section's title
   and story label/link are neutralized — the shared
   .aurora-section-title rule (still emerald) continues to color
   Aurora Forecast/Your Aurora Outlook/Alerts exactly as before. */
#aurora-section-space-weather .aurora-section-title{color:var(--text)}
body.light-mode #aurora-section-space-weather .aurora-section-title{color:#2E3138}
body.ultra-mode #aurora-section-space-weather .aurora-section-title{color:var(--ultra-t2)}

.aurora-sw-grid{display:grid;grid-template-columns:minmax(100px,1.3fr) repeat(4,1fr);column-gap:8px;row-gap:0}

.sw-r1{grid-row:1}.sw-r2{grid-row:2}.sw-r3{grid-row:3}.sw-r4{grid-row:4}.sw-r5{grid-row:5}.sw-r6{grid-row:6}.sw-r7{grid-row:7}.sw-r8{grid-row:8}
.sw-c1{grid-column:1}.sw-c2{grid-column:2}.sw-c3{grid-column:3}.sw-c4{grid-column:4}.sw-c5{grid-column:5}

.aurora-sw-col-header{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 6px;border-bottom:1px solid var(--border-soft)}
.aurora-sw-col-title{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--soft)}
.aurora-sw-col-date{font-size:11px;color:var(--soft);opacity:.75}

.aurora-sw-label-cell{display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;font-weight:600;color:var(--text);border-top:1px solid rgba(191,199,209,0.08)}
.aurora-sw-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--border-soft);font-size:9px;font-weight:700;color:var(--soft);flex-shrink:0}
.aurora-sw-icon-glyph{font-size:11px}
.aurora-sw-label-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sw-r2 .aurora-sw-label-text{color:#5B8CFF}
.sw-r3 .aurora-sw-label-text{color:#73C7F5}
.sw-r4 .aurora-sw-label-text{color:#98A2B3}
.sw-r7 .aurora-sw-label-text{color:#2ECC71}
.sw-r7 .aurora-sw-value{font-size:13px}

/* Divider above Aurora Activity Level, matching the standalone
   .aurora-sw-sep divider used above Current Solar Conditions
   (same height/color/margin), spanning the full grid width. */
.aurora-sw-grid-divider{grid-column:1/-1;width:100%;height:1px;background:rgba(191,199,209,0.22);margin:8px 0}

.aurora-sw-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7px 0;border-top:1px solid rgba(191,199,209,0.08)}
.aurora-sw-cell-dual{flex-direction:row;justify-content:center;gap:10px}
.aurora-sw-value{font-size:16px;font-weight:700;line-height:1.15}
.aurora-sw-value-secondary{font-size:13px}
.aurora-sw-sublabel{display:block;font-size:11px;color:var(--soft);opacity:.85;line-height:1.2}

/* Solar Wind / Bz / Bt only — value and unit on one line, same
   baseline. Scoped to these three cells by their unique row+column
   class combination; does not affect .aurora-sw-sublabel elsewhere
   (G/S/R/Kp forecast-day sublabels like "S1+"/"R1\u2013R2"). Number's
   existing size/weight (.aurora-sw-value) is untouched. */
.aurora-sw-current-row{width:100%;margin-top:10px}
.aurora-sw-current-heading-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.aurora-sw-current-title{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--soft)}
.aurora-sw-current-note{font-size:10px;font-style:italic;font-weight:400;color:var(--soft);opacity:.75}

.aurora-sw-current-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.aurora-sw-current-col{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;padding:4px 0}
.aurora-sw-current-col + .aurora-sw-current-col{border-left:1px solid rgba(191,199,209,0.12)}

.aurora-sw-current-label{font-size:11px;font-weight:600;color:var(--text)}
.aurora-sw-current-reading{display:flex;align-items:baseline;gap:4px}
.aurora-sw-current-value{font-size:15px;font-weight:700;line-height:1.15;color:var(--text)}
.aurora-sw-current-unit{font-size:12px;font-weight:400}

.aurora-sw-sep{width:100%;height:1px;background:rgba(191,199,209,0.22);margin:8px 0}

/* Severity colors — data values only, per locked palette. Category
   labels/icons/headings intentionally stay in the neutral colors
   above and are never touched by these classes. */
.sw-teal{color:#20C0B8}
.sw-gold{color:#F8B800}
.sw-red{color:#F03828}

/* Aurora Activity Level — text-only Kp-derived classification,
   independent palette from the Kp value's own sw-teal/gold/red
   coloring above. */
.aurora-activity-low{color:#F5C518}
.aurora-activity-moderate{color:#B45CFF}
.aurora-activity-high{color:#42E66C}

/* Caption directly below the Space Weather grid, pointing to the
   Aurora Forecast map further down the panel. Sized/colored to
   match the existing muted-caption pattern (.aurora-map-meta). */
.aurora-sw-activity-note{font-size:12px;font-weight:600;color:var(--text);opacity:1;margin:8px 0 0;text-align:center}

/* Forecast story — occupies the TODAY–DAY3 columns beside the
   Solar Wind/Bz/Bt rows (grid lines 3–6 horizontally, 6–9
   vertically). Subtle glass, no hard border, must not extend
   behind or overpower the CURRENT column. */
.aurora-sw-story{width:100%;margin-top:12px;border-radius:var(--r-lg);background:rgba(17,24,43,.32);padding:10px 12px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.aurora-sw-story-label{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--soft)}
.aurora-sw-story-text{font-size:13px;font-weight:400;color:var(--text);line-height:1.45;margin:0}
.aurora-sw-story-text strong{font-weight:700}
.aurora-sw-story-sep{width:100%;height:1px;background:rgba(191,199,209,0.22)}
.aurora-sw-story-source{font-size:10px;color:var(--soft);opacity:.75;margin-top:2px}
.aurora-sw-story-source a{color:var(--soft);text-decoration:none}

/* ── Understanding G · S · R disclosure ── */
.aurora-disclosure-toggle{width:100%;display:flex;align-items:center;gap:8px;background:transparent;border:none;border-top:1px solid var(--border-soft);padding:10px 0;margin-top:6px;cursor:pointer;font-family:inherit;color:var(--text);text-align:left}
.aurora-disclosure-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--border-soft);font-size:10px;font-style:italic;color:var(--soft);flex-shrink:0}
.aurora-disclosure-title{flex:1;font-size:13px;font-weight:600}
.aurora-disclosure-caret{color:var(--soft);transition:transform var(--transition);flex-shrink:0}
.aurora-disclosure-toggle[aria-expanded="true"] .aurora-disclosure-caret{transform:rotate(180deg)}
.aurora-disclosure-body{padding:4px 0 2px}
.aurora-disclosure-body[hidden]{display:none!important}
.aurora-disclosure-body p{font-size:12px;color:var(--soft);line-height:1.6;margin:0 0 8px}
.aurora-disclosure-body p:last-child{margin-bottom:0}
.aurora-disclosure-body strong{color:var(--text)}

/* ── Section 2: Aurora Forecast map ── */
.aurora-map-container{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(46,204,113,0.35);background:transparent}
.aurora-forecast-image{display:block;width:100%;height:auto}
.aurora-map-loading,.aurora-map-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--soft);background:rgba(17,24,43,.75)}
.aurora-forecast-image[hidden],.aurora-map-loading[hidden],.aurora-map-error[hidden]{display:none!important}
.aurora-map-error{color:#E67E7E}
.aurora-map-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--soft);opacity:.75}

/* ── Section 5: Alerts panel ── */
/* Reuses the Forecast Map's exact green border value (rgba(46,204,113,0.35))
   and the same glass fill already used elsewhere in Aurora
   (rgba(17,24,43,.35)) — no new color introduced. */
.aurora-alerts-panel{border:1px solid rgba(46,204,113,0.35);border-radius:var(--r-lg);background:rgba(17,24,43,.35);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.aurora-alerts-top-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.aurora-alerts-title{margin:0}
.aurora-alerts-ondevice{font-size:10px;color:var(--soft);opacity:.75;white-space:nowrap}
.aurora-alerts-panel .aurora-alert-row{border-top:none;padding:0}

.aurora-alert-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--border-soft)}
.aurora-section #aurora-section-alerts .aurora-alert-row:first-of-type{border-top:none}
.aurora-alert-checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer}
.aurora-alert-checkbox{width:16px;height:16px;accent-color:#2ECC71;cursor:pointer}
.aurora-alert-thresholds{gap:16px}
.aurora-alert-threshold-row{align-items:center;justify-content:space-between;gap:12px}
.aurora-alert-threshold{display:flex;flex-direction:column;gap:4px;flex:1 1 140px;min-width:140px}
.aurora-alert-select-label{font-size:11px;font-weight:700;color:var(--soft)}
.aurora-alert-select{background:var(--glass-primary);border:1px solid var(--border-soft);border-radius:8px;padding:6px 8px;font-size:13px;font-weight:500;color:var(--text);font-family:inherit;cursor:pointer}

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

/* ── Light mode ── */
body.light-mode .aurora-expand-panel{background:var(--glass-primary);background-image:none}
body.light-mode .aurora-value{color:#2E3138}
body.light-mode .aurora-data-value{color:#2E3138}
body.light-mode .aurora-sw-value{color:#2E3138}
body.light-mode .aurora-sw-value.sw-teal{color:#20C0B8}
body.light-mode .aurora-sw-value.sw-gold{color:#F8B800}
body.light-mode .aurora-sw-value.sw-red{color:#F03828}
body.light-mode .aurora-sw-story{background:rgba(255,255,255,.55)}
body.light-mode .aurora-sw-story-text{color:#2E3138}
body.light-mode .aurora-sw-story-source,body.light-mode .aurora-sw-col-date,body.light-mode .aurora-sw-sublabel{color:#5B6470}
body.light-mode .aurora-disclosure-body p{color:#5B6470}
body.light-mode .aurora-disclosure-body strong{color:#2E3138}
body.light-mode .aurora-map-container{background:transparent}
body.light-mode .aurora-map-loading,body.light-mode .aurora-map-error{background:rgba(255,255,255,.85);color:#5B6470}
body.light-mode .aurora-map-meta{color:#5B6470}
body.light-mode .aurora-alert-checkbox-label{color:#2E3138}
body.light-mode .aurora-alert-select{color:#2E3138;border-color:var(--border-soft)}
body.light-mode .aurora-alert-select-label{color:#5B6470}
body.light-mode .aurora-alerts-panel{background:rgba(255,255,255,.55)}

/* ── Ultra mode ── */
body.ultra-mode .aurora-expand-panel{background:rgba(0,0,0,0.92)}
body.ultra-mode .aurora-label{color:var(--ultra-t3);opacity:1}
body.ultra-mode .aurora-value{color:var(--ultra-t2)}
body.ultra-mode .aurora-data-value{color:var(--ultra-t2)}
body.ultra-mode .aurora-sw-value{color:var(--ultra-t2)}
body.ultra-mode .aurora-sw-value.sw-teal{color:#20C0B8}
body.ultra-mode .aurora-sw-value.sw-gold{color:#F8B800}
body.ultra-mode .aurora-sw-value.sw-red{color:#F03828}
body.ultra-mode .aurora-sw-story{background:rgba(0,0,0,.6)}
body.ultra-mode .aurora-sw-story-text{color:var(--ultra-t2)}
body.ultra-mode .aurora-sw-story-source,body.ultra-mode .aurora-sw-col-date,body.ultra-mode .aurora-sw-sublabel{color:var(--ultra-t3)}
body.ultra-mode .aurora-disclosure-body p{color:var(--ultra-t3)}
body.ultra-mode .aurora-disclosure-body strong{color:var(--ultra-t2)}
body.ultra-mode .aurora-map-container{background:rgba(0,0,0,.6);border-color:var(--ultra-border)}
body.ultra-mode .aurora-map-loading,body.ultra-mode .aurora-map-error{background:rgba(0,0,0,.85);color:var(--ultra-t3)}
body.ultra-mode .aurora-map-meta{color:var(--ultra-t3)}
body.ultra-mode .aurora-alert-checkbox-label{color:var(--ultra-t2)}
body.ultra-mode .aurora-alert-row{border-color:var(--ultra-border)}
body.ultra-mode .aurora-alert-select{color:var(--ultra-t2);border-color:var(--ultra-border);background:rgba(0,0,0,.4)}
body.ultra-mode .aurora-alert-select-label{color:var(--ultra-t3)}
body.ultra-mode .aurora-alerts-panel{background:rgba(0,0,0,.6);border-color:var(--ultra-border)}

.aurora-sw-story-text strong.sw-cat-geo{color:#5B8CFF}
.aurora-sw-story-text strong.sw-cat-solar{color:#73C7F5}
.aurora-sw-story-text strong.sw-cat-radio{color:#98A2B3}

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

    .aurora-label{
        font-size:12px;
    }

    .aurora-value{
        font-size:12px;
    }

    .aurora-sw-grid{
        grid-template-columns:minmax(72px,1fr) repeat(4,1fr);
        column-gap:4px;
    }

    .aurora-sw-value{
        font-size:13px;
    }

    .aurora-sw-value-secondary{
        font-size:11px;
    }

    .aurora-sw-cell-dual{
        gap:6px;
    }

    .aurora-sw-label-text{
        font-size:11px;
    }

    .aurora-sw-story-text{
        font-size:12px;
    }

}

@media (max-width:390px){

    .aurora-label{
        font-size:11px;
    }

    .aurora-value{
        font-size:11px;
    }

    #station-current-line,
    #station-coming-line{
        font-size:10.5px;
    }

    .aurora-sw-grid{
        grid-template-columns:minmax(60px,1fr) repeat(4,1fr);
    }

    .aurora-sw-value{
        font-size:11.5px;
    }

    .aurora-sw-sublabel{
        font-size:9px;
    }

    .aurora-sw-col-title{
        font-size:10px;
    }

}