/* =====================================================================
   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: rail along the BOTTOM, popover grows upward from it ----
   column-reverse puts the rail visually last (nearest the thumb) while keeping
   the rail FIRST in the DOM, so tab order still reaches the buttons before the
   panel content. The popover is capped so it can never reach the top edge: the
   map has to stay visible above it, which is the entire point of the redesign. */
@media (orientation: portrait) {
    #nav {
        left: 0; right: 0;
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        top: auto;
        transform: none; /* clear the landscape translateY(-50%) centring */
        flex-direction: column-reverse;
        align-items: center;
    }
    #nav .nav-tabs { flex-direction: row; } /* rail runs across, not down */
    #nav .nav-body {
        max-width: calc(100vw - 1.5rem);
        /* --vvh: vh, dvh and svh all measure a viewport the browser chrome can be covering.
           See the #nav comment in main.css — same bug, portrait side. */
        max-height: min(calc(var(--vvh, 100svh) * 0.6), calc(var(--vvh, 100svh) - 8rem));
    }
    .cal-dow-row, .cal-days-grid { gap: 6px; }
    #mini-cal { align-self: center; }
    .btn-i { min-width: 44px; min-height: 44px; border: none; outline: 1px solid var(--blue5); outline-offset: -12px; }
    .btn-i:hover { outline-color: var(--color-primary-light); border: none; }
}

/* ---- Portrait phone normal view — two-row top block: input on top, buttons
   (quickstart/share/my-location/marker-config/radar) flow into row 2, centered.
   With a group active, SOS joins row 2 as the first button (6 cols).
   Width-capped: portrait tablets keep the single row. ---- */
@media (orientation: portrait) and (max-width: 480px) {
    #coords-row {
        display: grid;
        grid-template-columns: repeat(5, 44px);
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        justify-content: center;
        justify-items: center;
        align-items: center;
        width: auto;
    }
    #coords-input { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    /* Group active: SOS joins row 2 as first button (4 buttons + SOS = 5) */
    #coords-row.has-group { grid-template-columns: repeat(6, 44px); }
}

/* ---- Portrait phone — tighten the domain groups (desktop: 1rem/0.5rem) ----
   Renamed from #fetch-options 2026-08-12 when the panel was grouped by domain. Portrait is the
   tight orientation for this block, because there is no width to put the two groups side by side. */
@media (orientation: portrait) and (max-width: 480px) {
    #wx-groups { margin-top: 0.25rem; margin-bottom: 0; }
}

/* ---- Mobile: activity labels one size down — the longest translations
   (Wandern, Strada…) inflate the square buttons past the panel width ---- */

/* ---- Mobile: hide the RADAR playbar while the nav is open — bar + sheet together
   leave almost no map visible.
   The timeline widget used to hide here too. It no longer does: the weather panel has
   work to do against whatever date the timeline holds, so it has to stay readable while
   the panel is open. Anyone who finds it takes too much room turns it off with the
   Timeline toggle, which is why that toggle exists. ---- */
