/* ========================================================= */
/* 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:#000;
    --text:#7B807E;
    --soft-text:#5E5851;

    --gold:#8C6A22;
    --blue:#5877A6;

    --glass:rgba(0,0,0,.76);
    --glass-hover:rgba(255,255,255,.025);

    --glass-border:rgba(216,208,196,.06);
    --glass-border-strong:rgba(216,208,196,.08);

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

}

/* ========================================================= */
/* 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";

    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{

    display:none;

}

body.ultra-mode .header-brand::after{

    content:"WHATPHASE";

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

    color:var(--text);

}

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:#5E5851;

    text-align:center;

    padding:4px 24px 0;

}

/* ========================================================= */
/* 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(140,106,34,.78);

    border-color:rgba(140,106,34,.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                */
/* Migrated from WhichPhase homepage. Token mapping applied:   */
/*   --r-lg       -> --radius-large                            */
/*   --transition -> --transition-fast (both 0.15s ease)       */
/* Hardcoded gold/violet literal colors left untouched, same   */
/* convention as sky-events.css, to preserve exact appearance. */
/* Donor's ultra-mode overrides (--ultra-gold/--ultra-violet)  */
/* were not migrated — no WhatPhase equivalent token exists; the    */
/* base rules' literal colors apply in ultra mode as well.     */
/* ========================================================= */

.wp-cta{
    width:100%;
    max-width:580px;
    margin:0 auto -10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:0;
}

body.ultra-mode .wp-cta{
    display:none;
}

.wp-cta-btn{
    padding:16px 20px;
    border-radius:var(--radius-large);
    border:1.5px solid transparent;
    background:transparent;
    font-family:inherit;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.3px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background var(--transition-fast),border-color var(--transition-fast);
}

.wp-cta-explore{
    border-color:rgba(212,175,55,0.75);
    color:#ecc040;
    background:rgba(212,175,55,0.22);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.wp-cta-explore:hover{
    background:rgba(212,175,55,0.10);
}

.wp-cta-planner{
    border-color:rgba(124,92,255,0.75);
    color:#BFC7D1;
    background:rgba(124,92,255,0.22);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.wp-cta-planner:hover{
    background:rgba(124,92,255,0.10);
}

body.light-mode .wp-cta-explore{
    background:var(--glass);
    border-color:rgba(196,140,27,0.55);
    color:rgba(196,140,27,0.95);
}

body.light-mode .wp-cta-planner{
    background:var(--glass);
    border-color:rgba(124,92,255,0.55);
    color:#5E6FB8;
}

@media (max-width:390px){

    .wp-cta{
        gap:8px;
        padding:0;
    }

    .wp-cta-btn{
        padding:12px 10px;
        font-size:13px;
        gap:6px;
    }

}

@media (max-width:374px){

    .wp-cta-btn{
        font-size:12px;
        padding:11px 8px;
    }

}

/* ========================================================= */
/* 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. */
/* Where a station's icon occupied its own fixed grid track with  */
/* no accompanying text (Moon/Solar/Time/Aurora), the whole slot   */
/* is hidden and the grid is reflowed to the remaining real        */
/* content columns so no empty art footprint is left behind.        */
/* Tides keeps its center column (the "Check Marine Conditions"      */
/* text lives there too), so only the icon and its glow are hidden.   */
/* Weather's icon sits in a flex row and collapses on its own.         */
/* ========================================================= */

/* Weather — condition icon */
body.ultra-mode #ws-now-icon{
    display:none;
}

/* Moon — collapsed-bar icon slot + hero image + notable-event thumbnails */
body.ultra-mode .moon-bar-center{
    display:none;
}

body.ultra-mode .moon-bar-content{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

body.ultra-mode .moon-hero-image-wrap{
    display:none;
}

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

/* Solar — collapsed-bar icon column + expand-panel event icons */
body.ultra-mode .solar-col:nth-child(3){
    display:none;
}

body.ultra-mode .solar-utility-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

body.ultra-mode .solar-event-icon{
    display:none;
}

/* Time — collapsed-bar icon slot */
body.ultra-mode .time-utility-center{
    display:none;
}

body.ultra-mode .time-utility-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

/* Tides — icon + glow only; marine-conditions text stays in place */
body.ultra-mode .tides-icon{
    display:none;
}

body.ultra-mode .tides-utility-center::before{
    display:none;
}

/* Aurora — collapsed-bar icon column. Forecast map image is left
   untouched this pass — its ULTRA luminance treatment belongs to
   the Aurora pass. */
body.ultra-mode .aurora-col:nth-child(2){
    display:none;
}

body.ultra-mode .aurora-utility-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}