/*
 * Skywatch ADS-B: phone layout (coarse pointer or width <= 768 px). Built by ui/phone.js, which adds body.phone.
 * One bottom sheet (#phoneSheet) owns the search pill, the tab bar and the open panel; the map gets the rest;
 * round glass controls ride above the sheet through --sheet-h. Desktop is untouched: every rule here is under body.phone
 * or inside the phone media query.
 */
.phoneOnly { display: none !important; }
/* phone surfaces: black sheet, #161616 cards (desktop: #0d0d0d panel, #1e1e1e cards, see theme.css and elevation.css) */
@media (max-width: 768px), (pointer: coarse) { :root { --bg-card: #161616; --bg-panel: #000000; } }
@media (max-width: 768px), (pointer: coarse) { .phoneOnly { display: inline-flex !important; } }

html, body { overscroll-behavior: none; }
body.phone { height: 100dvh; overflow: hidden; touch-action: manipulation; }
body.phone #map_container, body.phone #map_canvas { overscroll-behavior: none; touch-action: none; }

/* old chrome is replaced by the sheet and the round controls */
body.phone #topbar, body.phone #toolbar,
body.phone #wordmark, body.phone #viewPill, body.phone #altitude_chart, body.phone .ol-zoom { display: none !important; }
body.phone .ol-attribution.ol-control { display: none !important; }
body.phone.attrOpen .ol-attribution.ol-control {
    display: block !important; position: fixed !important; left: 16px !important; right: 16px !important; bottom: calc(var(--bottom-inset, 140px) + 12px) !important;
    max-width: none; z-index: 46; background: var(--bg-sheet); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px;
    font: 12px/1.5 Inter, system-ui, sans-serif; color: var(--text-2);
}
body.phone.attrOpen .ol-attribution.ol-control a { color: var(--text); }

/* ---------- the sheet ---------- */
.psSheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-sheet); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.5); color: var(--text); font-family: var(--font-ui);
    height: 140px; max-height: 100dvh; overscroll-behavior: none;
}
.psSheet.psAnim { transition: height .25s cubic-bezier(.2,.8,.2,1); }
.psHandle { position: relative; z-index: 2; flex: none; height: 44px; margin-bottom: -16px; align-items: flex-start; padding-top: 8px !important; width: 100%; background: none; border: 0; padding: 0; cursor: grab; touch-action: none; display: flex; justify-content: center; color: var(--handle); }
.psGrip { width: 40px; height: 5px; border-radius: 3px; background: var(--handle); }
.psHandle:focus-visible, .psSearch:focus-visible, .psTab:focus-visible, .setBack:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.psBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.psFoot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 4px 12px calc(env(safe-area-inset-bottom, 0px) + 8px); background: var(--bg-sheet); touch-action: none; }
.psSearch { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 16px; border-radius: 24px; background: var(--bg-control); border: 1px solid var(--line); color: var(--text-2); font: 500 15px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.psSearch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psTabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 26px; background: var(--bg-control); border: 1px solid var(--line); }
.psTab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; min-width: 44px; padding: 4px 2px; border: 0; border-radius: 22px; background: none; color: var(--text-2); font: 600 11px Inter, system-ui, sans-serif; cursor: pointer; }
.psTab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psTab.on { background: #fff; color: #000; }

/* panels live inside the sheet */
body.phone #phoneSheetBody > #sidebar_container,
body.phone #phoneSheetBody > #selected_infoblock,
body.phone #phoneSheetBody > #airport_panel {
    position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; transform: none !important;
    overflow: visible !important; padding-left: 14px; padding-right: 14px;
}
body.phone #phoneSheetBody > #sidebar_container { padding: 0 !important; }
body.phone #phoneSheetBody > #sidebar_container #sidebar_canvas { overflow: visible; padding: 4px 12px 12px; }
body.phone #phoneSheetBody > #airport_panel { display: flex; padding: 0 !important; }
body.phone #phoneSheetBody > #airport_panel[hidden] { display: none !important; }
body.phone #airport_panel .apScroll { overflow: visible; padding: 0 14px 12px; }
body.phone #airport_panel .apBar { position: sticky; bottom: 0; background: var(--bg-sheet); padding: 10px 14px 12px; }
/* selection replaces the chrome: the sheet owns the full height */
body.phone.infoOpen .psFoot, body.phone.airportOpen .psFoot { display: none; }

