/* ── WRETAN v2.0 — Responsive ─────────────────────────────────────────────── */

/* ── Desktop tweaks (> 1100px) ──────────────────────────────────────────── */
@media (min-width: 1100px) {
  .content {
    padding: 28px 32px;
  }
}

/* ── Tablet / narrow desktop (721px–900px) ──────────────────────────────── */
@media (max-width: 900px) and (min-width: 721px) {
  :root {
    --sidebar-w: 196px;
  }

  .tool-card {
    flex: 1 1 170px;
  }

  .feature-card {
    flex: 1 1 180px;
  }

  .hero-stats {
    gap: 12px;
  }

  .hero-stat {
    padding: 16px 20px;
    min-width: 120px;
  }
}

/* ── Mobile breakpoint (≤ 720px) ────────────────────────────────────────── */
@media (max-width: 720px) {
  .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: clip;
  }

  body {
    flex-direction: column;
    height: auto;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: auto;
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Hide desktop sidebar */
  .sidebar {
    display: none !important;
  }

  .topbar-toggle {
    display: none !important;
  }

  /* Main fills viewport width — never overflows */
  .main {
    width: 100%;
    max-width: 100vw;
    flex: 1;
    overflow-x: clip;
    overflow-y: visible;
    min-width: 0;
  }

  /* Topbar */
  .topbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: var(--topbar-h);
    padding: 0 16px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    box-sizing: border-box;
    z-index: 100;
  }

  .topbar-right {
    gap: 6px;
  }

  .breadcrumb-page span {
    font-size: 0.75rem;
  }

  /* Content */
  .content {
    padding: calc(var(--topbar-h) + 22px) 16px 20px 16px;
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    box-sizing: border-box;
    min-height: calc(100dvh - var(--bottomnav-h));
  }

  /* Show bottom nav */
  .bottom-nav {
    display: flex;
  }

  /* Grid collapses */
  .cols-2,
  .cols-3,
  .cols-4 {
    grid-template-columns: 1fr;
  }

  .tool-card,
  .feature-card {
    flex: 1 1 calc(50% - 5px);
    max-width: none;
  }

  .hero-stats {
    width: 100%;
  }

  .hero-stat {
    flex: 1;
    padding: 8px 0 8px;
  }

  /* Cards: allow horizontal scroll for wide content */
  .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tbl {
    min-width: 380px;
  }

  /* Gauge label */
  .gauge-label {
    width: 80px;
    font-size: 0.68rem;
  }

  /* Speedtest display */
  #speed-num {
    font-size: 2.2rem !important;
  }

  /* Hero */
  .hero {
    padding: 0px 0 0px;
  }

  .hero-logo {
    margin-bottom: 8px;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  /* Input groups wrap */
  .input-group {
    flex-wrap: wrap;
  }

  /* View header */
  .view-header {
    margin-bottom: 16px;
  }

  .view-title {
    font-size: 1rem;
  }

  /* References Page */
  .ref-table-wrap {
    display: none;
  }
  .ref-cards {
    display: flex;
  }

  /* Grid Gap trick automatically handles the borders here! */
  .ref-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ref-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .ref-search-wrap {
    min-width: 0;
  }
  .ref-count {
    margin-left: 0;
  }

  /* Pull BOTH tabs and filters out to screen edge for native swipe feel */
  .ref-tabs,
  .ref-filters {
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
    /* Force the container to respect horizontal scrolling */
    width: auto;
    max-width: 100vw;
  }
}

@media (max-width: 480px) {
  .tool-card,
  .feature-card {
    flex: 1 1 100%;
  }

  .content {
    padding: calc(var(--topbar-h) + 22px) 12px 12px 12px;
  }

  .card {
    padding: 12px 14px;
  }

  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-stat {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 12px 8px;
    border-right: 1px solid var(--border);
  }

  /* Tighten up typography on very small screens */
  .view-title {
    font-size: 0.95rem;
  }

  .view-sub {
    font-size: 0.7rem;
  }
}