/* ========================================================= */
/* WhatPhase Homepage                                          */
/* styles.css                                                 */
/* COMPLETE FILE                                              */
/* Bold Homepage Shell Geometry                               */
/* ========================================================= */

:root{

    --bg:#05070A;
    --text:#F5F6F8;
    --soft-text:rgba(245,246,248,.74);

    --gold:#D6A542;
    --blue:#7A81E2;

    --glass:rgba(10,14,22,.46);
    --glass-hover:rgba(16,21,32,.60);

    --glass-border:rgba(255,255,255,.10);
    --glass-border-strong:rgba(255,255,255,.20);

    --page-max-width:760px;

    --page-gutter-desktop:18px;
    --page-gutter-mobile:14px;

    --radius-small:10px;
    --radius-medium:14px;
    --radius-large:16px;
    --radius-pill:999px;

    --shadow-large:0 14px 36px rgba(0,0,0,.48);

    --transition-fast:.15s ease;
    --transition-standard:.20s ease;
    --transition-theme:.28s ease;
    --transition-drawer:.32s cubic-bezier(.4,0,.2,1);

    --header-side-column:48px;

    --station-gap:18px;

    --drawer-width:min(300px,88vw);

}

/* ========================================================= */
/* Reset                                                       */
/* ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    min-height:100%;

    background:var(--bg);

}

body{

    min-height:100vh;

    font-family:"Montserrat",sans-serif;

    color:var(--text);
    background:var(--bg);

    overflow-x:hidden;

    transition:
        background-color var(--transition-theme),
        color var(--transition-theme);

}

body.menu-open{

    overflow:hidden;

}

button,
input,
select,
textarea{

    font:inherit;

}

button{

    -webkit-tap-highlight-color:transparent;

}

img{

    max-width:100%;

}

/* ========================================================= */
/* Themes                                                      */
/* ========================================================= */

body.light-mode{

    --bg:#EEF4FA;
    --text:#253043;
    --soft-text:rgba(37,48,67,.72);

    --glass:rgba(255,252,248,.72);
    --glass-hover:rgba(255,254,251,.90);

    --glass-border:rgba(120,105,85,.14);
    --glass-border-strong:rgba(120,105,85,.26);

    --shadow-large:0 14px 36px rgba(60,48,36,.13);

}

body.ultra-mode{

    --bg:#000000;
    --text:#81332F;
    --soft-text:#642723;

    --gold:#8A302B;
    --blue:#8A302B;

    --glass:#090202;
    --glass-hover:rgba(138,48,43,.08);

    --glass-border:#321312;
    --glass-border-strong:#481A18;

    --shadow-large:none;

}

/* ========================================================= */
/* Permanent Page Background                                  */
/* ========================================================= */

.page-background{

    position:fixed;

    inset:0;

    z-index:0;

    overflow:hidden;

    pointer-events:none;

    background:var(--bg);

}

.page-background-image{

    position:absolute;

    inset:0;

    background-image:url("assets/hp-dark-bg.webp");

    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;

    opacity:1;

    transform:scale(1.002);

    transition:
        opacity var(--transition-theme),
        filter var(--transition-theme);

}

body.light-mode .page-background-image{

    background-image:url("assets/hp-light-bg.webp");

}

body.ultra-mode .page-background-image{

    opacity:0;

}

/* ========================================================= */
/* Permanent Page Geometry                                    */
/* ========================================================= */

.page-shell{

    position:relative;
    z-index:1;

    width:min(var(--page-max-width),100%);

    margin:0 auto;

    padding:
        8px
        var(--page-gutter-desktop)
        32px;

}

/* ========================================================= */
/* Header                                                      */
/* ========================================================= */

.app-header{

    width:100%;

    display:flex;
    flex-direction:column;

    gap:0;

    margin-bottom:14px;

    padding-top:20px;

}

/* ========================================================= */
/* Header Brand Row                                            */
/* 72px | flexible center | 72px                               */
/* ========================================================= */

.header-row{

    width:100%;

    display:grid;

    grid-template-columns:
        var(--header-side-column)
        minmax(0,1fr)
        var(--header-side-column);

    align-items:center;

    min-height:76px;

}

.header-brand{

    position:relative;

    min-width:0;

    padding-top:8px;

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

    overflow:visible;

}

/* ========================================================= */
/* Cairn Menu                                                  */
/* ========================================================= */

.menu-button{

    position:relative;

    width:51px;
    height:51px;

    border:0;
    border-radius:var(--radius-pill);

    background:transparent;

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

    padding:0;

    cursor:pointer;

    overflow:hidden;

    transition:
        opacity var(--transition-standard),
        filter var(--transition-standard);

}