/* selected aircraft: the SAME components as the desktop panel (ui/instruments.css); only density and layout change here.
   body[data-snap] is peek | half | full (set by ui/phone.js). */
body.phone.infoOpen #phoneSheetBody > #selected_infoblock { display: flex !important; flex-direction: column; padding: 0 14px !important; min-height: 100%; }
body.phone #selected_infoblock .ibHead { min-height: 0; padding: 0 0 6px; }
body.phone #selected_infoblock .ibHeadMain { padding: 0 100px 0 0; }   /* the two header buttons sit over the right edge of both header lines (absolute, see infoblock.css): the subtitle must stop before them */
body.phone #selected_infoblock .ibTitleRow { gap: 10px; min-height: 44px; }   /* the header buttons are 44 px tall: the row is as well, so they never reach into the subtitle line */
body.phone #selected_infoblock .ibCallsign { font-size: 26px; line-height: 1.1; }
body.phone #selected_infoblock .ibHeadBtns { margin-left: auto; display: flex; gap: 4px; flex: none; }
body.phone #selected_infoblock .ibBtn#ib_p_share { display: inline-flex; width: 44px; height: 44px; }
body.phone #selected_infoblock .ibSub { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.phone #selected_infoblock .ibScroll { overflow: visible; flex: none; gap: 10px; padding: 6px 0 14px; }
body.phone #selected_infoblock .ibScroll > .ibInstGrid { order: 1; }
body.phone #selected_infoblock .ibScroll > .ibChips { order: 2; }
body.phone #selected_infoblock .ibScroll > #ib_aircraft { order: 3; }
body.phone #selected_infoblock .ibScroll > .ibRoute { order: 4; }
body.phone #selected_infoblock .ibScroll > .ibTiles3 { order: 5; }
body.phone #selected_infoblock .ibScroll > #ib_details_card { order: 6; }
body.phone #selected_infoblock #infoActions {
    position: sticky; bottom: 0; z-index: 3; margin: auto -14px 0; padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 8px);
    border: 0; border-radius: 0; background: var(--bg-sheet); box-shadow: 0 -1px 0 var(--line);
}
body.phone #selected_infoblock #infoActions .act { background: var(--bg-control); border: 1px solid var(--line); border-radius: 24px; }
body.phone #selected_infoblock #infoActions .act.on, body.phone #selected_infoblock #infoActions .act.activeButton { background: #fff; color: #000; border-color: #fff; }   /* the active pill is white with black text, as everywhere else (the rule above had overridden only the fill and left black text on a dark fill) */
body.phone #selected_infoblock .actMenu { right: 14px; bottom: calc(100% + 4px); }
/* peek: header, status, the three summaries in one row, the action bar. Nothing else. */
body.phone[data-snap="peek"] #selected_infoblock .ibScroll > :not(.ibInstGrid) { display: none !important; }
body.phone[data-snap="peek"] #selected_infoblock .ibDetail { display: none !important; }
body.phone[data-snap="peek"] #selected_infoblock .ibInstGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.phone[data-snap="peek"] #selected_infoblock .ibInstGrid > .ibCard { padding: 10px 8px; grid-column: auto; }
body.phone[data-snap="peek"] #selected_infoblock .ibScroll { padding-bottom: 8px; }
body.phone[data-snap="peek"] #phoneSheetBody { overflow: hidden; }

/* ---------- the shared control stack as the floating cluster ---------- */
/* ONE component (#controlStack, ui/control-stack.js). On phones it floats above whatever bottom surface is open: --bottom-inset is written by
   BOTTOMINSET.update() whenever the sheet, replay panel or history bar changes height. Wider than one column of buttons: wraps leftwards. */
