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

@media (max-width: 640px) {

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

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

  /* ── Safety banner: the design keeps this one WARNING-toned ── */
  #page-medication .safety-banner-warning {
    background: #fef3c7 !important; border: 1px solid #fde68a !important;
    border-radius: var(--cbm-radius); padding: 12px 13px;
  }
  #page-medication .safety-banner-warning p {
    font-size: 12.5px !important; line-height: 1.5; color: #92400e !important;
  }
  #page-medication .safety-banner-warning svg { color: #b45309 !important; }

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

  /* ── Medication rows: rounded cards, solid teal dose badge ── */
  #page-medication .medication-item {
    border: 1px solid var(--cbm-gray-200); border-radius: 12px;
    background: #fff; margin-bottom: 10px; padding: 13px 14px;
  }
  #page-medication .medication-name {
    font-weight: 600; color: var(--cbm-gray-800); font-size: 15px;
  }
  #page-medication .medication-dosage {
    display: inline-flex; align-items: center;
    background: var(--cbm-primary-600); color: #fff;
    border-radius: 9999px; padding: 2px 10px;
    font-size: 12px; font-weight: 600;
  }
  #page-medication .medication-details { font-size: 13px; color: #6b7280; }
  #page-medication .medication-condition-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e8f4f3; color: var(--cbm-primary-700);
    border: 1px solid #d1eae8; border-radius: 9999px;
    padding: 3px 10px; font-size: 12px; font-weight: 600;
  }
  #page-medication .medication-action-btn,
  #page-medication .btn-sm { border-radius: 9999px; }

  /* dose tick buttons (checked state = soft green, per design) */
  #page-medication .medication-item .checklist-checkbox { border-radius: 9999px; }
  #page-medication .medication-item.taken,
  #page-medication .medication-item.checked {
    background: #f0fdf4; border-color: #bbf7d0;
  }

  /* ── Buttons: brand gradient primaries ── */
  #page-medication .btn-primary {
    background: linear-gradient(135deg, var(--cbm-primary-500) 0%, var(--cbm-primary-600) 100%);
    border-radius: var(--cbm-radius);
  }
}