/* ============================================================
   Caribou Health — Fitness page, Mobile UX design (Fitness.html /
   Pages.jsx Fitness screen). Mobile-scoped reskin of
   #page-physicaltherapy; desktop unchanged. Uses --cbm-* tokens.
   ============================================================ */

@media (max-width: 640px) {

  #page-physicaltherapy { background: var(--cbm-gray-50); }

  /* ── Page header: serif title + sub, per PageHeader in the design ── */
  #page-physicaltherapy h1 {
    font-family: var(--cbm-font-display); font-weight: 400;
    font-size: 26px; color: var(--cbm-gray-900); line-height: 1.2;
  }
  #page-physicaltherapy #pt-subtitle { font-size: 14px; line-height: 1.45; }

  /* ── Safety banner → the design's compact teal note ── */
  #page-physicaltherapy .safety-banner {
    background: #e8f4f3; border: 1px solid #d1eae8; border-radius: var(--cbm-radius);
    padding: 12px 13px; font-size: 12.5px; line-height: 1.5;
    color: var(--cbm-primary-800);
  }
  #page-physicaltherapy .safety-banner p { font-size: 12.5px; color: var(--cbm-primary-800); }
  #page-physicaltherapy .safety-banner svg { color: var(--cbm-primary-600); }

  /* ── Session tracker: stats become the teal gradient tracker card ── */
  #page-physicaltherapy .stats-grid {
    display: flex; gap: 0; padding: 16px 6px;
    background: linear-gradient(135deg, #e8f4f3 0%, #fff 100%);
    border: 1px solid #d1eae8; border-radius: 16px;
  }
  #page-physicaltherapy .stat-card {
    flex: 1; background: none; border: none; box-shadow: none; padding: 0 10px;
  }
  #page-physicaltherapy .stat-card-icon {
    width: 34px; height: 34px; border-radius: 9999px; margin-bottom: 6px;
  }
  #page-physicaltherapy .stat-card-value {
    font-size: 20px; font-weight: 700; color: var(--cbm-gray-800); line-height: 1.1;
  }
  #page-physicaltherapy .stat-card-label { font-size: 11.5px; color: #6b7280; margin-top: 3px; }

  /* ── Exercise list: design card language ── */
  #page-physicaltherapy .card {
    border-radius: 16px; border: 1px solid var(--cbm-gray-200);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  }
  #page-physicaltherapy .card h2 {
    font-family: var(--cbm-font-display); font-weight: 400;
    font-size: 19px; color: var(--cbm-gray-900);
  }

  /* Exercise rows: white rounded rows with the design's icon-tile feel */
  #page-physicaltherapy .checklist-item {
    border: 1px solid var(--cbm-gray-200); border-radius: 12px;
    margin-bottom: 10px; padding: 13px 14px; background: #fff;
  }
  #page-physicaltherapy .checklist-item.checked {
    background: #f0fdf4; border-color: #bbf7d0;
  }
  #page-physicaltherapy .checklist-checkbox {
    border-radius: 9999px; border-color: var(--cbm-primary-300, #75c0ba);
  }
  #page-physicaltherapy .checklist-checkbox.checked {
    background: #10b981; border-color: #10b981;
  }
  #page-physicaltherapy .checklist-title {
    font-weight: 600; color: var(--cbm-gray-800); font-size: 14.5px;
  }

  /* Buttons inside the page: pill Start/timer buttons per design */
  #page-physicaltherapy .btn-primary,
  #page-physicaltherapy button.btn-sm {
    border-radius: 9999px;
  }
  #page-physicaltherapy .btn-primary {
    background: linear-gradient(135deg, var(--cbm-primary-500) 0%, var(--cbm-primary-600) 100%);
  }
}