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

@media (max-width: 640px) {

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

  /* ── Page header: serif title + sub ── */
  #page-profile h1 {
    font-family: var(--cbm-font-display); font-weight: 400;
    font-size: 28px; color: var(--cbm-gray-900); line-height: 1.2;
  }

  /* ── Cards: design language + serif section titles ── */
  #page-profile .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-profile .card h2, #page-profile .card h3 {
    font-family: var(--cbm-font-display); font-weight: 400; color: var(--cbm-gray-900);
  }

  /* ── Profile fields: design settings-row anatomy ── */
  #page-profile .profile-field {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 2px; border-bottom: 1px solid #f3f4f6;
  }
  #page-profile .profile-field:last-child { border-bottom: none; }
  #page-profile .profile-field-row { gap: 12px; }
  #page-profile .profile-field .form-label,
  #page-profile .profile-field label {
    font-size: 13.5px; font-weight: 600; color: var(--cbm-gray-700);
  }
  #page-profile .form-input, #page-profile select.form-input {
    border: 1px solid var(--cbm-gray-300); border-radius: var(--cbm-radius);
    padding: 11px 14px; font-size: 15px;
  }

  /* ── Wearables & health accounts: rounded rows with icon tiles ── */
  #page-profile .wearable-device-item,
  #page-profile .health-account-item {
    border: 1px solid var(--cbm-gray-200); border-radius: 12px;
    background: #fff; margin-bottom: 8px; padding: 12px 13px;
  }
  #page-profile .wearable-device-icon,
  #page-profile .health-account-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: #d1eae8; color: var(--cbm-primary-600);
    display: grid; place-items: center; flex-shrink: 0;
  }
  #page-profile .wearable-device-name,
  #page-profile .health-account-name {
    font-weight: 600; color: var(--cbm-gray-800); font-size: 14.5px;
  }
  #page-profile .wearable-device-status,
  #page-profile .health-account-status {
    font-size: 12.5px; color: #6b7280;
  }

  /* connected state reads as a teal pill */
  #page-profile .wearable-device-status.connected,
  #page-profile .health-account-status.connected {
    display: inline-flex; background: #e8f4f3; color: var(--cbm-primary-700);
    border: 1px solid #d1eae8; border-radius: 9999px;
    padding: 2px 10px; font-weight: 600;
  }

  /* ── Units + buttons ── */
  #page-profile .unit-option { border-radius: 9999px; }
  #page-profile .btn-primary {
    background: linear-gradient(135deg, var(--cbm-primary-500) 0%, var(--cbm-primary-600) 100%);
    border-radius: var(--cbm-radius);
  }
  #page-profile .btn-outline, #page-profile .btn-sm { border-radius: 9999px; }
}