@media (orientation: portrait) and (max-width: 480px) {
    /* body.nav-sheet-open is now set by nav_open_set(). The old sheet-1/sheet-2
       selectors are gone with the sheet: they existed to keep the widget hidden
       through the CLOSE animation, and there is no close animation any more. */
    body.nav-sheet-open #radar-widget { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
    body:has(#nav.nav-open) #radar-widget { display: none; }

    /* THE LAST SCROLLING POPOVER (2026-08-12). After the user door, five of six panels fit in
       mobile landscape and Settings missed by 15px: 364 natural against a 349 cap. Fixed from both
       ends, as Pierre asked, and both are scoped HERE — this only ever bit the 375px-high class of
       phone (SE-era), and every taller screen was already fine, so nothing above this breakpoint
       should pay for it.
       1. The cap goes 2rem -> 1rem of inset, i.e. ~6px more at the top and bottom. The rail is
          vertically centred and only 289px tall, so that margin was never doing any work here.
       2. The four Settings rows lose a little padding, 1rem -> 0.75rem each side. That is where
          the height actually is: 4 rows x 26px of padding = 104px, more than a quarter of the
          panel, for four one-line choices.
       Together: cap 349 -> 362, Settings 364 -> ~338. It fits with room to spare, so the next
       settings row added does not immediately put it back over. */
    #nav .nav-body { max-height: calc(var(--vvh, 100svh) - 1rem); }
    #nav .nav-controls .nav-inline { padding: 0.75rem 0; }
}

/* ---- Landscape rail: size the buttons from the height that actually exists ----
   No breakpoint. A @media (max-height:) test is evaluated against the LAYOUT viewport, so on the
   OnePlus it did not even fire — a guessed number cannot describe a viewport that changes when the
   URL bar slides. Instead the button size is derived from --vvh (visualViewport.height, published
   by vvh_publish() in main.js), so it is correct on any device without anybody choosing a figure.
   The 46px is the rail's own chrome plus breathing room: 5 gaps x 4 + 2 x 4 padding + 2 border = 30,
   plus 8px clear top and bottom. Six buttons then get (vvh - 46) / 6 each, capped at the 44px
   design size so a tall screen never inflates them. Where there is room this changes nothing. */
@media (orientation: landscape) {
    #nav .nav-tab {
        --rail-btn: min(44px, calc((var(--vvh, 100svh) - 46px) / 6));
        width: var(--rail-btn);
        height: var(--rail-btn);
        min-height: 0;   /* the 44px floor is what forced the overflow instead of a shrink */
    }
}

/* ---- Portrait very narrow (<400px) — shift the block left, no room next to
   the +/- zoom stack on the right (nav-mode re-centers with higher specificity) ---- */
@media (orientation: portrait) and (max-width: 400px) {
    #coords-row { left: calc(50% - 22px); }
}

/* ---- Timeline + radar widgets — float over the map, just above the nav in
   portrait (radar bar takes the tl-widget slot; tl hides via body.radar-on) ---- */
@media (orientation: portrait) {
    #tl-widget, #radar-widget {
        left: 50%; transform: translateX(-50%);
        /* 0.5rem + 3px: at 0.5rem alone the widget's bottom edge lands exactly on the
           rail's top edge and the two surfaces read as one glued block (Pierre, phone,
           2026-08-12). A visible gap is what says they are two separate things. */
        bottom: calc(var(--tl-widget-bottom, var(--nav-tabs-h, 48px)) + env(safe-area-inset-bottom, 0px) + 0.5rem + 3px);
    }
    /* Stacked on an open popover: `tl_widget_offset_update()` has already measured the
       popover and added the rail's own gap, so the resting padding above must NOT be
       added a second time — that double count is what left the three surfaces unevenly
       spaced. JS owns the stacked case, this stylesheet owns the resting one. */
    body.tl-stacked #tl-widget,
    body.tl-stacked #radar-widget { bottom: var(--tl-widget-bottom); }
}
@media (orientation: landscape) {
    /* +140px was half the old 300px sidebar. Map is full-bleed now, so centre honestly. */
    #tl-widget, #radar-widget { left: 50%; bottom: 1.25rem; transform: translateX(-50%); }
}
@media (orientation: landscape) and (max-height: 500px) {
    /* Mobile landscape only: right-align instead of centring. Centre was inherited from
       the era when the left 300px were a sidebar; with a full-bleed map and a ~54px
       floating rail on the left, a centred widget sits in no relation to anything.
       Aligning its right edge to the button stack's left edge gives the screen one
       vertical edge on the right (46px = maplibre's 10px ctrl margin + the 36px
       .btn-map) and leaves the whole middle of the map clear. Desktop landscape keeps
       centring: there the rail is a rounding error against the width. */
    #tl-widget, #radar-widget {
        left: auto; transform: none;
        right: calc(46px + env(safe-area-inset-right, 0px) + 3px);
        bottom: 0.6rem;
    }
}
/* The 280px offset cleared the old landscape drawer. The rail is ~54px wide and
   floats, so the widget centres like everywhere else. */
