/* Phone controls share the desktop DOM and the same map instance.
 * Load after the brand and jurisdiction styles. mobile-ui.js owns the state.
 */
:root {
  --mobile-viewport-height: 100dvh;
  --mobile-viewport-top: 0px;
}

.mobile-only { display: none; }
.mobile-sheet-body { display: contents; }
/* The sidebar is an independent scroll pane. Layout containment prevents
 * its section spacing from extending the page after a phone/desktop resize. */
body:not(.mobile-ui) .sidebar { contain: layout; }

@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  body.mobile-ui {
    --mobile-header-height: calc(56px + env(safe-area-inset-top, 0px));
    --mobile-nav-height: calc(66px + env(safe-area-inset-bottom, 0px));
    --mobile-sheet-available: calc(var(--mobile-viewport-height) - var(--mobile-header-height) - var(--mobile-nav-height) - 8px);
    --mobile-sheet-height: min(72dvh, var(--mobile-sheet-available));
    --mobile-detail-height: min(65dvh, max(270px, calc(var(--mobile-sheet-available) - 144px)), var(--mobile-sheet-available));
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--mobile-viewport-height);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    background: var(--night);
  }

  body.mobile-ui .app-header {
    position: fixed;
    z-index: 1400;
    top: var(--mobile-viewport-top);
    right: 0;
    left: 0;
    height: var(--mobile-header-height);
    min-height: 0;
    padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    gap: 12px;
  }
  body.mobile-ui .brand { gap: 9px; }
  body.mobile-ui .brand-logo-frame { width: 76px; }
  body.mobile-ui .brand-name { font-size: 14px; letter-spacing: 1.5px; }
  body.mobile-ui .brand-subtitle { margin-top: 4px; font-size: 10px; letter-spacing: .1px; }
  body.mobile-ui .header-context { display: none; }
  body.mobile-ui .connection-status { max-width: 150px; font-size: 11px; line-height: 1.5; }

  body.mobile-ui .app-layout {
    position: fixed;
    top: calc(var(--mobile-viewport-top) + var(--mobile-header-height));
    right: 0;
    left: 0;
    display: block;
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-height) - var(--mobile-nav-height));
    min-height: 0;
    overflow: hidden;
  }
  body.mobile-ui .map-section { width: 100%; height: 100%; min-height: 0; }
  body.mobile-ui #map { height: 100%; min-height: 0; }

  /* Full-width, reachable controls leave the map as the default surface. */
  body.mobile-ui .mobile-nav {
    position: fixed;
    z-index: 1500;
    top: calc(var(--mobile-viewport-top) + var(--mobile-viewport-height) - var(--mobile-nav-height));
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: var(--mobile-nav-height);
    padding: 5px max(8px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    gap: 4px;
    border-top: 1px solid #b9d8df33;
    background: #0a181d;
    box-shadow: 0 -4px 22px #0005;
  }
  body.mobile-ui .mobile-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 48px;
    padding: 5px 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }
  body.mobile-ui .mobile-nav button svg { width: 22px; height: 22px; }
  body.mobile-ui .mobile-nav button[aria-pressed="true"],
  body.mobile-ui .mobile-nav button[aria-expanded="true"] {
    color: #d5f5f0;
    background: #78b8b41b;
    border-color: #78b8b43d;
  }
  body.mobile-ui .mobile-nav button:active { background: var(--nixan-hover); }

  body.mobile-ui .mobile-backdrop {
    position: fixed;
    z-index: 1100;
    top: calc(var(--mobile-viewport-top) + var(--mobile-header-height));
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-height) - var(--mobile-nav-height));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #02070a55;
    -webkit-tap-highlight-color: transparent;
  }

  body.mobile-ui #mobileControls {
    position: fixed;
    z-index: 1250;
    top: calc(var(--mobile-viewport-top) + var(--mobile-viewport-height) - var(--mobile-nav-height) - var(--mobile-sheet-height));
    right: 0;
    left: 0;
    display: none;
    width: 100%;
    height: var(--mobile-sheet-height);
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid #b9d8df44;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(170deg, #102329, #0a171c 70%);
    box-shadow: 0 -12px 46px #0008;
  }
  body.mobile-ui[data-mobile-panel="search"] #mobileControls,
  body.mobile-ui[data-mobile-panel="layers"] #mobileControls,
  body.mobile-ui[data-mobile-panel="data"] #mobileControls { display: flex; flex-direction: column; }
  body.mobile-ui .mobile-sheet-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 78px;
    padding: 14px max(16px, env(safe-area-inset-right, 0px)) 13px max(18px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--line);
    touch-action: pan-x;
  }
  body.mobile-ui .mobile-sheet-header .eyebrow { margin-bottom: 5px; font-size: 9px; letter-spacing: 1.5px; }
  body.mobile-ui #mobileSheetTitle { margin: 0; color: var(--text); font-size: 21px; line-height: 1.2; font-weight: 650; letter-spacing: -.45px; }
  body.mobile-ui .mobile-sheet-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: #406269 transparent;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-ui .intro, body.mobile-ui #filtersToggle { display: none; }
  body.mobile-ui #filterPanel { display: contents; margin: 0; }
  body.mobile-ui[data-mobile-panel="search"] [data-mobile-section]:not([data-mobile-section="search"]),
  body.mobile-ui[data-mobile-panel="layers"] [data-mobile-section]:not([data-mobile-section="layers"]),
  body.mobile-ui[data-mobile-panel="data"] [data-mobile-section]:not([data-mobile-section="data"]) { display: none !important; }

  body.mobile-ui .icon-button { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 11px; }
  body.mobile-ui .icon-button svg { width: 21px; height: 21px; }
  body.mobile-ui .scope-switch { margin: 0 0 12px; padding: 4px; gap: 5px; border-radius: 12px; }
  body.mobile-ui .scope-switch button { min-height: 44px; padding: 9px 8px; font-size: 13px; border-radius: 8px; }
  body.mobile-ui .preset-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 1px 1px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  body.mobile-ui .preset-row::-webkit-scrollbar { display: none; }
  body.mobile-ui .preset-button { flex: 0 0 auto; min-width: 94px; min-height: 44px; padding: 10px 13px; font-size: 12px; border-radius: 9px; }
  body.mobile-ui .national-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 16px; }
  body.mobile-ui .national-presets button { min-height: 44px; padding: 8px 5px; font-size: 12px; line-height: 1.35; white-space: normal; border-radius: 9px; }
  body.mobile-ui .field-label, body.mobile-ui .municipality-field .field-label { position: static; font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
  body.mobile-ui .search-box { height: 50px; border-radius: 11px; padding-left: 13px; }
  body.mobile-ui .search-box input,
  body.mobile-ui .national-municipality-field > input,
  body.mobile-ui .municipality-field select { font-size: 16px; }
  body.mobile-ui .search-box input::placeholder,
  body.mobile-ui .national-municipality-field > input::placeholder { font-size: 14px; }
  body.mobile-ui .search-box button { min-width: 48px; height: 48px; border-radius: 0 10px 10px 0; }
  body.mobile-ui .search-box svg { width: 19px; height: 19px; }
  body.mobile-ui .field-help { font-size: 12px; line-height: 1.55; margin-top: 7px; }
  body.mobile-ui .search-status { font-size: 12px; line-height: 1.6; margin-top: 12px; }
  body.mobile-ui .search-results, body.mobile-ui .municipality-results, body.mobile-ui .coverage-municipalities { max-height: none; overflow: visible; }
  body.mobile-ui .search-results { margin-top: 9px; }
  body.mobile-ui .search-result, body.mobile-ui .municipality-result { min-height: 58px; margin: 6px 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
  body.mobile-ui .search-result strong, body.mobile-ui .municipality-result strong { font-size: 13px; line-height: 1.5; }
  body.mobile-ui .search-result span, body.mobile-ui .search-result small, body.mobile-ui .municipality-result small { font-size: 12px; line-height: 1.5; }
  body.mobile-ui .national-municipality-field, body.mobile-ui .municipality-field { margin: 20px 0 4px; }
  body.mobile-ui .national-municipality-field > input, body.mobile-ui .municipality-field select { height: 48px; border-radius: 10px; }

  body.mobile-ui .layer-fieldset { margin: 2px 0 14px; }
  body.mobile-ui .layer-fieldset legend { margin-bottom: 12px; font-size: 14px; }
  body.mobile-ui .layer-row { min-height: 66px; gap: 12px; padding-top: 9px; padding-bottom: 9px; }
  body.mobile-ui .layer-copy strong { font-size: 14px; line-height: 1.4; }
  body.mobile-ui .layer-copy small { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  body.mobile-ui .layer-row input[type="checkbox"] { width: 22px; height: 22px; }
  body.mobile-ui .layer-swatch { width: 20px; height: 20px; }
  body.mobile-ui .imagery-row { padding: 12px; border-radius: 12px; }
  body.mobile-ui .imagery-status { margin: 8px 3px 10px; font-size: 12px; line-height: 1.55; }
  body.mobile-ui .switch { width: 44px; height: 26px; border-radius: 20px; }
  body.mobile-ui .switch::before { width: 20px; height: 20px; }
  body.mobile-ui .imagery-row input:checked + .switch::before { transform: translateX(18px); }
  body.mobile-ui .national-extra-layers summary { min-height: 48px; padding: 13px 0; font-size: 13px; line-height: 1.6; }
  body.mobile-ui .opacity-label { margin-top: 20px; font-size: 13px; }
  body.mobile-ui #layerOpacity { min-height: 44px; margin: 4px 0 12px; }

  body.mobile-ui .coverage-card, body.mobile-ui .cat-import-card { margin-top: 14px; padding: 15px; border-radius: 12px; }
  body.mobile-ui .mobile-sheet-body > .coverage-card:first-child { margin-top: 0; }
  body.mobile-ui .section-heading h2, body.mobile-ui .cat-import-card > .section-heading h2 { font-size: 13px; line-height: 1.5; }
  body.mobile-ui .text-button { min-width: 44px; min-height: 44px; font-size: 12px; padding: 8px; }
  body.mobile-ui .stat-grid strong, body.mobile-ui.national-scope .stat-grid strong { font-size: 22px; }
  body.mobile-ui .stat-grid span, body.mobile-ui.national-scope .stat-grid span { font-size: 12px; line-height: 1.4; }
  body.mobile-ui .coverage-note, body.mobile-ui .national-source-note, body.mobile-ui .sidebar-footnote,
  body.mobile-ui .cat-import-card > p, body.mobile-ui .cat-instructions-text, body.mobile-ui .cat-import-status { font-size: 12px; line-height: 1.65; }
  body.mobile-ui .coverage-card summary { min-height: 44px; padding: 11px 0; font-size: 12px; }
  body.mobile-ui .municipality-coverage-row, body.mobile-ui .municipality-coverage-row span { font-size: 12px; line-height: 1.5; }
  body.mobile-ui .sidebar-footnote { margin: 20px 2px 0; }
  body.mobile-ui .cat-import-card .source-link, body.mobile-ui .gibraltar-coverage-card .source-link { display: flex; align-items: center; min-height: 44px; margin-bottom: 8px; font-size: 12px; line-height: 1.5; }
  body.mobile-ui .cat-import-card .field-label { font-size: 13px; }
  body.mobile-ui .cat-import-card input[type="file"] { min-height: 48px; padding: 5px; font-size: 12px; }
  body.mobile-ui .cat-import-card input[type="file"]::file-selector-button { min-height: 36px; padding: 8px 10px; font-size: 12px; }
  body.mobile-ui .primary-button, body.mobile-ui .secondary-button,
  body.mobile-ui .cat-import-card .primary-button, body.mobile-ui .cat-import-card .secondary-button { min-height: 48px; padding: 12px 14px; font-size: 13px; border-radius: 9px; }

  /* The selected object uses a separate sheet, with stable tabs and footer. */
  body.mobile-ui.mobile-detail-expanded { --mobile-detail-height: var(--mobile-sheet-available); }
  body.mobile-ui #detailPanel {
    position: fixed;
    z-index: 1300;
    top: calc(var(--mobile-viewport-top) + var(--mobile-viewport-height) - var(--mobile-nav-height) - var(--mobile-detail-height));
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: none;
    height: var(--mobile-detail-height);
    min-height: 0;
    max-height: none;
    padding-bottom: 0;
    border: 1px solid #b9d8df44;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: #0c1b20;
    box-shadow: 0 -12px 46px #0008;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.mobile-ui .detail-sheet-handle {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 17px 14px 5px;
    border: 0;
    border-radius: 19px 19px 0 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    touch-action: pan-x;
  }
  body.mobile-ui .detail-sheet-handle::before { content: ""; position: absolute; top: 8px; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 4px; background: #b9d8df66; }
  body.mobile-ui .detail-sheet-handle:hover, body.mobile-ui .detail-sheet-handle:active { color: var(--ice); background: #78b8b40a; }
  body.mobile-ui .detail-header { flex: 0 0 auto; align-items: flex-start; padding: 3px max(16px, env(safe-area-inset-right, 0px)) 14px max(18px, env(safe-area-inset-left, 0px)); }
  body.mobile-ui .detail-header > div { min-width: 0; }
  body.mobile-ui .detail-header .eyebrow { font-size: 9px; line-height: 1.4; margin-bottom: 7px; }
  body.mobile-ui .detail-header h2, body.mobile-ui #detailPanel[data-jurisdiction="GI"] .detail-header h2 { font-size: 16px; line-height: 1.4; }
  body.mobile-ui .detail-subtitle { max-width: none; font-size: 12px; line-height: 1.5; }
  body.mobile-ui .detail-tabs { padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); gap: 2px; overscroll-behavior-x: contain; }
  body.mobile-ui .detail-tabs button { flex: 1 0 auto; min-height: 48px; padding: 12px 10px; font-size: 12px; }
  body.mobile-ui .tab-badge { font-size: 10px; }
  body.mobile-ui .detail-body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 18px max(18px, env(safe-area-inset-left, 0px)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.mobile-ui .detail-footer { min-height: 62px; padding: 7px max(16px, env(safe-area-inset-right, 0px)) 7px max(18px, env(safe-area-inset-left, 0px)); }
  body.mobile-ui .detail-footer a { min-height: 44px; padding: 5px 0; font-size: 12px; line-height: 1.45; }
  body.mobile-ui .property-field { grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr); padding: 11px 0; gap: 13px; }
  body.mobile-ui .property-field dt { font-size: 12px; line-height: 1.5; }
  body.mobile-ui .property-field dd { font-size: 13px; line-height: 1.5; }
  body.mobile-ui .property-field .mono { font-size: 12px; }
  body.mobile-ui .information-note, body.mobile-ui .empty-state, body.mobile-ui .inline-error { font-size: 12px; line-height: 1.65; }
  body.mobile-ui .composition-item { padding: 12px 7px; }
  body.mobile-ui .composition-item span { font-size: 11px; line-height: 1.4; }
  body.mobile-ui .unit-card, body.mobile-ui .national-related-record, body.mobile-ui .gibraltar-record { min-height: 62px; padding: 13px; border-radius: 9px; }
  body.mobile-ui .unit-card strong, body.mobile-ui .unit-card span, body.mobile-ui .unit-card small,
  body.mobile-ui .national-related-record strong, body.mobile-ui .national-related-record small,
  body.mobile-ui .gibraltar-record strong, body.mobile-ui .gibraltar-record span, body.mobile-ui .gibraltar-record small { font-size: 12px; line-height: 1.5; }
  body.mobile-ui .unit-detail h3, body.mobile-ui .construction-heading { font-size: 14px; line-height: 1.5; }
  body.mobile-ui .unit-detail .unit-reference { font-size: 12px; }
  body.mobile-ui .construction-table { font-size: 12px; }
  body.mobile-ui .construction-table th, body.mobile-ui .construction-table td { padding: 10px 8px; }
  body.mobile-ui .construction-card h3, body.mobile-ui .construction-card p { font-size: 12px; line-height: 1.6; }
  body.mobile-ui .addresses-list li { font-size: 13px; line-height: 1.6; }
  body.mobile-ui .addresses-list .address-index { font-size: 11px; }
  body.mobile-ui .national-source-fields summary, body.mobile-ui .gibraltar-source-fields summary { min-height: 44px; padding: 10px 0; font-size: 12px; line-height: 1.6; }

  body.mobile-ui .map-topbar, body.mobile-ui .map-section.details-open .map-topbar { top: 12px; right: max(12px, env(safe-area-inset-right, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); gap: 8px; visibility: visible; }
  body.mobile-ui .map-location { max-width: calc(100% - 124px); min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 12px; }
  body.mobile-ui #mapLocation { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.mobile-ui .map-button { min-width: 44px; min-height: 44px; padding: 10px; font-size: 11px; border-radius: 10px; }
  body.mobile-ui .map-button svg { width: 18px; height: 18px; }
  body.mobile-ui .map-message, body.mobile-ui .map-section.details-open .map-message { top: 66px; left: max(12px, env(safe-area-inset-left, 0px)); max-width: calc(100% - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px))); padding: 9px 11px; border-radius: 9px; font-size: 11px; line-height: 1.55; }
  body.mobile-ui .map-legend { left: max(12px, env(safe-area-inset-left, 0px)); right: 68px; bottom: 48px; width: fit-content; max-width: calc(100% - 80px); padding: 8px 10px; gap: 7px 10px; border-radius: 8px; font-size: 10px; line-height: 1.3; }
  body.mobile-ui .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }
  body.mobile-ui .leaflet-control-zoom { border-radius: 11px !important; }
  body.mobile-ui .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-right: max(12px, env(safe-area-inset-right, 0px)); margin-bottom: 44px; }
  body.mobile-ui .leaflet-control-attribution { max-width: 100%; padding: 3px max(6px, env(safe-area-inset-right, 0px)) 3px max(6px, env(safe-area-inset-left, 0px)); font-size: 8px !important; line-height: 1.45 !important; }
  body.mobile-ui .leaflet-control-scale { margin-left: max(12px, env(safe-area-inset-left, 0px)) !important; margin-bottom: 27px !important; }
  body.mobile-ui .leaflet-control-scale-line { font-size: 9px !important; }
  body.mobile-ui:not([data-mobile-panel="map"]) .map-message,
  body.mobile-ui:not([data-mobile-panel="map"]) .map-legend,
  body.mobile-ui:not([data-mobile-panel="map"]) .leaflet-control-zoom,
  body.mobile-ui:not([data-mobile-panel="map"]) .leaflet-control-scale { visibility: hidden; }
  body.mobile-ui .toast { top: auto; bottom: calc(100dvh - var(--mobile-viewport-top) - var(--mobile-viewport-height) + var(--mobile-nav-height) + 12px); z-index: 1800; max-width: calc(100vw - 28px); width: max-content; padding: 12px 15px; font-size: 12px; border-radius: 11px; pointer-events: none; }
}

