/* Responsive and reduced-motion rules */

@media (max-width: 1100px) {
  .workspace { grid-template-columns: minmax(0, 1.2fr) minmax(315px, .8fr); }
  .topnav a { padding-inline: 8px; }
  .intro-note { display: none; }
}

@media (max-width: 860px) {
  .topbar-inner, .page { width: min(100% - 24px, 680px); }
  .topbar-inner { min-height: 64px; }
  .topnav { display: none; }
  .page { padding-top: 30px; }
  .intro { margin-bottom: 20px; }
  .workspace { grid-template-columns: 1fr; gap: 12px; }
  .map-frame { height: min(70vh, 650px); min-height: 470px; border-radius: 22px; }
  .control-panel { gap: 12px; }
  .panel-card { padding: 17px; border-radius: 21px; }
  .metrics { gap: 8px; margin-top: 9px; }
  .metric { padding: 13px 13px 12px; }
}

@media (max-width: 520px) {
  .topbar-inner, .page { width: calc(100% - 20px); }
  .brand-copy small { display: none; }
  .status-pill { min-height: 31px; padding-inline: 10px; font-size: 9px; }
  .page { padding-top: 25px; padding-bottom: 34px; }
  h1 { font-size: clamp(30px, 10vw, 46px); }
  .intro-copy { margin-top: 12px; font-size: 12px; line-height: 1.7; }
  .map-frame { height: 67vh; min-height: 450px; border-radius: 20px; }
  .map-context-head { align-items: flex-start; }
  .map-context-readout { flex-wrap: wrap; align-items: flex-end; }
  .map-source-outside { flex: 1 1 190px; }
  .device-load-outside { margin-left: auto; }
  .map-hint-outside { max-width: 100%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .map-footer-outside { display: grid; align-items: stretch; }
  .map-tools-note { justify-items: start; text-align: left; }
  .legend-block { min-width: 0; }
  .legend-bar { width: min(210px, 53vw); }
  .map-tools-note { font-size: 8px; }
  .map-tools-note strong { font-size: 9px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-value { font-size: 22px; }
  .toggle-list { gap: 6px; }
  .toggle-row { padding-inline: 8px; font-size: 9px; }
  .footer { display: grid; gap: 6px; }
  .station-list { max-height: 360px; }
  .station-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
  .station-eta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}