/* Mobile landscape is detected from the device, not a keyboard-shrunken viewport. */
@media screen {
  html[data-phone-landscape] {
    --phone-rail: calc(72px + env(safe-area-inset-right, 0px));
    --phone-left: 0px;
    --phone-right: var(--phone-rail);
  }
  html[data-phone-bottom="left"] {
    --phone-rail: calc(72px + env(safe-area-inset-left, 0px));
    --phone-left: var(--phone-rail);
    --phone-right: 0px;
  }
  html[data-phone-landscape] .navigation {
    position: fixed;
    inset: 0 0 auto auto;
    width: var(--phone-rail);
    height: 100dvh;
    padding: max(6px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) 4px;
    border: 0;
    border-left: 1px solid var(--line);
    background: var(--white);
    z-index: 1000;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html[data-phone-bottom="left"] .navigation {
    left: 0;
    right: auto;
    padding-right: 4px;
    padding-left: max(4px, env(safe-area-inset-left));
    border-left: 0;
    border-right: 1px solid var(--line);
  }
  html[data-phone-landscape] .nav-item {
    width: 100%;
    min-height: 48px;
    flex-shrink: 0;
    gap: 3px;
    font-size: 9px;
  }
  html[data-phone-landscape] .nav-item svg { width: 20px; height: 20px; }
  html[data-phone-landscape] .nav-foot,
  html[data-phone-landscape] .top-meta,
  html[data-phone-landscape] .intro-stamp,
  html[data-phone-landscape] .brand-symbol,
  html[data-phone-landscape] .brand small,
  html[data-phone-landscape] .route-caption { display: none; }
  html[data-phone-landscape] .app-shell,
  html[data-phone-landscape] .topbar,
  html[data-phone-landscape] .legacy-origin {
    margin-left: var(--phone-left);
    margin-right: var(--phone-right);
  }
  html[data-phone-landscape] main {
    width: 100%;
    min-width: 0;
    padding: 0 max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  html[data-phone-landscape] .topbar { height: 52px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); gap: 8px; }
  html[data-phone-landscape] .brand { font-size: 18px; min-width: 0; }
  html[data-phone-landscape] .header-actions { gap: 6px; }
  html[data-phone-landscape] .header-actions button { min-width: 44px; min-height: 44px; }
  html[data-phone-landscape] .intro { padding: 12px 0 8px; }
  html[data-phone-landscape] .intro h1 { font-size: 30px; margin: 0 0 4px; letter-spacing: -1px; }
  html[data-phone-landscape] .intro .eyebrow { display: none; }
  html[data-phone-landscape] .intro p:last-child { margin: 0; max-width: none; font-size: 12px; }
  html[data-phone-landscape] .country-bar { padding-bottom: 8px; }
  html[data-phone-landscape] .segmented button { min-height: 44px; }
  html[data-phone-landscape] .connection-bar { margin-bottom: 8px; }
  html[data-phone-landscape] .map-layout {
    display: grid;
    grid-template-columns: minmax(200px, 36%) minmax(0, 1fr);
    height: max(240px, calc(100dvh - 140px));
    max-height: none;
  }
  html[data-phone-landscape] .places-panel { order: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); }
  html[data-phone-landscape] .places-list { max-height: none; overflow: visible; flex-shrink: 0; }
  html[data-phone-landscape] .panel-controls { padding: 12px; }
  html[data-phone-landscape] .section-kicker { flex-wrap: wrap; gap: 4px; }
  html[data-phone-landscape] .list-heading { padding: 10px 12px; flex-wrap: wrap; }
  html[data-phone-landscape] .map-frame { order: 1; height: 100%; min-height: 0; max-height: none; border: 0; }
  html[data-phone-landscape] .map-label { display: none; }
  html[data-phone-landscape] .map-top { justify-content: flex-end; }
  html[data-phone-landscape] .map-bottom { flex-wrap: wrap; gap: 4px; }
  html[data-phone-landscape] .map-bottom > span { display: none; }
  html[data-phone-landscape] .is-offline .map-frame { overflow: auto; }
  html[data-phone-landscape] .practical-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-phone-landscape] :is(input, select, textarea) { font-size: 16px; }
  html[data-phone-landscape] .notes { min-height: 120px; }
  html[data-phone-landscape] dialog {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding: 16px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  html[data-phone-landscape] dialog .dialog-close {
    position: sticky;
    float: right;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    z-index: 2;
    margin: 0 0 0 8px;
    background: var(--white);
  }
  html[data-phone-landscape]:has(dialog[open]) .navigation,
  html[data-mobile-keyboard] .navigation { visibility: hidden; }
  html[data-phone-landscape][data-mobile-keyboard] { --phone-left: 0px; --phone-right: 0px; }
  html dialog[data-keyboard-open] {
    position: fixed;
    top: calc(var(--keyboard-top, 0px) + 6px);
    bottom: auto;
    margin: 0 auto;
    max-height: calc(var(--keyboard-height) - 12px);
    overflow: auto;
  }
}