/* A phone turned sideways keeps a useful section of the map beside the sheet. */
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  body.mobile-ui {
    --mobile-header-height: calc(48px + env(safe-area-inset-top, 0px));
    --mobile-nav-height: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  body.mobile-ui .mobile-nav { padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)); }
  body.mobile-ui .mobile-nav button { flex-direction: row; gap: 9px; }
  body.mobile-ui #mobileControls, body.mobile-ui #detailPanel {
    top: calc(var(--mobile-viewport-top) + var(--mobile-header-height) + 8px);
    right: max(12px, env(safe-area-inset-right, 0px));
    left: auto;
    width: min(390px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    height: calc(var(--mobile-sheet-available) - 8px);
    border: 1px solid #b9d8df44;
    border-radius: 16px;
    box-shadow: -8px 4px 32px #0008;
  }
  body.mobile-ui .mobile-sheet-header { min-height: 63px; padding: 9px 12px 9px 16px; }
  body.mobile-ui .mobile-sheet-header .eyebrow { display: none; }
  body.mobile-ui #mobileSheetTitle { font-size: 19px; }
  body.mobile-ui .mobile-sheet-body { padding: 12px 14px 16px; }
  body.mobile-ui .detail-sheet-handle { display: none; }
  body.mobile-ui .detail-header { padding: 10px 12px 10px 16px; }
  body.mobile-ui .detail-header .eyebrow { display: none; }
  body.mobile-ui .detail-header h2, body.mobile-ui #detailPanel[data-jurisdiction="GI"] .detail-header h2 { font-size: 14px; }
  body.mobile-ui .detail-subtitle { font-size: 11px; }
  body.mobile-ui .detail-body { padding: 12px 14px; }
  body.mobile-ui .detail-footer { min-height: 54px; padding: 4px 14px; }
  body.mobile-ui:not([data-mobile-panel="map"]) .map-topbar { right: calc(414px + env(safe-area-inset-right, 0px)); }
  body.mobile-ui:not([data-mobile-panel="map"]) .map-location { max-width: calc(100% - 52px); }
  body.mobile-ui:not([data-mobile-panel="map"]) .map-button span { display: none; }
}