body.phone #controlStack {
    position: fixed; z-index: 44; top: auto; left: auto; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(var(--bottom-inset, 140px) + 12px);
    flex-direction: column-reverse; flex-wrap: wrap-reverse; align-content: flex-end; gap: 10px;
    max-height: calc(100dvh - var(--bottom-inset, 140px) - 24px - env(safe-area-inset-top, 0px)); transition: opacity .2s;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.phone #controlStack .btn { flex: none; width: 48px; height: 48px; border: 1px solid var(--line); background: var(--bg-control) !important; color: var(--text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.phone #controlStack .btn[hidden] { display: none; }
body.phone #controlStack .btn.on { background: #fff !important; color: #000; }
body.phone .desktopOnly { display: none !important; }
body.phone #north_up:not(.on) { display: none; }
body.phone.sheetHigh #controlStack { opacity: 0; pointer-events: none; }
body.phone.settingsOpen #controlStack, body.phone.settingsOpen .psSheet { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .psSheet.psAnim, body.phone #controlStack { transition: none; } }

/* map-side overlays that would collide with the sheet */
body.phone #filterPopover { left: 8px; right: 8px; top: auto; bottom: calc(var(--bottom-inset, 140px) + 8px); width: auto; max-height: 60dvh; z-index: 47; }
body.phone .rdBar { bottom: calc(var(--bottom-inset, 140px) + 12px); }

