/* ============================================================
   Caribou Health — NTK Page 1 (intake step 1: diagnosis + metrics)
   Restyled per the "Mobile UX" Claude Design project (Intake.html,
   Intake.jsx step "Health story"). Mobile-scoped: desktop intake
   keeps the existing look. Reuses --cbm-* tokens (mobile-auth.css).
   ============================================================ */

@media (max-width: 640px) {

  /* ── Step title per design (display serif + sub) ── */
  #page-intake .ntk-step-title {
    font-family: var(--cbm-font-display);
    font-size: 24px; font-weight: 400; line-height: 1.2;
    color: var(--cbm-gray-900);
  }
  #page-intake .ntk-step-sub { font-size: 14px; line-height: 1.45; }

  /* Card header slims down — the step provides its own heading */
  #page-intake .card-header p { display: none; }
  #page-intake .card-header h1 {
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cbm-primary-600);
    font-family: var(--cbm-font-sans);
  }
  #page-intake .intake-logo { width: 34px; height: 34px; }

  /* ── Progress: labeled arrows → five thin bars ── */
  #page-intake .progress-arrow { display: none; }
  #page-intake .progress-steps-container {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 5px; padding: 0; margin-bottom: 16px;
  }
  #page-intake .progress-step {
    flex: 1 1 0; width: auto; min-width: 0; max-width: none;
    height: 5px; border-radius: 99px;
    background: var(--cbm-gray-200); padding: 0; margin: 0;
    transition: background .25s ease;
  }
  #page-intake .progress-step.active,
  #page-intake .progress-step.completed { background: var(--cbm-primary-500); }
  #page-intake .progress-step .progress-step-label { display: none; }

  /* ── Labels, hints & inputs per design (all intake steps) ── */
  #page-intake .intake-step .form-label {
    font-size: 13.5px; font-weight: 600; color: var(--cbm-gray-700);
  }
  #page-intake .intake-step .form-hint {
    font-size: 12px; color: var(--cbm-gray-400); line-height: 1.4;
  }
  #page-intake .intake-step .form-input,
  #page-intake .intake-step .form-textarea,
  #page-intake .intake-step .form-select {
    border: 1px solid var(--cbm-gray-300); border-radius: var(--cbm-radius);
    padding: 11px 14px; font-size: 15px;
  }

  /* ── Exercise step: radios + rating scales → design chips ── */
  #page-intake .intake-step .form-check {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; margin: 0 8px 8px 0 !important;
    border: 1.5px solid var(--cbm-gray-200); border-radius: 9999px;
    background: #fff; font-size: 14px; font-weight: 500;
    color: var(--cbm-gray-700); cursor: pointer; transition: all .15s ease;
  }
  #page-intake .intake-step .form-check:has(input:checked) {
    border-color: var(--cbm-primary-500); background: #e8f4f3;
    color: var(--cbm-primary-700); font-weight: 600;
  }
  #page-intake .intake-step .form-check input {
    accent-color: var(--cbm-primary-600);
  }
  #page-intake .intake-step .rating-scale {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  #page-intake .intake-step .rating-item {
    flex: 0 0 auto; width: auto; min-width: 0; height: auto; min-height: 0;
    padding: 9px 14px; margin: 0; box-shadow: none;
    border: 1.5px solid var(--cbm-gray-200); border-radius: 9999px;
    background: #fff; font-size: 14px; font-weight: 500;
    color: var(--cbm-gray-700); transition: all .15s ease;
  }
  #page-intake .intake-step .rating-item.selected {
    border-color: var(--cbm-primary-500) !important;
    background: #e8f4f3 !important;
    color: var(--cbm-primary-700) !important; font-weight: 600;
  }

  /* ── Nutrition step: icon tile grid → design chips ── */
  #page-intake .intake-step .tracker-section-header h3 {
    font-family: var(--cbm-font-sans); font-size: 13.5px; font-weight: 600;
    color: var(--cbm-gray-700);
  }
  #page-intake .intake-step .icon-select-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  #page-intake .intake-step .icon-select-item {
    display: inline-flex; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 6px; flex: 0 0 auto;
    width: auto; min-width: 0; height: auto; min-height: 0; aspect-ratio: auto;
    padding: 9px 14px; margin: 0; box-shadow: none;
    border: 1.5px solid var(--cbm-gray-200); border-radius: 9999px;
    background: #fff; font-size: 14px; font-weight: 500;
    color: var(--cbm-gray-700); transition: all .15s ease;
  }
  /* hide the old corner checkmark badge — selection reads via the teal fill */
  #page-intake .intake-step .icon-select-item::after,
  #page-intake .intake-step .icon-select-item .check-badge,
  #page-intake .intake-step .icon-select-item .icon-select-check {
    display: none;
  }
  #page-intake .intake-step .icon-select-item .icon-wrapper {
    width: 16px; height: 16px; margin: 0; background: none; border-radius: 0;
    color: inherit; flex-shrink: 0;
  }
  #page-intake .intake-step .icon-select-item .icon-wrapper svg {
    width: 15px; height: 15px;
  }
  #page-intake .intake-step .icon-select-item.selected {
    border-color: var(--cbm-primary-500); background: #e8f4f3;
    color: var(--cbm-primary-700); font-weight: 600;
  }

  /* ── Medical step: privacy banner → design's teal confidentiality note ── */
  #page-intake .safety-banner {
    background: #e8f4f3 !important; border: 1px solid #d1eae8 !important;
    border-radius: var(--cbm-radius); padding: 13px;
    color: var(--cbm-primary-800);
  }
  #page-intake .safety-banner p {
    font-size: 12.5px !important; line-height: 1.5;
    color: var(--cbm-primary-800) !important;
  }
  #page-intake .safety-banner svg { color: var(--cbm-primary-600) !important; }

  /* ── Metrics note: big banner → compact teal note ── */
  #page-intake .ntk-metric-note {
    background: #e8f4f3 !important;
    border: 1px solid #d1eae8;
    border-radius: var(--cbm-radius) !important;
    padding: 10px 12px !important;
    margin: 4px 0 16px !important;
  }
  #page-intake .ntk-metric-note p {
    font-size: 12.5px !important; line-height: 1.4;
    color: var(--cbm-primary-700) !important;
  }
}

/* ── Chip controls (units + biological sex) — all viewport sizes,
      class applied only when the NTK enhancement runs ── */
.ntk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ntk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 9999px;
  border: 1.5px solid var(--cbm-gray-200); background: #fff;
  font-family: var(--cbm-font-sans); font-size: 14px; font-weight: 500;
  color: var(--cbm-gray-700); cursor: pointer; transition: all .15s ease;
}
.ntk-chip[aria-pressed="true"],
.ntk-chips .ntk-chip.selected {
  border-color: var(--cbm-primary-500); background: #e8f4f3;
  color: var(--cbm-primary-700); font-weight: 600;
}

/* Beat the app's own .unit-toggle styling when chipified */
.unit-toggle.ntk-chips { background: none; border: none; padding: 0; }
.unit-toggle.ntk-chips .unit-option {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 9999px;
  border: 1.5px solid var(--cbm-gray-200); background: #fff;
  font-size: 14px; font-weight: 500; color: var(--cbm-gray-700);
}
.unit-toggle.ntk-chips .unit-option.selected,
.unit-toggle.ntk-chips .unit-option[aria-pressed="true"] {
  border-color: var(--cbm-primary-500); background: #e8f4f3;
  color: var(--cbm-primary-700); font-weight: 600;
}
.ntk-chip[aria-pressed="true"]::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}