@media (max-width: 360px) {
  body.mobile-ui .app-header { padding-right: max(11px, env(safe-area-inset-right, 0px)); padding-left: max(11px, env(safe-area-inset-left, 0px)); gap: 8px; }
  body.mobile-ui .brand-logo-frame { width: 66px; }
  body.mobile-ui .brand-name { font-size: 13px; letter-spacing: 1.3px; }
  body.mobile-ui .brand-subtitle { font-size: 9px; }
  body.mobile-ui .connection-status { max-width: 100px; font-size: 10px; }
  body.mobile-ui .map-button span { display: none; }
  body.mobile-ui .map-location { max-width: calc(100% - 52px); }
  body.mobile-ui .mobile-sheet-body { padding-right: max(13px, env(safe-area-inset-right, 0px)); padding-left: max(13px, env(safe-area-inset-left, 0px)); }
  body.mobile-ui .detail-tabs button { padding-right: 9px; padding-left: 9px; }
  body.mobile-ui .stat-grid { gap: 7px; }
  body.mobile-ui .stat-grid strong { font-size: 19px; }
  body.mobile-ui .stat-grid span { font-size: 11px; }
}

/* A software keyboard can leave less than 220px in a landscape viewport.
 * Keep the input and a real scrolling area reachable instead of reserving the
 * normal branding/header space. This comes after the landscape rules on purpose.
 */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  body.mobile-ui.mobile-keyboard-open,
  body.mobile-ui.mobile-compact-height {
    --mobile-header-height: 0px;
    --mobile-nav-height: 52px;
    --mobile-sheet-available: calc(var(--mobile-viewport-height) - var(--mobile-nav-height));
    --mobile-sheet-height: var(--mobile-sheet-available);
  }
  body.mobile-ui.mobile-keyboard-open .app-header,
  body.mobile-ui.mobile-compact-height .app-header { display: none; }
  body.mobile-ui.mobile-keyboard-open .mobile-nav,
  body.mobile-ui.mobile-compact-height .mobile-nav {
    padding: 3px max(8px, env(safe-area-inset-right, 0px)) 3px max(8px, env(safe-area-inset-left, 0px));
  }
  body.mobile-ui.mobile-keyboard-open .mobile-nav button,
  body.mobile-ui.mobile-compact-height .mobile-nav button {
    flex-direction: row;
    gap: 4px;
    min-height: 44px;
    padding: 3px 4px;
    font-size: 11px;
  }
  body.mobile-ui.mobile-keyboard-open .mobile-nav button svg,
  body.mobile-ui.mobile-compact-height .mobile-nav button svg { width: 16px; height: 16px; }
  body.mobile-ui.mobile-keyboard-open #mobileControls,
  body.mobile-ui.mobile-compact-height #mobileControls {
    top: var(--mobile-viewport-top);
    height: var(--mobile-sheet-available);
    border-radius: 12px 12px 0 0;
  }
  body.mobile-ui.mobile-keyboard-open .mobile-sheet-header,
  body.mobile-ui.mobile-compact-height .mobile-sheet-header {
    height: 48px;
    min-height: 48px;
    gap: 8px;
    padding: 1px max(8px, env(safe-area-inset-right, 0px)) 1px max(12px, env(safe-area-inset-left, 0px));
  }
  body.mobile-ui.mobile-keyboard-open .mobile-sheet-header .eyebrow,
  body.mobile-ui.mobile-compact-height .mobile-sheet-header .eyebrow { display: none; }
  body.mobile-ui.mobile-keyboard-open #mobileSheetTitle,
  body.mobile-ui.mobile-compact-height #mobileSheetTitle { font-size: 16px; line-height: 1.3; }
  body.mobile-ui.mobile-keyboard-open .mobile-sheet-body,
  body.mobile-ui.mobile-compact-height .mobile-sheet-body {
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px));
    scroll-padding: 8px;
  }
}