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

/* Aurora-local aliases to the Lumo 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;
    /* Card width — matches #solar-station exactly. Deliberately kept
       local to Aurora rather than lifted into the shared .station rule
       for now; revisit once more stations exist and this proves out
       as the standard everywhere, not just here. */
    width:100%;
    max-width:580px;
    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;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:flex-start;padding-top:0;}
.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:-14px;transform:translateX(-50%);z-index:5;}
#aurora-sky-caret.open .ll-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}

/* ── Aurora Expand Panel ── */
/* Horizontal padding matches .ws-shape's 16px exactly. */
.aurora-expand-panel{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}
.expand-inner{padding:12px 16px 10px}

/* ── 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}
.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: Approaching Space Weather card ── */
.aurora-card{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:rgba(17,24,43,.35);padding:10px 12px;display:flex;flex-direction:column}
.aurora-card .aurora-data-row{padding:3px 0}
.aurora-card-summary{font-size:11px;color:var(--soft);line-height:1.6;margin:8px 0 0}

/* ── 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:10px;color:var(--soft);opacity:.75}

/* ── Section 3: Your Aurora Outlook panel ── */
.aurora-outlook-panel{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:rgba(17,24,43,.35);padding:10px 12px;display:flex;flex-direction:column}
.aurora-outlook-panel .aurora-data-row{padding:3px 0}
.aurora-outlook-rating{font-size:13px;font-weight:700;letter-spacing:0;padding:2px 10px;border-radius:999px}
.aurora-outlook-rating.outlook-strong{background:rgba(46,204,113,0.22);color:#2ECC71;border:1px solid rgba(46,204,113,0.55)}
.aurora-outlook-rating.outlook-possible{background:rgba(46,204,113,0.12);color:#8FE3B0;border:1px solid rgba(46,204,113,0.35)}
.aurora-outlook-rating.outlook-unlikely{background:rgba(191,199,209,0.10);color:var(--soft);border:1px solid var(--border-soft)}
.aurora-outlook-rating.outlook-pending{background:rgba(191,199,209,0.08);color:var(--soft);border:1px dashed var(--border-soft);font-style:italic}

/* ── Section 5: Alerts controls ── */
.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{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:rgba(232,225,245,.72);background-image:linear-gradient(rgba(232,225,245,.55),rgba(232,225,245,.55)),url("assets/aurora-light-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
body.light-mode .aurora-value{color:#2E3138}
body.light-mode .aurora-data-value{color:#2E3138}
body.light-mode .aurora-card{background:rgba(255,255,255,.55);border-color:var(--border-soft)}
body.light-mode .aurora-card-summary{color:#5B6470}
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-outlook-panel{background:rgba(255,255,255,.55);border-color:var(--border-soft)}
body.light-mode .aurora-outlook-rating.outlook-unlikely{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}

/* ── 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-card{background:rgba(0,0,0,.6);border-color:var(--ultra-border)}
body.ultra-mode .aurora-card-summary{color:var(--ultra-t3)}
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-outlook-panel{background:rgba(0,0,0,.6);border-color:var(--ultra-border)}
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)}

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

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

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

}

@media (max-width:390px){

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

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

}