/* Narrow phones — tighten spacing so the 6-item control row (play/prev/date/
   time/next/now) fits without pushing #tl-now outside the widget. */
@media (max-width: 400px) {
    #tl-widget { padding: 0.5rem 0.4rem 0.4rem; }
    #tl-controls { gap: 0.1rem; }
    .tl-label { padding: 0 0.2rem; }
    .tl-now { padding: 0 0.4rem; margin-left: 0.05rem; }
}

/* ---- Portrait nav-mode ---- */
@media (orientation: portrait) {
    /* Two-row block, centered on screen: input (20ch) on top, buttons flow
       into row 2 by DOM order — SOS first when a group is active (4 cols),
       otherwise just the 3 buttons, still centered */
    body.nav-mode #coords-row {
        display: grid;
        grid-template-columns: repeat(3, 44px);
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        justify-content: center;
        justify-items: center;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }
    body.nav-mode #coords-input { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    body.nav-mode #coords-row.has-group { grid-template-columns: repeat(4, 44px); }
    body.nav-mode #coords-row.has-group #btn-sos-map { font-size: var(--font-xs); letter-spacing: 0; }
    /* HUD full width at bottom, curve left-middle */
    body.nav-mode #nav-hud {
        left: 0.75rem;
        right: 0.75rem;
        transform: none;
        max-width: none;
    }
    /* curve floats above the values, left-aligned */
    body.nav-mode #nav-curve {
        align-self: flex-start;
        font-size: var(--font-xxl);
        padding: 0.5rem 0.75rem;
        gap: 0.75rem;
        max-width: 80%;
    }
    body.nav-mode .nav-curve-ico svg { width: 48px; height: 48px; }
    body.nav-mode .nav-curve-deg     { font-size: var(--font-xxl); }
    body.nav-mode .nav-curve-dist    { font-size: var(--font-lg); }
    /* Off-track / wrong-dir / no-GPS centered above the values */
    body.nav-mode #nav-offtrack,
    body.nav-mode #nav-wrongdir,
    body.nav-mode #nav-nogps {
        align-self: center;
    }
}

/* ---- Landscape — all ---- */
@media (orientation: landscape) {
    #radar-center { width: 60%; }
    /* FULL-BLEED MAP (2026-08-11). #map used to be inset by the 300px sidebar,
       and #coords-row / the widgets carried a matching +140px nudge to look
       centred over the remaining strip. The rail floats now, so the map owns the
       whole viewport and everything re-centres on it honestly.
       This is also what removes the old objection to per-panel heights: the
       popover resizes OVER the map instead of resizing the map viewport, so the
       map can no longer re-lay-out under a rider mid-turn. */
    #map { left: 0; }
    #nav #sub-panels { flex: 0 0 auto; min-height: auto; }
    #coords-row { left: 50%; }
    /* Nav overlays: one bottom row — curve → HUDvalues → HUDweather */
    body.nav-mode #nav-hud {
        left: 0.5rem;
        right: auto;
        bottom: 0.5rem;
        transform: none;
        flex-direction: row;
        align-items: flex-end;
    }
    body.nav-mode #nav-offtrack,
    body.nav-mode #nav-wrongdir,
    body.nav-mode #nav-nogps {
        font-size: var(--font-xxl);
        padding: 0.8rem 1.8rem;
        gap: 0.75rem;
    }
    body.nav-mode #nav-curve {
        font-size: var(--font-xxl);
        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: var(--font-xxl); }
    body.nav-mode .nav-curve-dist { font-size: var(--font-lg); }
}

