/* ============================================================
   Caribou Health — Dashboard, Mobile UX design (Dashboard.html /
   Dashboard.jsx from the design project). Mobile-scoped reskin of
   the existing dashboard DOM; desktop keeps the current look.
   Uses the --cbm-* tokens from mobile-auth.css.
   ============================================================ */

@media (max-width: 640px) {

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

  /* ── Header card: eyebrow date + serif greeting + avatar ── */
  #page-home #welcome-section {
    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-home .welcome-header { align-items: flex-start; gap: 10px; }
  #page-home .cbm-dash-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cbm-primary-600);
    margin: 0 0 2px; font-family: var(--cbm-font-sans);
  }
  #page-home #welcome-section h1 {
    font-family: var(--cbm-font-display); font-weight: 400;
    font-size: 28px; color: var(--cbm-gray-900); line-height: 1.15;
  }
  #page-home #welcome-subtitle { font-size: 14px; }
  #page-home .cbm-dash-avatar {
    width: 42px; height: 42px; border-radius: 9999px; flex-shrink: 0;
    background: #f2ad8f; color: #fff; border: none; cursor: pointer;
    display: grid; place-items: center; font-weight: 700; font-size: 17px;
    font-family: var(--cbm-font-sans);
  }
  #page-home .diagnosis-badge {
    background: #e8f4f3; color: var(--cbm-primary-700);
    border: 1px solid #d1eae8; border-radius: 9999px;
    padding: 6px 12px; font-size: 13px; font-weight: 600;
  }

  /* ── Progress tracker: teal-tinted gradient card + ring ── */
  #page-home .progress-tracker-container {
    display: flex; align-items: center; gap: 18px; padding: 18px;
    background: linear-gradient(135deg, #e8f4f3 0%, #fff 100%);
    border: 1px solid #d1eae8; border-radius: 16px;
  }
  #page-home .progress-ring-fill { stroke: var(--cbm-primary-500); }
  #page-home .progress-ring-value {
    font-family: var(--cbm-font-sans); font-weight: 700; color: var(--cbm-gray-800);
  }
  #page-home .progress-stat-value {
    font-size: 22px; font-weight: 700; color: var(--cbm-gray-800); line-height: 1.1;
  }
  #page-home .progress-stat-label { font-size: 12px; color: #6b7280; margin-top: 3px; }

  /* ── Safety banner: compact design note ── */
  #page-home .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-home .safety-banner p { font-size: 12.5px; color: var(--cbm-primary-800); }
  #page-home .safety-banner svg { color: var(--cbm-primary-600); }

  /* ── Condition highlight → quieter design card ── */
  #page-home .condition-highlight-banner {
    border-radius: 16px; border: 1px solid var(--cbm-gray-200);
    background: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }
  #page-home .condition-highlight-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #6b7280;
  }

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

  /* Primary buttons pick up the design gradient */
  #page-home .btn-primary {
    background: linear-gradient(135deg, var(--cbm-primary-500) 0%, var(--cbm-primary-600) 100%);
    border-radius: var(--cbm-radius);
  }
}