/* Shared phone/tablet layout. Desktop and route state remain unchanged. */
@media (max-width:820px) {
  #shell {height:100dvh}
  #top {gap:6px;padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top));
    padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  #top .brand {font-size:14px;flex:1}
  #top .icon-btn,.main-site-link {min-width:44px;min-height:44px}
  #top .omni {order:2;flex:1 0 100%;max-width:none;margin:0}
  #top .omni input {font-size:16px;min-height:44px;padding:0}
  #top .omni kbd {display:none}
  #top .omni-pop {width:100%;max-height:55dvh;overflow:auto;overscroll-behavior:contain}
  #top .omni-res {max-height:none;overflow:visible}
  #top .omni-res .it {min-height:44px;flex-wrap:wrap}
  #top .omni-res .it .n {overflow-wrap:anywhere}
  .modes {order:3;overflow-x:auto;flex-wrap:nowrap;min-width:0}
  .modes a {flex:1 0 auto;min-height:44px;display:flex;align-items:center;justify-content:center;padding:6px 10px}
  .split {overflow:hidden}
  body.mode-terbum .side,body.mode-eco .side {
    flex:0 0 auto;height:calc(54px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);overflow:hidden;
    transition:none;
  }
  body.mode-terbum .side:not(.peek)>:not(.sheet-toggle),
  body.mode-eco .side:not(.peek)>:not(.sheet-toggle) {visibility:hidden}
  body.mode-terbum .side.peek,body.mode-eco .side.peek {
    height:62%;overflow-y:auto;padding-bottom:calc(70px + env(safe-area-inset-bottom));
    scroll-padding-top:60px;scroll-padding-bottom:70px;
  }
  body.mode-terbum .side.peek .sheet-toggle,body.mode-eco .side.peek .sheet-toggle {padding-right:12px}
  .side button,.side a {touch-action:manipulation}
  .side .back,.side .ocard-actions button {min-height:44px}
  .side .ocard-actions {flex-wrap:wrap}
  .side.peek {scrollbar-width:thin;scrollbar-color:var(--muted) var(--card)}
  body.mode-terbum .side + .mapwrap,body.mode-eco .side + .mapwrap,
  body.mode-terbum .side.peek + .mapwrap,body.mode-eco .side.peek + .mapwrap {
    height:auto;flex:1;min-height:0;transition:none;
  }
  body.mode-terbum .sheet-toggle,body.mode-eco .sheet-toggle {
    height:54px;min-height:54px;padding:8px 100px 8px 12px;
    font-size:13px;color:var(--ink);text-align:left;
  }
  .mapctl .mc-head,.bs-toggle,.bs-opt {min-height:44px}
  .leaflet-top.leaflet-right {max-height:100%;overflow-y:auto}
  .mapctl.mc,.mapctl.mc.eco-layers {max-width:calc(100vw - 84px)}
  .mc-body {max-height:28dvh;overflow-y:auto;overscroll-behavior:contain}
  .bs-list[hidden] {display:none!important}
  .bs-list {max-width:calc(100vw - 90px);overflow-x:auto}
  .ptabs button,.eco-kind-list button,.eco-view-modes button {min-height:44px}
  #assistant {right:60px;bottom:calc(5px + env(safe-area-inset-bottom))}
  .ai-open {width:44px;height:44px;min-height:44px}
  .fb-open {right:10px;bottom:calc(5px + env(safe-area-inset-bottom));width:44px;height:44px;padding:0;justify-content:center}
  .ai-box {bottom:calc(58px + env(safe-area-inset-bottom));max-height:calc(100dvh - 80px)}
  .fb-wrap {padding:8px}
  .fb-box {max-height:calc(100dvh - 16px);overflow-y:auto}
  input,textarea {font-size:16px}
  #about-box {left:8px;right:8px;width:auto;max-height:65dvh;overflow-y:auto}
  :focus-visible {outline:2px solid var(--accent);outline-offset:2px}
}
@media (max-width:820px) and (max-height:500px) {
  #top .brand {display:none}
  #top .omni {order:0;flex:1;min-width:100px}
  #top .modes {padding:0}
  .mc-body {max-height:38dvh}
  /* Reading information must not squeeze the map to a tiny horizontal strip. */
  .split:has(.side.peek) {flex-direction:row}
  body.mode-terbum .side.peek,body.mode-eco .side.peek {
    width:46%;min-width:0;height:100%;border-top:0;border-right:1px solid var(--line);
  }
  body.mode-terbum .side.peek + .mapwrap,body.mode-eco .side.peek + .mapwrap {height:100%}
  .side.peek .sheet-toggle {font-size:12px}
  .side.peek .ptabs {overflow-x:auto;flex-wrap:nowrap}
  .side.peek .ptabs button {flex:0 0 auto;min-width:104px}
}