/* ---- Mobile landscape (phone, max-height 500px) ---- */
@media (orientation: landscape) and (max-height: 500px) {
    /* Full-width row: HUDvalues + HUDweather grouped left, alert (curve) pushed far right,
       so the center-bottom stays clear for the view ahead. pointer-events off so the empty
       middle doesn't block the map. */
    body.nav-mode #nav-hud { max-width: none; gap: 0.3rem; right: 0.5rem; pointer-events: none; }
    body.nav-mode #nav-hud-grid    { order: 1; }
    body.nav-mode #nav-hud-weather { order: 2; }
    body.nav-mode #nav-hud > #nav-curve,
    body.nav-mode #nav-hud > #nav-offtrack,
    body.nav-mode #nav-hud > #nav-wrongdir,
    body.nav-mode #nav-hud > #nav-nogps { order: 3; margin-left: auto; }
    body.nav-mode .nav-hud-cell { flex-direction: row; align-items: baseline; gap: 0.35rem; }
    body.nav-mode .nav-hud-cell-label { white-space: nowrap; }
    /* Tighten internals so the one-line row keeps margin on narrow phones (values stay big) */
    body.nav-mode #nav-hud-grid    { padding: 0.35rem 0.55rem; gap: 0.3rem 0.5rem; }
    body.nav-mode #nav-hud-weather { padding: 0.35rem 0.55rem; font-size: var(--font-lg); }
    body.nav-mode #nav-curve       { padding: 0.4rem 0.45rem; gap: 0.5rem; }
    body.nav-mode .nav-curve-ico svg { width: 32px; height: 32px; }
    body.nav-mode .nav-curve-deg   { font-size: var(--font-xl); }
    /* Short+narrow landscape: values one step down (still ≥ original) to keep the row fitting */
    body.nav-mode .nav-hud-cell-value { font-size: var(--font-xxl); }
    body.nav-mode .nav-hud-cell.hud-cell-sm .nav-hud-cell-value { font-size: var(--font-xl); }
    /* 2-column grid is the single source of truth for the drawer width:
       [ body = --nav-body-w ][ tabs = --nav-tabs-w ]; total drawer = their sum.
       --nav-body-w is calculated to fit the Weather panel's first row exactly:
       compact icon-only quick-start (65px) + gap (6.5) + Update-Weather w/ 24px
       icon and 2-line label (131.5) + body padding (13×2) ≈ 229px.
       Closed state slides left by exactly the body width so the tab strip stays
       on-screen as the open/close handle. Grid (not flex) keeps the two column
       widths locked — the body can no longer desync from the tab strip. */
    /* #nav #import-section rule deleted 2026-08-12 with the section itself. */
    #coords-row { left: 50%; }
    #nav #sub-panels { flex: 0 0 auto; min-height: auto; }
    #marker-config-panel { max-height: calc(100svh - 32px); overflow-y: auto; }
}

/* ---- Landscape desktop (min-height 501px) ---- */
@media (orientation: landscape) and (min-height: 501px) {
}

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

/* ---- 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; }
    .ico-size-sm { width: 24px !important; height: 24px !important; }
    .ico-size-lg { width: 48px !important; height: 48px !important; }
    /* #btn-gmaps-open rule deleted 2026-08-12 — the button moved into Express step 1,
       which sizes its own icons. */
    /* SOS button matches desktop icon buttons: 36px icon + 0.6rem padding + 2px border */
    #btn-sos-map {
        min-width: calc(36px + 0.6rem + 2px);
        min-height: calc(36px + 0.6rem + 2px);
    }
}

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

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

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

}

/* ---- Compare dialog: stack columns on portrait mobile ---- */

/* ---- Track dialog: 2 columns on landscape — track list left, editing right.
   Two independent flex columns so list height can't redistribute the editing
   rows (the earlier grid-span approach made them drift apart). ---- */