/* ---------- settings: grouped list that drills into pages ---------- */
body.phone #settings_infoblock {
    left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100dvh; max-height: none; transform: none; border-radius: 0; flex-direction: column;
    background: #000 !important; z-index: 80; padding-top: env(safe-area-inset-top, 0px); border: 0;
}
body.phone #settings_infoblock .setNav { width: auto; flex: 1; flex-direction: column; flex-wrap: nowrap; overflow-y: auto; overflow-x: hidden; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); gap: 0; border: 0; }
body.phone #settings_infoblock .setTitle { display: block; font: 700 28px Inter, system-ui, sans-serif; padding: 12px 4px 14px; }
body.phone #settings_infoblock .setNavBtn { width: 100%; min-height: 56px; padding: 0 16px; text-align: left; font: 500 16px Inter, system-ui, sans-serif; color: var(--text); background: var(--bg-card); border-radius: 0; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; white-space: normal; }
body.phone #settings_infoblock .setNavBtn:first-of-type { border-radius: 20px 20px 0 0; }
body.phone #settings_infoblock .setNavBtn:last-of-type { border-radius: 0 0 20px 20px; border-bottom: 0; }
body.phone #settings_infoblock .setNavBtn::after { content: ''; width: 8px; height: 8px; border-top: 2px solid var(--text-2); border-right: 2px solid var(--text-2); transform: rotate(45deg); flex: none; }
body.phone #settings_infoblock .setNavBtn.on { background: var(--bg-card); color: var(--text); }
body.phone #settings_infoblock .setReset { margin: 20px 0 0; min-height: 48px; width: 100%; white-space: normal; }
body.phone #settings_infoblock .setMain { display: none; padding: 0; flex: 1; min-height: 0; flex-direction: column; }
body.phone #settings_infoblock[data-phone-page="page"] .setMain { display: flex; }
body.phone #settings_infoblock[data-phone-page="page"] .setNav { display: none; }
body.phone #settings_infoblock .setHead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--divider); }
body.phone #settings_infoblock .setHead h2 { flex: 1; margin: 0; font: 600 18px Inter, system-ui, sans-serif; }
body.phone #settings_infoblock .setBody { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); }
body.phone #settings_infoblock .setBack { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-control); border: 1px solid var(--line); color: var(--text); }
body.phone #settings_infoblock[data-phone-page="root"] .setBack { display: none; }
body.phone #settings_infoblock .setCols { grid-template-columns: 1fr; gap: 18px; }
body.phone #settings_infoblock .setRow, body.phone #settings_infoblock .settingsOptionContainer { min-height: 48px; }
body.phone #settingsBackdrop { display: none !important; }
/* base map picker: radio rows (name, then provider line), no thumbnails */
body.phone .baseGrid { grid-template-columns: 1fr; gap: 0; background: var(--bg-card); border-radius: 20px; overflow: hidden; }
body.phone .baseTile { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--divider); position: relative; }
body.phone .baseTile .baseThumb { display: none; }
body.phone .baseTile::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-2); box-sizing: border-box; }
body.phone .baseTile.on::before { border-color: #fff; background: radial-gradient(#fff 0 40%, transparent 45%); }
body.phone .baseTile .baseName { font: 600 15px Inter, system-ui, sans-serif; }
body.phone .baseTile .baseSub { flex-basis: 100%; padding-left: 32px; margin-top: 0; font-size: 12.5px; color: var(--text-2); }
body.phone .baseChip { min-height: 44px; }

/* tooltips never show on touch (they stick after a tap) */
@media (hover: none) { .sk-tip { display: none !important; } }

.setBack { display: none; }
body.phone #settings_infoblock .setBack { display: inline-flex; }

/* ---------- tap targets: at least 44 x 44 on phones ---------- */
body.phone :is(#phoneSheet, #settings_infoblock, #filterPopover) :is(button, .chip, .formButton, select, summary, .act, input:not([type=checkbox]):not([type=radio]):not([type=range])) { min-height: 44px; min-width: 44px; box-sizing: border-box; }
body.phone :is(#phoneSheet, #settings_infoblock, #filterPopover) input[type=range] { height: 44px; margin: 0; }
body.phone :is(#phoneSheet, #settings_infoblock) a:not(.apLink):not(.about a) { display: inline-block; padding: 14px 6px; margin: -14px -6px; min-width: 44px; box-sizing: border-box; text-align: center; }
/* chart/info link rows are real 44 px rows (no negative-margin hit area that would overlap the row above); links inside prose keep their text box (inline-link exception of WCAG 2.5.8) */
body.phone #airport_panel a.apLink { display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; box-sizing: border-box; text-align: left; }
body.phone #selected_infoblock .ibBtn { width: 44px; height: 44px; }
body.phone .chip { display: inline-flex; align-items: center; }

/* the callsign stays the headline on phones (elevation.css sets the desktop size) */
@media (max-width: 768px), (pointer: coarse) { #selected_infoblock .ibCallsign { font-size: 22px; font-weight: 700; } }

/* ---------- exits: every full-screen or modal surface has a visible 44x44 close control, top-right inside the safe area ---------- */
body.phone #settings_close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 12px); z-index: 3; display: inline-flex !important; }
body.phone #settings_infoblock .setTitle { padding-right: 56px; }
body.phone #settings_infoblock .setHead h2 { padding-right: 52px; }
body.phone .sk-x, body.phone .histBar #replayStop { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
body.phone .sk-dialog, body.phone .palBox { position: relative; }
body.phone .sk-dialog .sk-x, body.phone .palBox .sk-x { position: absolute; top: 6px; right: 6px; font-size: 24px; }
body.phone .sk-dialog .sk-dtitle { padding-right: 40px; }
body.phone .palBox .palInput { padding-right: 56px; }
body.phone .palBack { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
body.phone #graphsOverlay { padding-top: env(safe-area-inset-top, 0px); }
body.phone #graphsOverlay .gHead { padding-right: calc(env(safe-area-inset-right, 0px) + 8px); }
/* settings root page: the list only, but the close X stays reachable */
body.phone #settings_infoblock[data-phone-page="root"] .setMain { display: block; flex: none; height: 0; overflow: visible; }
body.phone #settings_infoblock[data-phone-page="root"] .setMain > :not(.setHead) { display: none; }
body.phone #settings_infoblock[data-phone-page="root"] .setHead { padding: 0; border: 0; height: 0; margin: 0; }
body.phone #settings_infoblock[data-phone-page="root"] .setHead > :not(#settings_close) { display: none; }
/* one search field per tab: the Aircraft tab has its own filter, so the pill steps aside there */
body.phone.listOpen:not(.infoOpen):not(.airportOpen) .psSearch { display: none; }