.menu-button::after{

    content:"";

    position:absolute;

    inset:-20%;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.08) 35%,
            rgba(255,255,255,.22) 50%,
            rgba(255,255,255,.08) 65%,
            rgba(255,255,255,0) 100%
        );

    width:26%;
    left:-40%;
    top:-10%;
    height:120%;

    transform:skewX(-18deg);

    opacity:0;

    pointer-events:none;

}

.menu-button:hover::after{

    animation:cairnShimmer 1300ms ease-out 1;

}

@keyframes cairnShimmer{

    0%{

        left:-40%;
        opacity:0;

    }

    15%{

        opacity:.9;

    }

    100%{

        left:140%;
        opacity:0;

    }

}

.menu-button:focus-visible{

    outline:2px solid var(--gold);
    outline-offset:5px;

}

.menu-button img{

    display:block;

    width:46px;
    height:46px;

    max-width:none;

    object-fit:contain;

    transition:
        opacity var(--transition-theme),
        filter var(--transition-theme);

}

body.ultra-mode .menu-button img{

    display:none;

}

body.ultra-mode .menu-button::after{

    content:"MENU";

    position:static;
    inset:auto;
    left:auto;
    top:auto;
    width:auto;
    height:auto;
    transform:none;
    background:none;
    opacity:1;
    pointer-events:none;

    font-family:"Montserrat",sans-serif;
    font-weight:700;
    font-size:11px;
    letter-spacing:.04em;

    color:var(--text);

}

/* ========================================================= */
/* Wordmark                                                    */
/* ========================================================= */

.wordmark{

    display:block;

    width:620px;
    height:auto;

    max-width:none;

    object-fit:contain;

    transform:none;

    position:relative;
    z-index:2;

    transition:
        opacity var(--transition-theme),
        filter var(--transition-theme);

}

body.ultra-mode .wordmark{

    filter: grayscale(1) brightness(.30) sepia(1) hue-rotate(-45deg) saturate(2.5) contrast(1.1);

}

body.ultra-mode .header-row{

    min-height:0;

}

/* Notation line — spans the full header-row grid width. The grid's
   3 columns are already filled by the spacer div + .header-brand in
   row 1, so a 3-column-spanning item can't fit there; Grid's default
   auto-placement pushes it to a new implicit row automatically,
   landing it directly under WHATPHASE with no HTML changes. */
body.ultra-mode .header-row::after{

    content:"ULTRA is optimized for low-light field use. Only field-relevant information and controls are shown.";

    grid-column:1 / -1;

    font-family:"Montserrat",sans-serif;
    font-weight:500;
    font-size:14px;
    line-height:1.4;
    letter-spacing:.01em;

    color:#642723;

    text-align:center;

    padding:4px 24px 0;
    margin-top:24px;
    margin-bottom:-24px;

}

/* ========================================================= */
/* Toolbar                                                     */
/* ========================================================= */

.toolbar-row{

    width:min(520px,100%);

    margin:
        72px
        auto
        0;

    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:end;

    column-gap:22px;

}

.utility-group{

    display:flex;

    align-items:flex-end;

    gap:10px;

}

.theme-controls{

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

    gap:3px;

    width:max-content;

    flex-shrink:0;

}

.theme-button{

    width:39px;
    height:39px;

    border:0;

    background:none;

    color:var(--soft-text);

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

    padding:0;

    cursor:pointer;

    font-size:17px;
    font-weight:500;
    line-height:1;

    transition:
        transform var(--transition-fast),
        color var(--transition-standard);

}

.theme-button:hover{

    transform:translateY(-2px);

}

#theme-light{

    font-size:26px;

}

.theme-button.icon-sun{
    color:#F2D27A;
}

.theme-button.icon-moon,
.theme-button.icon-star{
    color:#F7F8FB;
}

body.light-mode .theme-button.icon-sun{
    color:#9A6A12;
}

body.light-mode .theme-button.icon-moon,
body.light-mode .theme-button.icon-star{
    color:#15181D;
}

.theme-button:active{

    transform:translateY(0) scale(.97);

}

.theme-button:focus-visible{

    outline:2px solid var(--gold);
    outline-offset:3px;

}

.theme-button.active{

    color:var(--gold);

}

body.light-mode .theme-button.active{

    color:var(--gold);

}

body.ultra-mode .theme-button{

    box-shadow:none;

}

body.ultra-mode .theme-button.icon-sun,
body.ultra-mode .theme-button.icon-moon,
body.ultra-mode .theme-button.icon-star{

    color:var(--soft-text);

}

