/* ══════════════════════════════════════════
   RESPONSIVE — breakpoints
══════════════════════════════════════════ */

@media (max-width: 968px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .g2, .g3, .g13 { grid-template-columns: 1fr; }
  .cycling-hero { grid-template-columns: repeat(2, 1fr); }
  .cal-grid { grid-template-columns: repeat(6, 1fr); }
  .eddy-wrap { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  :root { --nav-h: 52px; }

  nav { padding: 0 12px; gap: 10px; }
  .hamburger { display: flex; order: -1; }   /* hamburger on the far left */
  .logo { margin-right: auto; }               /* push toggles to the right */
  .logo-sub { display: none; }                /* keep just "Ascent" on mobile */
  #badge { display: none !important; }         /* profile lives in the drawer — no duplicate */

  .btn { padding: 6px 12px; font-size: 11px; }

  /* Save Image / Share Story are floating FABs; Refresh / Disconnect live in the
     drawer. Keep the EN/ID, km/mi and sport toggles in the top bar. */
  #shareBtn, #logoutBtn, #mainBtn, #saveImgBtn { display: none !important; }

  .nav-right { gap: 6px; }
  .app-layout { margin-left: 0; }
  main { padding: 16px; }

  /* sidebar becomes a slide-in drawer (the nav list scrolls — see sidebar.css) */
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 9999999; }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.6); }
  .sidebar-actions { display: flex; }
  body.drawer-open { overflow: hidden; }
}

@media (min-width: 769px) {
  #badge { display: none !important; }
  .hamburger { display: none !important; }
}


@media (max-width: 600px) {
  main { padding: 12px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .s-value { font-size: 22px; }
  .stat-card { padding: 14px 16px; }
  .card { padding: 14px; }
  .cycling-hero { grid-template-columns: 1fr 1fr; }
  .hero-value { font-size: 18px; }
  .cal-grid { grid-template-columns: repeat(3, 1fr); }
  .act-name { max-width: 160px; }
  .eddy-num { font-size: 56px; }
  .chart-wrap { height: 180px; }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
  .kom-list { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .modal-overlay { padding: 0; align-items: flex-end; }

  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 95vh;
    max-height: 92dvh; /* dvh keeps the action buttons on-screen above the address bar */
    padding: 14px 12px 20px;
  }

  /* the Story modal fills the screen on mobile — no empty space above it */
  #storyModal .modal {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .modal-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* preview on top so edits are visible while scrolling the controls */
  .story-right { order: -1; position: static; }
  .story-preview {
    height: 42vh !important;
    height: 42dvh !important;
    width: auto !important;
    aspect-ratio: 9/16;
    margin: 0 auto;
  }

  .layout-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .color-swatch { width: 26px; height: 26px; }
  .modal-actions { flex-direction: row; }
  #statToggles { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 420px) {
  .layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story-preview { height: 38vh !important; height: 38dvh !important; }
}

/* wide data table scrolls horizontally instead of squishing */
.month-table { min-width: 560px; }

/* new components — small screens */
@media (max-width: 600px) {
  .seg-grid, .mst-grid { grid-template-columns: 1fr; }
  .seg-controls { flex-direction: column; align-items: stretch; }
  .seg-sort { width: 100%; }
  .gr-apply { flex-wrap: wrap; }
  .gr-apply .btn { flex: 1; }
  .lb-bar { padding: 12px 14px; gap: 10px; }
  .ms-switch button { padding: 8px 13px; }
}

/* keep the nav toggles compact so they never overflow the bar */
@media (max-width: 480px) {
  .nav-right { gap: 4px; }
  .unit-toggle button { padding: 5px 8px; font-size: 11px; }
  .mode-toggle button { padding: 5px 9px; font-size: 13px; }
}