/* Phones and narrow windows (loaded with media="(max-width: 860px)"):
   map fills the screen, main controls sit at the bottom within thumb reach, filters and the card are bottom sheets. */
:root { --bar: 40px; --foot: 0px; }
body { touch-action: manipulation; }
#map { left: 0; right: 0; bottom: 0; top: calc(var(--bar) + var(--sat)); }
.status, .viewers, .counts, .clock, .cur, .sep, .load, .link:not(.donate), kbd, .search .slash { display: none !important; }

.menubar { padding-left: max(12px, var(--sal)); padding-right: max(12px, var(--sar)); gap: 10px; }
.menubar .link.donate { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
.pill { min-height: 44px; }

/* search and the filters button live in a bottom dock */
.search {
  position: fixed; z-index: 7; left: max(10px, var(--sal)); right: calc(max(10px, var(--sar)) + 112px); bottom: calc(10px + var(--sab)); margin: 0;
}
.menubar input { width: 100%; height: 48px; font-size: 16px; padding: 0 12px; border-radius: 4px; background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
#results { top: auto; bottom: 54px; left: 0; right: 0; width: auto; max-width: none; max-height: 50dvh; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
#results li { min-height: 48px; }
.panel-btn {
  position: fixed; z-index: 7; right: max(10px, var(--sar)); bottom: calc(10px + var(--sab)); width: 100px; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--text); cursor: pointer; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.panel-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* controls clear of the dock and the notch */
.maplibregl-ctrl-bottom-right { bottom: calc(70px + var(--sab)); right: max(10px, var(--sar)); }
.maplibregl-ctrl-group button { width: 44px; height: 44px; }

/* filters: bottom sheet */
.rail {
  top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 78dvh; padding: 0 var(--sar) var(--sab) var(--sal);
  z-index: 11; border: 0; border-top: 1px solid var(--line); border-radius: 12px 12px 0 0;
  transform: translateY(105%); transition: transform 0.22s ease-out; visibility: hidden;
}
.rail.open { transform: none; visibility: visible; }
.rail .grab { display: block; width: 36px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--line); flex: none; }
.rail-backdrop { display: none; position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); }
.rail-backdrop.show { display: block; }
.ptitle { min-height: 44px; padding: 0 12px; }
.ptitle button { min-height: 44px; min-width: 44px; font-size: 15px; }
.rclose { display: inline-block; font-weight: 600; }
#layers { padding: 8px; gap: 6px; }
#layers label { min-height: 48px; padding: 0 12px; border-radius: 4px; font-size: 15px; }
.key { font-size: 13px; }
.key div { padding: 4px 0; }
.iconkey summary { min-height: 44px; display: flex; align-items: center; }
#list { min-height: 120px; }
#list button { min-height: 52px; padding: 8px 12px; }
.note { font-size: 13px; }
.attrib { display: block; flex: none; padding: 10px 12px; color: var(--dim); font-size: 12px; border-top: 1px solid var(--line); }

/* card: bottom sheet over the dock */
.inspect {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; height: auto; max-height: 68dvh; z-index: 10;
  border-width: 1px 0 0; border-radius: 12px 12px 0 0; padding-bottom: var(--sab); padding-left: var(--sal); padding-right: var(--sar);
  animation: sheet-up 0.22s ease-out;
}
.inspect .grab { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line); flex: none; }
.inspect .x { top: 6px; right: 6px; width: 44px; height: 44px; font-size: 26px; }
.c-head { padding-right: 56px; }
.demo-tag { top: 18px; right: 56px; }
.c-actions { padding-bottom: 10px; }
.c-actions button { min-height: 44px; }
.demo-banner { left: 10px; right: 10px; top: calc(var(--bar) + var(--sat) + 8px); max-width: none; }
.overlay { left: 50%; top: 45%; }
.toast { bottom: calc(76px + var(--sab)); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.rail { overflow-y: auto; overscroll-behavior: contain; }
.rail > * { flex-shrink: 0; }
#list { flex: none; overflow: visible; }
.inspect { max-height: 58dvh; }
.pic-art { height: 72px; }
.pic-art svg { width: 56px; height: 56px; }