body.ultra-mode .theme-button.active{

    color:rgba(138,48,43,.78);

    border-color:rgba(138,48,43,.45);

}

.date-time{

    min-width:0;

    margin-right:0;

    align-self:end;

    padding-bottom:7px;

    color:var(--text);

    font-size:14px;
    font-weight:600;

    line-height:1.25;

    letter-spacing:.025em;

    text-align:right;

    white-space:nowrap;

    text-shadow:0 1px 4px rgba(0,0,0,.44);

    transition:
        color var(--transition-theme),
        opacity var(--transition-theme);

}

body.light-mode .date-time{

    text-shadow:none;

}

/* Ultra date-time dimming removed — --text is now readable on its
   own (see body.ultra-mode token fix above); no universal opacity
   override is applied per the frozen ULTRA decisions. */

/* ========================================================= */
/* Main Station Framework                                      */
/* ========================================================= */

.app-main,
#stations{

    width:100%;

    min-height:40vh;

}

#stations{

    display:flex;
    flex-direction:column;

    gap:var(--station-gap);

}

.station{

    width:100%;

    min-width:0;

}

/* ========================================================= */
/* Station Loader — shared failure state                       */
/* Used by any Station fragment that fails to fetch or         */
/* initialize (see loadWeatherStation() in main.js). Isolated  */
/* per-Station: one Station's failure never affects another.   */
/* ========================================================= */

.station-error{

    width:100%;

    padding:14px 16px;

    border-radius:var(--radius-medium);

    border:1px solid var(--glass-border);

    background:var(--glass);

    color:var(--soft-text);

    font-size:13px;
    font-weight:500;

    text-align:center;

}

/* ========================================================= */
/* Menu Drawer                                                 */
/* Ported mechanism from the legacy site's settings panel,     */
/* restyled to the WhatPhase glass/gold design language.        */
/* Shell only today — no drawer content wired up yet.          */
/* ========================================================= */

.menu-drawer-overlay{

    position:fixed;

    inset:0;

    z-index:300;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:
        opacity var(--transition-standard),
        visibility 0s linear var(--transition-standard);

}

.menu-drawer-overlay.open{

    opacity:1;
    visibility:visible;

    transition:
        opacity var(--transition-standard),
        visibility 0s linear;

}

.menu-drawer{

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    width:var(--drawer-width);

    z-index:400;

    display:flex;
    flex-direction:column;

    background:var(--bg);
    border-right:1px solid var(--glass-border-strong);

    box-shadow:var(--shadow-large);

    padding:22px 20px;

    transform:translateX(-105%);

    transition:transform var(--transition-drawer);

    overflow-y:auto;

}

.menu-drawer.open{

    transform:translateX(0);

}

.menu-drawer-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:20px;

}

.menu-drawer-title{

    display:flex;
    align-items:center;
    gap:9px;

    font-size:15px;
    font-weight:700;

    letter-spacing:.02em;

    color:var(--text);

}

body.ultra-mode .menu-drawer-title img{

    display:none;

}

.menu-drawer-close{

    width:30px;
    height:30px;

    border-radius:var(--radius-pill);

    border:1px solid var(--glass-border);
    background:var(--glass);
    color:var(--soft-text);

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

    cursor:pointer;

    font-size:14px;
    line-height:1;

    transition:
        background var(--transition-standard),
        color var(--transition-standard),
        border-color var(--transition-standard);

}

.menu-drawer-close:hover{

    background:var(--glass-hover);
    color:var(--text);
    border-color:var(--glass-border-strong);

}

.menu-drawer-close:focus-visible{

    outline:2px solid var(--gold);
    outline-offset:2px;

}

.menu-drawer-body{

    flex:1;

    font-size:13px;

    color:var(--soft-text);

    line-height:1.6;

    display:flex;
    flex-direction:column;

}

body.ultra-mode .menu-drawer{

    background:#000;
    border-color:var(--glass-border);

}

/* ========================================================= */
/* Settings Panel (Drawer) — Display / Units / Time / Date     */
/* Reuses existing WhatPhase tokens (glass, gold, radius, transition)*/
/* but is sized for text labels rather than the circular        */
/* .theme-button pattern used by the header controls.           */
/* ========================================================= */

.settings-section{

    margin-bottom:18px;

}

.settings-section:last-child{

    margin-bottom:0;

}

/* ── Cyan, the field companion ──
   Sits at the bottom of the menu drawer's unused lower space —
   margin-top:auto pushes it down only as far as there's genuinely
   leftover room (menu-drawer-body is now a flex column specifically
   to enable this), so it never overlaps the settings sections above
   it even on a short viewport; this is real layout flow, not an
   absolute-positioned overlay. Restrained by design: no card, no
   flourish, no copy beyond what's specified. */