/* ---- Weather/Compare dialogs: dynamic height on landscape, capped at 85dvh ---- */
@media (orientation: landscape) {
    #compare-dialog[open],
    #weather-info-dialog[open] { height: auto; max-height: 85dvh; }
}

/* ---- OBD2 ride chevron, mobile landscape: middle-right would cover the
   hazards/3D map buttons → move it bottom-right (small gap under), and the
   curve/off-track alerts move ABOVE the values grid so the corner is free.
   (The dashboard's back chevron stays middle-left — bottom-left would sit
   on the Gear tile.) ---- */
@media (orientation: landscape) and (max-height: 500px) {
    body.nav-mode.obd2-ready #obd2-flip {
        top: auto;
        transform: none;
        bottom: 0.6rem;
        height: 72px;
    }
    body.nav-mode #nav-hud > #nav-curve,
    body.nav-mode #nav-hud > #nav-offtrack,
    body.nav-mode #nav-hud > #nav-wrongdir {
        position: absolute;
        bottom: 100%;
        left: 0;
        order: unset;
        margin: 0 0 0.35rem;
    }
}

/* ---- Marker palette, mobile landscape: TRANSPOSE ----
   Portrait stacks 11 rows (head + View + 9 fields). At a glove-sized 34px row that is ~400px,
   and landscape has roughly 325px of usable height, so it does not fit at any size worth tapping.
   Turning it on its side gives 4 rows x 11 columns: ~150px tall, ~610px wide, which landscape has
   in abundance.
   No markup change is needed: the grid is a perfect rectangle in DOM order (blank, 3 type heads,
   then label + 3 cells per row), so grid-auto-flow: column with 4 rows fills it transposed on its
   own. First column keeps the type names, every other column is one field. ---- */
@media (orientation: landscape) and (max-height: 500px) {
    #marker-config-panel {
        max-width: calc(100vw - 16px);
        min-width: 0;
    }
    .mc-grid {
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);
        grid-template-columns: auto;   /* the type-name column; the rest come from grid-auto-columns */
        grid-auto-columns: 48px;
    }
    .mc-no-track .mc-grid { grid-template-rows: repeat(3, auto); grid-template-columns: auto; }   /* head + Active + Area */
    /* The head cells are a vertical column now, so their divider turns 90 degrees. Same for the
       View separator, which still has to sit between "is it on the map" and the field list. */
    .mc-grid-head {
        text-align: right;
        padding: 0 0.4rem 0 0;
        border-bottom: none;
        border-right: 1px solid var(--blue7, #333);
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    /* The field labels are COLUMN HEADERS here, so they must wrap inside 48px instead of using the
       nowrap they need as row labels in portrait. */
    .mc-grid-label {
        justify-content: center;
        text-align: center;
        font-size: var(--font-xs);
        line-height: 1.15;
        white-space: normal;
        word-break: break-word;
        padding-right: 0;
    }
    .mc-view-lbl, .mc-view-cb {
        border-bottom: none;
        border-right: 1px solid var(--blue7, #333);
        padding-bottom: 0;
    }
}

/* ---- Weather panel top row in the mobile-landscape drawer ----
   The drawer is ~262px and Update + Timeline total ~229px of unshrinkable buttons plus a 1rem
   grid gap: Update was clipped at x = -7 even after the "Update Weather" -> "Update" rename.
   Compact both and tighten the gap; German is the width ceiling ("Aktualisieren" is one
   13-character word and the button wraps at its longest word), hence the smaller fonts. ---- */
@media (orientation: landscape) and (max-height: 500px) {
    #fetch-go-row { gap: 0.4rem; }
    #btn-fetch-weather { padding: 0.4rem 0.5rem; font-size: var(--font-sm); }
    #btn-fetch-weather .svg-ico { width: 18px !important; height: 18px !important; }
    #btn-tl-visible { padding: 0.3rem 0.5rem; font-size: var(--font-xs); }
    #btn-tl-visible .svg-ico { width: 18px; height: 18px; }
}