/* layout.css: app shell, sidebar, map stage, the phone bottom sheet and their responsive rules.
   Wide screens: sidebar left, map right. Up to 820px wide the map takes the screen and the panel is a bottom sheet (js/sheet.js
   sets #app[data-sheet] to peek or open; without it the sheet is simply open). Phone landscape goes back to a side panel. */
:root{--peek:176px}
#app{display:grid;grid-template-columns:392px minmax(0,1fr);height:100%}
#panel{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;min-width:0}
#stage{position:relative;min-width:0;min-height:0}
#map{position:absolute;inset:0;background:var(--map-bg)}
.sheet-handle{display:none}
@media (max-width:820px){
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(50%,1fr) minmax(0,50%)}
  #app[data-sheet=peek]{grid-template-rows:minmax(0,1fr) var(--peek)}
  #panel{order:2;border-right:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -6px 18px rgba(15,28,44,.14);z-index:2}
  #app[data-sheet=peek] #panel{overflow:hidden}
  #stage{order:1}
  .sheet-handle{display:flex;flex:none;position:sticky;top:0;z-index:3;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:44px;padding:6px 16px 2px;border:0;border-radius:14px 14px 0 0;background:var(--panel);color:var(--mute);font-size:12px;font-weight:600;line-height:1.2}
  .sheet-label::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:translateY(1px) rotate(-45deg)}
  .sheet-handle[aria-expanded=true] .sheet-label::after{transform:translateY(-2px) rotate(135deg)}
  .sheet-handle::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--mute);opacity:.55}
  /* Compact header on a phone: wordmark and status share a line so the closed sheet shows the search field. */
  .brand{display:flex;align-items:center;gap:12px;padding:0 18px 8px;border-bottom:0}
  .brand h1{font-size:22px}
  .brand .status{margin-top:0;flex:1}
  .status #statusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}
/* Phone landscape is too short for a stacked layout: the panel is a column on the left again and the sheet handle is gone. */
@media (max-width:820px) and (max-height:500px) and (orientation:landscape){
  #app,#app[data-sheet]{grid-template-columns:minmax(280px,44%) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  #panel,#app[data-sheet=peek] #panel{order:0;overflow-y:auto;border-top:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none}
  #stage{order:0}
  .sheet-handle{display:none}
  .brand{display:block;padding:12px 18px 10px;border-bottom:1px solid var(--line)}
  .brand .status{margin-top:8px}
}