.cyan-companion{

    margin-top:auto;
    padding-top:20px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

}

.cyan-companion-image{

    width:130px;
    height:auto;
    display:block;
    margin:0 0 10px;

}

.cyan-companion-title{

    font-size:14px;
    font-weight:600;
    line-height:1.4;
    color:var(--text);
    margin:0 0 10px;

}

.cyan-companion-subtitle{

    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--soft-text);
    margin:0 0 6px;

}

.cyan-companion-copy{

    font-size:14px;
    font-style:italic;
    line-height:1.6;
    color:var(--soft-text);
    margin:0;
    padding:0 8px;

}

/* Ultra: remove Cyan mascot art and character-framing copy, keep
   the actual off-grid safety reminder as plain readable field
   information (no quote styling, no character voice). */
body.ultra-mode .cyan-companion-image,
body.ultra-mode .cyan-companion-title,
body.ultra-mode .cyan-companion-subtitle{

    display:none;

}

body.ultra-mode .cyan-companion-copy{

    font-style:normal;
    color:var(--text);
    padding:0;

}

.settings-label{

    font-size:12px;
    font-weight:600;

    letter-spacing:.04em;
    text-transform:uppercase;

    color:var(--soft-text);

    margin-bottom:8px;

}

.settings-option-row{

    display:flex;
    flex-wrap:wrap;

    gap:8px;

}

.settings-option{

    flex:1 1 auto;

    padding:8px 14px;

    border-radius:var(--radius-small);

    border:1px solid var(--glass-border);
    background:var(--glass);
    color:var(--soft-text);

    font-size:13px;
    white-space:nowrap;

    cursor:pointer;

    transition:
        color var(--transition-standard),
        background var(--transition-standard),
        border-color var(--transition-standard);

}

.settings-option:hover{

    background:var(--glass-hover);
    border-color:var(--glass-border-strong);
    color:var(--text);

}

.settings-option:active{

    transform:scale(.98);

}

.settings-option:focus-visible{

    outline:2px solid var(--gold);
    outline-offset:2px;

}

.settings-option.active{

    color:var(--text);

    border-color:var(--gold);
    background:var(--glass-hover);

}

body.ultra-mode .settings-option{

    background:rgba(0,0,0,.76);

}

/* ========================================================= */
/* Homepage CTA — Celestial Calendar / My Trips                */
/* Cinematic billboard implementation. Locked visual spec —    */
/* values below are fixed, not derived. Mobile 440px-height    */
/* issue intentionally NOT addressed in this pass.             */
/* ========================================================= */

