/* Responsive overrides — spec §10.3, plus Addendum 2 (sidebar tap target). */

/* ─── Tablet (640–1023px) ──────────────────────────────── */
@media (max-width: 1023px) {
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
    overflow-x: auto;
  }
  .main-content { margin-left: 0; }

  .metrics-row { grid-template-columns: repeat(2, 1fr); }
  .metrics-row .metric:nth-child(2n) { border-right: none; }

  .site-row        { grid-template-columns: 3fr 1.5fr 120px; }
  .site-row-header { grid-template-columns: 3fr 1.5fr 120px; }

  .tabs { overflow-x: auto; }
}

/* ─── Mobile (<640px) ──────────────────────────────────── */
@media (max-width: 639px) {
  .metrics-row { grid-template-columns: 1fr; }
  .metrics-row .metric {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .metrics-row .metric:last-child { border-bottom: none; }
  .metric-value { font-size: 16px; }

  .site-row        { grid-template-columns: 1fr auto; }
  .site-row-header { display: none; }

  .history-row { flex-direction: column; gap: var(--sp-2); }
  .history-actions { flex-direction: row; justify-content: flex-start; }

  .code-block { font-size: 9px; max-height: 240px; overflow-y: auto; }

  .auth-wrap { max-width: 100%; padding: 0 var(--sp-4); }

  .btn    { min-height: 44px; padding: 0 var(--sp-4); }
  .btn-sm { min-height: 44px; padding: 0 var(--sp-3); }

  /* Addendum 2 + §10.4: 44px tap target on sidebar nav items at mobile width. */
  .sidebar-nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}