@media (max-width: 1100px) {
  .card.chart-primary,
  .card.table-wide {
    grid-column: span 1;
  }

  .card.full-width {
    grid-column: span 1;
  }
}

@media (max-width: 820px) {
  header.hero {
    padding: 18px;
  }

  .toolbar {
    display: none;
  }

  .bottom-nav {
    display: flex;
  }

  .page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .tab {
    white-space: nowrap;
  }
}

@media (min-width: 821px) {
  .nav-sheet {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    --modal-inset: 10px;
  }

  .status-panel {
    width: 100%;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .tab {
    padding-left: 36px;
  }

  .tab::before {
    left: 10px;
  }

  .chart-frame {
    min-height: 260px;
  }

  .card.full-width.chart-full .chart-frame {
    min-height: 360px;
  }

  .card > .card-actions {
    top: 12px;
    right: 12px;
  }

  .card-action {
    font-size: 10px;
    padding: 6px 8px;
  }

  .fullscreen-close {
    width: 28px;
    height: 28px;
  }

  .alert-summary {
    padding: 8px 10px;
  }

  .alert-summary-message {
    -webkit-line-clamp: 2;
  }

  .alert-list {
    gap: 8px;
    max-height: 320px;
    padding-right: 2px;
  }

  .alert-card {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .alert-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .alert-meta {
    font-size: 10px;
  }

  .alert-message {
    font-size: 13px;
  }

  .alert-context {
    font-size: 11px;
  }

  .badge {
    font-size: 9px;
    padding: 3px 6px;
  }

  .insight-card {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .insight-header {
    font-size: 10px;
  }

  .insight-message {
    font-size: 13px;
  }

  .toast {
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    text-align: center;
  }
}