/* Shared phone/tablet and native pages. Keep the map's existing semantic colours and system type. */
html.app-shell { overflow: hidden; overscroll-behavior: none; }
body.app-pages { position: fixed; inset: 0; top: var(--app-top, 0px); width: 100%; height: var(--app-height, 100dvh); overflow: hidden; overscroll-behavior: none; }
.app-pages.app-keyboard-open #app-nav { display: none; }
.app-pages #top { flex: none; gap: 6px 12px; flex-wrap: wrap; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.app-pages .brand .sub, .app-pages .brand .gh, .app-pages #chat-btn { display: none; }
.app-pages #status { order: 3; flex-basis: 100%; min-width: 0; margin: 0; font-size: 11px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-pages #main { display: block; min-height: 0; overflow: hidden; }
.app-pages #map { position: absolute; inset: 0; }
.app-pages #dock, .app-pages #news-column, .app-pages #news, .app-pages #panel-resizer, .app-pages .pane-settings, .app-pages #sheet-tabs { display: none !important; }
.app-pages #alerts-btn { min-height: 40px; font-size: 13px; }
#app-nav { display: flex; flex: none; z-index: 25; padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); background: var(--surface); border-top: 1px solid var(--border); }
#app-nav button { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; border: 0; border-radius: 6px; padding: 5px 2px; background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 500; }
#app-nav button[aria-current] { color: var(--ink); background: var(--surface-2); }
#app-nav button[aria-current]::before { content: ''; position: absolute; top: 0; width: 22px; height: 2px; background: var(--st-active); }
#app-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#app-nav #app-chat-badge { position: absolute; top: 2px; right: 15%; border-radius: 12px; padding: 1px 5px; background: var(--st-active); color: var(--page); font-size: 10px; }
#app-page-heading { display: flex; align-items: center; gap: 8px; flex: none; min-height: 58px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: var(--surface); }
#app-page-heading h2 { font-size: 21px; line-height: 1.2; font-weight: 650; margin: 0; margin-right: auto; }
#app-page-heading button, #app-page-heading select { min-height: 44px; padding: 6px 9px; font-size: 13px; }
#app-page-heading select { max-width: 145px; }
#app-page-heading [hidden], #app-nav [hidden], #app-chat-unavailable[hidden] { display: none; }
.app-pages .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-pages #panel { position: absolute; inset: 0; z-index: 10; width: 100% !important; min-width: 0; max-width: none; height: 100%; border: 0; border-radius: 0; padding: 0 max(0px, env(safe-area-inset-right)) 16px max(0px, env(safe-area-inset-left)); box-shadow: none; overflow-y: auto; transition: none; background: var(--surface); }
.app-pages #sheet-handle { display: none; }
.app-pages #sheet-news { display: none; }
.app-pages #panel[data-tab="news"] #sheet-news { display: block; }
.app-pages #panel[data-tab="news"] #list, .app-pages #panel[data-tab="news"] #list-tools, .app-pages #panel[data-tab="news"] #detail { display: none !important; }
.app-pages #panel:has(#reader:not([hidden])) #sheet-news { display: none; }
.app-pages #list-tools, .app-pages #hl-tools { position: sticky; top: 0; z-index: 2; padding: 12px 16px; background: var(--surface); }
.app-pages #news-body { display: block; }
.app-pages #news-list { max-height: none; overflow: visible; }
.app-pages #news-list li { padding: 16px; }
.app-pages #news-list .t { font-size: 16px; line-height: 1.4; }
.app-pages #news-list .m { font-size: 12px; margin-top: 6px; }
.app-pages .card { padding: 16px; }
.app-pages #detail, .app-pages #reader { padding: 12px 20px 28px; }
.app-pages #reader p { font-size: 16px; line-height: 1.65; }
.app-pages input[type="search"], .app-pages input[type="password"], .app-pages input[type="text"], .app-pages textarea { font-size: 16px; }
.app-pages .tool-btn { display: inline-flex; }
.app-pages .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.app-pages .chip { flex: none; min-height: 38px; }
.app-pages #list-tools .tools-row { margin-top: 6px; }
.app-pages button:focus-visible, .app-pages select:focus-visible, .app-pages a:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.app-pages #app-settings, .app-pages #app-chat { display: none; position: absolute; inset: 0; background: var(--surface); }
.app-pages[data-app-page="settings"] #app-settings { display: block; overflow-y: auto; overscroll-behavior: contain; }
.app-pages #controls { display: flex; position: static; width: 100%; max-width: 720px; max-height: none; transform: none; visibility: visible; opacity: 1; box-shadow: none; border: 0; padding: 0 20px 24px; margin: 0 auto; overflow: visible; }
.app-pages .controls-h { display: none; }
.app-pages .toggle { min-height: 52px; }
.app-pages .toggle input { width: 22px; height: 22px; }
.app-settings-intro { max-width: 720px; margin: 0 auto; padding: 20px; }
.app-settings-intro h3 { font-size: 18px; margin: 0 0 8px; }
.app-settings-intro p { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
#app-alert-settings { width: 100%; min-height: 48px; text-align: left; font-size: 14px; margin: 10px 0 0; }
#app-version:empty { display: none; }
.app-pages[data-app-page="chat"] #app-chat { display: flex; flex-direction: column; }
.app-pages #app-chat #chat { width: 100% !important; height: 100% !important; max-height: none; flex: 1; border: 0; border-radius: 0; box-shadow: none; margin: 0 auto; }
.app-pages #app-chat .chat-bar button { min-height: 44px; font-size: 13px; }
.app-pages #chat-toggle { pointer-events: none; }
.app-pages #chat-toggle span, .app-pages #chat-close, .app-pages #chat-resizer { display: none; }
.app-pages #chat-messages { padding-inline: 16px; overscroll-behavior: contain; }
.app-pages #chat-messages > li { padding-block: 14px; }
.app-pages .chat-message-text { font-size: 15px; line-height: 1.5; }
.app-pages .chat-message-actions button { min-height: 36px; }
.app-pages #chat-join button, .app-pages #chat-send { min-height: 44px; }
.app-pages #chat-input { min-height: 64px; font-size: 16px; }
.app-pages #chat-foot { padding-bottom: 8px; }
.app-pages:not([data-app-page="map"]) #map, .app-pages:not([data-app-page="map"]) #map-top, .app-pages:not([data-app-page="map"]) #legend,
.app-pages:not([data-app-page="map"]) #ol-slider, .app-pages:not([data-app-page="map"]) #map-credit { visibility: hidden; pointer-events: none; }
.app-pages[data-app-page="settings"] #panel, .app-pages[data-app-page="chat"] #panel { display: none; }
.app-pages[data-app-page="map"] #app-page-heading { display: none; }
.app-pages[data-app-page="map"] #panel { inset: auto 0 0; height: 44%; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; padding-bottom: 16px; }
.app-pages[data-app-page="map"] #panel[data-sheet="full"] { height: calc(100% - 8px); }
.app-pages[data-app-page="map"] #panel[data-sheet="min"] { height: 90px; }
.app-pages[data-app-page="map"] #panel:not(:has(#detail:not([hidden]), #reader:not([hidden]))) { display: none; }
.app-pages[data-app-page="map"] #sheet-handle { display: flex; position: sticky; top: 0; height: 30px; align-items: center; justify-content: center; gap: 6px; width: 100%; background: var(--surface); border: 0; border-radius: 14px 14px 0 0; color: var(--ink-2); }
.app-pages[data-app-page="map"] #sheet-handle small { font-size: 11px; }
.app-pages #ol-slider { bottom: calc(var(--sheet-h, 0px) + 12px); }
.app-pages .app-toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
@media (min-width: 901px) {
  #app-nav { justify-content: center; }
  #app-nav button { flex: 0 1 160px; }
  .app-pages #panel > #list, .app-pages #panel > #detail, .app-pages #panel > #reader, .app-pages #panel > #sheet-news, .app-pages #list-tools { max-width: 800px; margin-inline: auto; }
  .app-pages #app-chat #chat { max-width: 800px; }
  .app-pages #hl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .app-pages #hl-tools:not(.searching) #hq { display: none; }
  .app-pages #hl-tools.searching #hq { flex: 1; }
  .app-pages #hl-chips { flex-basis: 100%; }
  .app-pages #legend { right: 16px; left: auto; top: 12px; bottom: auto; max-width: 420px; }
}
@media (max-width: 360px) {
  #app-page-heading { padding-inline: 10px; gap: 5px; }
  #app-page-heading h2 { font-size: 18px; }
  #app-page-heading button { font-size: 12px; padding-inline: 6px; }
}
.app-pages .reveal { animation: none; }
.app-pages:not([data-app-page="map"]) #panel .back { display: none; }
.app-pages .news-tabs button { min-height: 44px; font-size: 13px; }
.app-pages #app-page-title:focus { outline: none; }

#app-nav[hidden], #app-page-heading[hidden], #app-settings[hidden], #app-chat[hidden] { display: none !important; }
.app-pages #tv-btn { display: none; }