/* Care hand-off — cream ground, one warm crisis card, then the list.
   Sizes and radii are the design's own px values; every color is a token. */

.ro-care {
  background: var(--color-bg);
  padding: 66px 18px 14px;
  gap: 14px;
}

/* — heading row: 44px back button, title, where you are — */
.ro-care-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ro-care-headtext { flex: 1; }
.ro-care-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 21px;
  line-height: 1.1;
}
.ro-care-place {
  margin-top: 3px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* — the crisis card comes before the list, on purpose — */
.ro-care-crisis {
  background: var(--color-accent-200);
  border-radius: 24px;
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ro-care-crisis-line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-accent-900);
}

/* An anchor, not a button: tapping it dials. */
.ro-care-call {
  height: 44px;
  background: var(--color-accent-700);
  color: var(--color-bg);
  font-size: 13.5px;
}
.ro-care-call:hover { background: var(--color-accent-800); }
.ro-care-call:active { background: var(--color-accent-900); }

/* — one card per clinician — */
.ro-care-card {
  background: var(--color-surface);
  border-radius: 24px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ro-care-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ro-care-id {
  flex: 1;
  min-width: 0;
}
.ro-care-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
}
.ro-care-cred {
  margin-top: 2px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.ro-care-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* — what kind of help — */
.ro-care-ask {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.2;
  margin-top: 4px;
}

.ro-care-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ro-care-chip {
  border-radius: 999px;
  padding: 9px 14px;
  font: 600 12.5px var(--font-body);
  background: var(--color-surface);
  color: var(--color-neutral-800);
}
.ro-care-chip:hover { background: var(--color-neutral-300); }
.ro-care-chip:active { background: var(--color-neutral-400); }
.ro-care-chip.is-on {
  background: var(--color-accent-700);
  color: var(--color-accent-100);
}
.ro-care-chip.is-on:hover { background: var(--color-accent-800); }

/* — one service — */
.ro-care-svc {
  border-radius: 26px;
  padding: 18px 19px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ro-care-svc--accent { background: var(--color-accent-200); }
.ro-care-svc--accent-2 { background: var(--color-accent-2-100); }
.ro-care-svc--neutral { background: var(--color-surface); }

.ro-care-svcname {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16.5px;
  line-height: 1.2;
}
.ro-care-svc--accent .ro-care-svcname { color: var(--color-accent-900); }
.ro-care-svc--accent-2 .ro-care-svcname { color: var(--color-accent-2-900); }

.ro-care-svcwhat { font-size: 12.5px; line-height: 1.55; }
.ro-care-svc--accent .ro-care-svcwhat { color: var(--color-accent-800); }
.ro-care-svc--accent-2 .ro-care-svcwhat { color: var(--color-accent-2-800); }
.ro-care-svc--neutral .ro-care-svcwhat { color: var(--color-neutral-800); }

.ro-care-svcgo {
  align-self: flex-start;
  height: 42px;
  padding-inline: 18px;
  font-size: 13.5px;
  background: var(--color-accent-700);
  color: var(--color-bg);
}
.ro-care-svcgo:hover { background: var(--color-accent-800); }
.ro-care-svcgo:active { background: var(--color-accent-900); }
.ro-care-svc--accent-2 .ro-care-svcgo { background: var(--color-accent-2-700); color: var(--color-accent-2-100); }
.ro-care-svc--accent-2 .ro-care-svcgo:hover { background: var(--color-accent-2-800); }
.ro-care-svc--neutral .ro-care-svcgo { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.ro-care-svc--neutral .ro-care-svcgo:hover { background: var(--color-neutral-900); }

.ro-care-therapists {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}