/* =====================================================================
   media.css — loaded last so media-query rules always win over
   non-media declarations in main.css / alien.css.
   All @media rules go here. Never add @media to main.css or SCSS.
   ===================================================================== */

/* ---- Portrait ---- */
@media (orientation: portrait) {
    #radar-dialog[open] { width: min(720px, 95vw); }
    #radar-center { width: 75%; }
    .sheet-handle { display: none; }
    #nav {
        position: fixed;
        top: auto;
        left: 0; right: 0; bottom: 0;
        height: 100vh;
        height: 100dvh;
        border-radius: 2rem 2rem 0 0;
        box-shadow: 0 -8px 32px var(--grey9-50);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    #nav .nav-body {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100% !important;
        overflow-y: auto;
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--grey6);
        transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    #nav.sheet-0 {
        transform: translateY(calc(100% - var(--nav-tabs-h) - env(safe-area-inset-bottom, 0px)));
    }
    #nav.sheet-0 .nav-body { max-height: 0; overflow: hidden; }
    #nav.sheet-1 {
        transform: translateY(calc(100% - var(--sheet-1-show, 55vh)));
    }
    #nav.sheet-1 .nav-body { max-height: calc(var(--sheet-1-show, 55vh) - var(--nav-tabs-h)); }
    .nav-tab-panel { flex: 0 0 auto; width: 100%; max-width: 100%; }
    .nav-tabs {
        padding-top: 0.25rem;
        padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
        touch-action: none;
    }
    #nav .nav-tabs { border-bottom: none; justify-content: space-around; gap: 0; }
    #nav.sheet-0 .nav-tab.active { color: var(--grey5); }
    #nav-toggle { display: none; }
    .cal-dow-row, .cal-days-grid { gap: 6px; }
    #mini-cal { align-self: center; }
    #btn-express { max-width: 50%; align-self: center; margin-left: auto; margin-right: auto; }
    #fetch-top { grid-template-columns: 60% 40%; }
    .btn-i { min-width: 44px; min-height: 44px; border: none; outline: 1px solid var(--grey5); outline-offset: -12px; }
    .btn-i:hover { outline-color: var(--color-primary-light); border: none; }
    .btn-time-step::before { content: ''; position: absolute; inset: -6px; }
}

/* ---- Portrait tall (≥700px) — less sheet height needed ---- */
@media (orientation: portrait) and (min-height: 700px) {
    #nav.sheet-1 {
        transform: translateY(calc(100% - var(--sheet-1-show, 42vh)));
    }
    #nav.sheet-1 .nav-body { max-height: calc(var(--sheet-1-show, 42vh) - var(--nav-tabs-h)); }
}

/* ---- Portrait narrow (≤390px) — shift coords-row left to fit extra button ---- */
@media (orientation: portrait) and (max-width: 385px) {
    #coords-row { left: 45%; }
}

/* ---- Portrait nav-mode ---- */
@media (orientation: portrait) {
    body.nav-mode #coords-row {
        display: grid;
        grid-template-columns: repeat(4, 44px);
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        justify-content: center;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }
    body.nav-mode #coords-input {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 1.15rem;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    body.nav-mode #btn-nav-orient    { grid-column: 1; grid-row: 2; }
    body.nav-mode #btn-my-location   { grid-column: 2; grid-row: 2; }
    body.nav-mode #btn-marker-config { grid-column: 3; grid-row: 2; }
    body.nav-mode #btn-radar         { grid-column: 4; grid-row: 2; }

    /* HUD right, curve left — side by side at bottom */
    body.nav-mode #nav-hud {
        left: auto;
        right: 0.5rem;
        transform: none;
        max-width: calc(50vw - 0.75rem);
    }
    body.nav-mode #nav-curve {
        left: 0.5rem;
        right: auto;
        bottom: 0.5rem;
        transform: none;
        font-size: 1.6rem;
        padding: 0.5rem 0.5rem;
        gap: 1rem;
        max-width: calc(50vw - 0.75rem);
    }
    body.nav-mode .nav-curve-ico svg { width: 48px; height: 48px; }
    body.nav-mode .nav-curve-deg     { font-size: 1.6rem; }
    body.nav-mode .nav-curve-dist    { font-size: 1.1rem; }
    /* Errors centered bottom — overlay both, stop button stays clear on far right */
    body.nav-mode #nav-offtrack,
    body.nav-mode #nav-wrongdir {
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ---- Landscape — all ---- */
@media (orientation: landscape) {
    #radar-center { width: 60%; }
    #nav-toggle { display: none; }
    #map { left: calc(300px - 2rem); }
    body.nav-mode #map { left: 0; }
    #nav #sub-panels { flex: 1; min-height: 0; }
    #coords-row { left: calc(50% + 140px); }
    body.nav-mode #coords-row { left: 50%; transform: translateX(-50%); }
    #nav .wl-label       { display: none; }
    #nav .wl-label-short { display: inline; }

    /* Nav overlays: HUD right, alerts left, 2× bigger */
    body.nav-mode #nav-hud {
        left: auto;
        right: 0.5rem;
        transform: none;
    }
    body.nav-mode #nav-hud .nav-hud-cell-value   { font-size: 1.1rem; }
    body.nav-mode #nav-hud .nav-hud-weather-row  { font-size: 1rem; }
    body.nav-mode #nav-hud .nav-hud-cell-label   { font-size: 0.7rem; }
    body.nav-mode #nav-hud .nav-hud-inline-label { font-size: 0.7rem; }
    body.nav-mode #nav-offtrack,
    body.nav-mode #nav-wrongdir {
        bottom: 1.5rem;
        left: 0.75rem;
        right: auto;
        transform: none;
        font-size: 1.6rem;
        padding: 0.8rem 1.8rem;
        gap: 0.75rem;
    }
    body.nav-mode #nav-curve {
        bottom: 0.5rem;
        left: 0.5rem;
        right: auto;
        transform: none;
        font-size: 1.6rem;
        padding: 0.5rem 0.5rem;
        gap: 1rem;
    }
    body.nav-mode .nav-curve-ico svg { width: 48px; height: 48px; }
    body.nav-mode .nav-curve-deg  { font-size: 1.6rem; }
    body.nav-mode .nav-curve-dist { font-size: 1.1rem; }
}