.wp-cta{
    width:100%;
    max-width:574px;
    margin:0 auto 8px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.wp-cta-btn{
    position:relative;
    width:100%;
    height:440px;
    border-radius:16px;
    box-sizing:border-box;
    overflow:hidden;
    font-family:inherit;
    cursor:pointer;
    border:1.5px solid #28B8B0;
    box-shadow:0 0 8px rgba(0,255,255,.28), 0 5px 14px rgba(0,0,0,.28);
    transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}

body.light-mode .wp-cta-btn{
    box-shadow:0 0 8px rgba(0,255,255,.16), 0 5px 14px rgba(0,0,0,.12);
}

@media (hover:hover){
    .wp-cta-btn:hover{
        transform:translateY(-2px);
        box-shadow:0 0 12px rgba(0,255,255,.38), 0 5px 14px rgba(0,0,0,.28);
    }
    body.light-mode .wp-cta-btn:hover{
        box-shadow:0 0 12px rgba(0,255,255,.24), 0 5px 14px rgba(0,0,0,.12);
    }
}

.wp-cta-top-gradient{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:80px;
    z-index:1;
    background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
    pointer-events:none;
}

.wp-cta-label{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:2;
    padding:14px 8px 20px;
    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.7px;
    text-transform:uppercase;
    text-align:center;
    color:#F5EDE3;
}

/* ---- Celestial Calendar ---- */

.wp-cta-explore-media{
    position:absolute;
    inset:0;
    z-index:0;
    background-size:cover;
    background-position:center;
}

.wp-cta-explore-footer{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    text-align:center;
    gap:2px;
    background:#07133a;
    z-index:2;
}

body.light-mode .wp-cta-explore-footer{
    background:#FAF6F1;
}

.wp-cta-explore-event{
    font-size:17px;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    color:#F5EDE3;
}

body.light-mode .wp-cta-explore-event{
    color:#2E3138;
}

.wp-cta-explore-date{
    font-size:13px;
    font-weight:600;
    line-height:1.25;
    color:#BFC7D1;
}

body.light-mode .wp-cta-explore-date{
    color:#5B6470;
}

/* ---- My Trip Planner ---- */

.wp-cta-planner{
    background-image:url('assets/planner-dark.webp');
    background-size:cover;
    background-position:center;
}

body.light-mode .wp-cta-planner{
    background-image:url('assets/planner-light.webp');
}

.wp-cta-planner-gradient{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:55%;
    background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
    pointer-events:none;
    z-index:1;
}

.wp-cta-planner-copy{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:0 18px 40px;
    text-align:center;
}

.wp-cta-planner-line1{
    font-size:28px;
    font-weight:700;
    line-height:1.2;
    color:#D4A830;
}

.wp-cta-planner-subtitle{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:14px;
}

.wp-cta-planner-line2{
    font-size:19px;
    font-weight:600;
    line-height:1.2;
    color:#D4A830;
}

body.light-mode .wp-cta-planner-line1{
    color:#9BEDE8;
}

body.light-mode .wp-cta-planner-line2{
    color:#9BEDE8;
}

/* ---- Ultra mode: no decorative imagery ---- */

body.ultra-mode .wp-cta-explore-media,
body.ultra-mode .wp-cta-planner-gradient{
    display:none;
}

body.ultra-mode .wp-cta-planner{
    background-image:none;
}

body.ultra-mode .wp-cta-btn{
    border-color:#321312;
    background:rgba(138,48,43,.12);
}

body.ultra-mode .wp-cta-label,
body.ultra-mode .wp-cta-explore-event,
body.ultra-mode .wp-cta-planner-line1,
body.ultra-mode .wp-cta-planner-line2{
    color:#81332F;
}

body.ultra-mode .wp-cta-explore-footer{
    background:rgba(138,48,43,.12);
}

body.ultra-mode .wp-cta-explore-date{
    color:#81332F;
}

/* ========================================================= */
/* Wordmark / Mascot — pre-tablet                                */
/* ========================================================= */

@media (max-width:1050px){

    .wordmark{

        width:62vw;
        max-width:none;
        transform:none;

    }

}

/* ========================================================= */
/* Tablet                                                      */
/* ========================================================= */

@media (max-width:768px){

    :root{

        --header-side-column:44px;

    }

    .page-shell{

        padding:
            14px
            var(--page-gutter-mobile)
            28px;

    }

    .wordmark{

        width:74vw;
        max-width:none;
        transform:none;

    }

    .menu-button{

        width:46px;
        height:46px;

    }

    .menu-button img{

        width:42px;
        height:42px;

    }

    .toolbar-row{

        width:min(440px,100%);

        margin-top:64px;

    }

}

/* ========================================================= */
/* Phone                                                       */
/* ========================================================= */

@media (max-width:480px){

    :root{

        --header-side-column:40px;

    }

    .header-row{

        min-height:82px;

    }

    .wordmark{

        width:86vw;
        max-width:none;
        transform:none;

    }

    .menu-button{

        width:32px;
        height:32px;

    }

    .menu-button img{

        width:28px;
        height:28px;

    }

    .toolbar-row{

        width:100%;

        margin-top:56px;

        column-gap:14px;

    }

    .utility-group{

        gap:8px;

    }

    .theme-controls{

        gap:0;

    }

    .theme-button{

        width:32px;
        height:32px;

        font-size:14px;

    }

    #theme-light{

        font-size:22px;

    }

    .date-time{

        padding-bottom:6px;

        font-size:.80rem;

    }

}

/* ========================================================= */
/* ULTRA — Station Artwork Removal                             */
/* Hides each station's decorative icon/hero art on the ULTRA   */
/* homepage while preserving all station data and functionality. */
/* Moon/Time/Aurora/Solar each hide only their own icon element    */
/* (not the whole slot) and show a text identity marker in its      */
/* place, owned in their own station CSS — see moon.css/time.css/    */
/* aurora.css/solar.css. Tides and Weather likewise own their icon-   */
/* hide rules in tides.css/weather.css. Moon's hero strip (phase       */
/* image, position marker, phase name) and its notable-event            */
/* thumbnails are hidden globally here — neither has a Station-owned     */
/* equivalent. */
/* ========================================================= */

/* Moon — hero strip + notable-event thumbnails */
body.ultra-mode .moon-hero-strip{
    display:none;
}

body.ultra-mode .moon-notable-asset{
    display:none;
}