/* Responsive layout: breakpoint follows viewport width so phones/tablets work without UA sniffing. */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 64px); }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 18px 12px; }
  .section-heading { margin-bottom: 6px; }
  .side-note { margin: 4px 0 12px; }
  .feed-list { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 1px 10px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .feed-card { flex: 0 0 min(290px, 82vw); min-width: 0; margin: 0; scroll-snap-align: start; }
  .sidebar-foot { margin-top: 5px; }
  .main-panel { min-width: 0; padding: 22px 20px 16px; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .incidents-header { align-items: stretch; flex-direction: column; gap: 10px; }
  .view-tabs { overflow-x: auto; }
  .search-box { width: 100%; }
  .incident-scroll, .live-calls-scroll { height: auto; max-height: min(62vh, 680px); min-height: 260px; overscroll-behavior: contain; }
  .diagnostics-content { grid-template-columns: minmax(0, 1fr); }
  .diagnostics-drawer { margin-top: 14px; }
}

@media (max-width: 560px) {
  .topbar { height: 58px; padding: 0 13px; }
  .brand-logo { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
  .brand-caption, .brand-divider, .top-divider, .top-date { display: none; }
  .topbar-right { gap: 8px; font-size: 10px; }
  .layout { min-height: calc(100vh - 58px); }
  .sidebar { padding: 13px 12px 9px; }
  .main-panel { padding: 18px 12px 12px; }
  .page-intro { align-items: flex-start; gap: 10px; }
  .page-intro h1 { font-size: clamp(27px, 8vw, 38px); }
  .page-intro p { max-width: 38ch; font-size: 11px; line-height: 1.45; }
  .intro-badge { padding: 8px; }
  .intro-badge small { font-size: 7px; }
  .stats-row { gap: 8px; }
  .stat-card { min-width: 0; padding: 11px; }
  .stat-card strong { font-size: 21px; }
  .stat-caption { font-size: 8px; }
  .incidents-header { margin-top: 16px; }
  .view-tab { flex: 1 0 auto; min-height: 42px; padding: 9px 10px; }
  .filter-row { gap: 7px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
  .filter-row > span:first-child { flex: 0 0 auto; }
  .filter-spacer { display: none; }
  .refresh-label { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
  .incident-scroll, .live-calls-scroll { max-height: 64vh; min-height: 220px; padding-top: 11px; }
  .incident-card, .live-call-card { padding: 13px; margin-bottom: 10px; }
  .incident-meta { gap: 7px; }
  .incident-time, .live-call-head time { margin-left: 0; }
  .incident-location { overflow-wrap: anywhere; }
  .audio-player, .live-call-audio { display: block; width: 100%; max-width: 100%; }
  .diagnostics-drawer summary { gap: 8px; font-size: 11px; }
  .diagnostics-drawer summary span { text-align: right; }
  .main-footer { gap: 8px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 360px) {
  .topbar-right .system-state { font-size: 8px; }
  .stats-row { grid-template-columns: minmax(0, 1fr); }
  .page-intro { flex-direction: column; }
  .intro-badge { align-self: flex-start; }
}