/* ---- Mobile landscape (phone, max-height 500px) ---- */
@media (orientation: landscape) and (max-height: 500px) {
    #nav {
        position: fixed;
        width: 230px;
        overflow: visible;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
    }
    #nav.nav-open { transform: translateX(0); }
    #nav .nav-body { width: 230px; max-width: 230px; flex: 1; overflow-y: auto; }
    #map { left: 0; }
    .sheet-handle { display: none; }
    #nav .nav-tabs {
        position: absolute;
        left: 100%;
        top: 0;
        bottom: 0;
        width: 3rem;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 0.5rem 0;
        gap: 0;
        border-bottom: none;
        background-color: inherit;
        border-radius: 0 1.5rem 1.5rem 0;
        box-shadow: 4px 0 20px var(--grey9-50);
        touch-action: none;
    }
    #nav .nav-tab { padding: 0.65rem 0.5rem; }
    #nav #import-section { flex-direction: column; }
    #coords-row { left: 50%; }
    #nav #sub-panels { flex: 0 0 auto; min-height: auto; }
    #fetch-top { grid-template-columns: 60% 40%; }
    #fetch-weather-group { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    .btn-time-step::before { content: ''; position: absolute; inset: -6px; }
    #marker-config-panel { max-height: calc(100svh - 32px); overflow-y: auto; }
}

/* ---- Landscape desktop (min-height 501px) ---- */
@media (orientation: landscape) and (min-height: 501px) {
    #nav-toggle { display: none; }
}

/* ---- Small phones (max-width 429px) ---- */
@media (max-width: 429px) {
    .route-marker-temp { font-size: 10px; }
    .route-marker-time { font-size: 9px; }
    .route-marker-info { padding: 1px 3px 2px; }
}

/* ---- Portrait phone — narrow (max-width 480px) ---- */
@media (orientation: portrait) and (max-width: 480px) {
    #coords-input { width: 16ch; }
}

/* ---- Breakpoints (min-width, ascending) ---- */
@media (min-width: 768px) {
    .weather-marker img, .cc-marker img { width: 48px; height: 48px; }
}

@media (min-width: 1024px) {
    .ico-size { width: 36px !important; height: 36px !important; }
    #btn-gmaps-open svg { width: 36px; height: 36px; }
}

@media (min-width: 1280px) {
    .weather-marker img, .cc-marker img { width: 64px; height: 64px; }
}

@media print {
    body > *:not(#print-area) { display: none !important; }

    #print-area {
        display: block !important;
        padding: 0;
        font-family: sans-serif;
        color: #111;
        background: #fff;
        /* override dark-theme CSS variables */
        --grey1: #111; --grey2: #333; --grey3: #555; --grey4: #777;
        --grey6: #ccc; --grey7: #f5f5f5; --grey8: #eee;
        --color-secondary: #888;
    }

    #print-map {
        display: block !important;
        border: 1px solid #ccc;
        margin-bottom: 0.3cm;
    }

}

/* ---- Compare dialog: stack columns on portrait mobile ---- */
@media (orientation: portrait) and (max-width: 600px) {
    .cmp-body { grid-template-columns: 1fr; }
    .cmp-col { border-right: none; border-bottom: 1px solid var(--grey6); }
    .cmp-col:last-child { border-bottom: none; }
}

/* ---- Compare dialog: tighter height on landscape ---- */
@media (orientation: landscape) {
    #compare-dialog[open] { height: 50dvh; max-height: 50dvh; }
}