@media (max-width: 1180px) {
    .topbar__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
    .search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 12px; }
    .topbar { position: relative; }
    .network-banner { top: 0; }
    .dashboard { grid-template-columns: 1fr; }
    .sun-card { min-height: 260px; }
    .metrics-grid { grid-template-columns: repeat(3, 1fr); }
    .highlights-grid { grid-template-columns: repeat(2, 1fr); }
    .daily-grid { overflow-x: auto; grid-template-columns: repeat(7, minmax(120px, 1fr)); padding-bottom: 6px; scroll-snap-type: x proximity; }
    .daily-card { scroll-snap-align: start; }
}

@media (max-width: 760px) {
    :root { --topbar-height: 50px; }
    .topbar__inner, .app-shell, .footer { width: min(calc(100% - 24px), var(--content)); }
    .topbar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding-top: 5px; }
    .favorites-bar { grid-column: 1 / -1; grid-row: 2; }
    .search { grid-row: 3; }
    .topbar__actions { gap: 2px; }
    .icon-button, .unit-button, .language-select select { min-width: 34px; }
    .brand span { display: none; }
    .app-shell { padding-top: 12px; }
    .location-heading { align-items: center; }
    .location-heading__actions .secondary-button span { display: none; }
    .current-card { min-height: auto; }
    .current-card__hero { grid-template-columns: auto 1fr; padding: 16px 0; }
    .weather-icon--hero { width: 70px; height: 70px; }
    .current-card__temperature { font-size: clamp(3.3rem, 16vw, 4.5rem); }
    .current-card__summary { grid-column: 1 / -1; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .panel__header--wrap { align-items: start; }
    .metric-tabs { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 3px; }
    .metric-tabs button { flex: 0 0 auto; }
    .highlights-grid { grid-template-columns: 1fr; }
    .chart-legend { width: 100%; }
    .trend-chart { height: 145px; }
    .section-heading { align-items: start; }
    .section-heading__range { display: none; }
}

@media (max-width: 430px) {
    body { font-size: 15px; }
    .topbar__actions .icon-button:first-child { display: none; }
    .location-heading { gap: 10px; }
    .location-heading h1 { font-size: 1.25rem; }
    .location-heading__meta { font-size: .8rem; }
    .current-card, .sun-card, .hourly-section { border-radius: 13px; padding: 14px; }
    .current-card__hero { gap: 5px; }
    .weather-icon--hero { width: 64px; height: 64px; }
    .metrics-grid { margin-right: -4px; margin-left: -4px; }
    .metrics-grid > div { padding: 11px 9px; }
    .status-panel { align-items: stretch; flex-direction: column; }
}