/* channel-picker.css — the join form's delivery-channel picker (Ash-approved 18:49 HST Thu 10/22,
   COS row ...c291222bc003): ONE pill segmented control shared by both brands.
   Brand = config: every colour here is read from the page's :root tokens (DESIGN_SYSTEM.md) — the
   file holds NO colour literals, so the same bytes serve Performations (green) and Cosonics (purple).
   Anatomy: one rounded track (.cpick) holding two equal segments (.cpick-seg); the checked segment is
   a raised darker fill with a thin light border; icon left, label line 1, muted subtext line 2.
   Semantics stay native: a real <input type=radio> per segment (role radio, name=delivery_channel),
   so Tab enters the group on the checked radio and the arrow keys move + check — no JS needed for
   keyboard or for the submitted value. channel-picker.js only mirrors state into classes for
   browsers without :has(). Light theme: a page that flips its tokens (or sets data-theme="light")
   gets a light picker from the same rules; only the raised shadow's hue changes. */
.cpick {
  --cp-h: var(--ctl-h, 54px);                                   /* the row's one control height */
  --cp-track: color-mix(in srgb, var(--surface-dark-raised) 86%, var(--ink)); /* the dark track: a step lighter than the card it sits on */
  --cp-seg: var(--surface-dark);                                /* the raised, darker checked fill */
  --cp-seg-line: var(--ink-mute);                                /* its thin light border: 1px, >= 3:1 on the track (WCAG 1.4.11) */
  --cp-shadow: color-mix(in srgb, var(--surface-dark) 70%, transparent);
  --cp-ink: var(--ink);
  --cp-mute: var(--ink-soft);                                   /* sub-line + idle label: >= 4.5:1 on track AND on the checked fill (was ink-mute, 3.7:1 on the track) */
  --cp-icon-on: var(--accent-bright);                           /* the brand shows in the checked icon */
  --cp-focus: var(--accent-bright);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--cp-track);
  border: 1px solid var(--line-dark);
  min-height: var(--cp-h); box-sizing: border-box;
  position: relative;
}
:root[data-theme="light"] .cpick { --cp-shadow: color-mix(in srgb, var(--ink) 18%, transparent); }
.cpick-seg {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px;
  min-height: 44px; min-width: 0; padding: 4px 10px 4px 12px;
  border-radius: 999px; border: 1px solid transparent;
  color: var(--cp-mute); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.cpick-seg:hover { color: var(--cp-ink); }
/* the visually-hidden native radio: still focusable, still in the form, still the submitted value */
.cpick-input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
  top: 50%; left: 50%; pointer-events: none; appearance: none; -webkit-appearance: none;
}
.cpick-icon { width: 18px; height: 18px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cpick-icon.cpick-icon-fill { fill: currentColor; stroke: none; }
.cpick-text { display: block; min-width: 0; line-height: 1.2; }
.cpick-label { display: block; font-size: 0.9rem; font-weight: 600; color: inherit; }
.cpick-sub { display: block; font-size: 0.72rem; font-weight: 400; color: var(--cp-mute); margin-top: 1px; }
/* checked = raised darker fill + thin light border (CSS :has first; .is-checked is the JS mirror) */
.cpick-seg:has(.cpick-input:checked), .cpick-seg.is-checked {
  background: var(--cp-seg); border-color: var(--cp-seg-line); color: var(--cp-ink);
  box-shadow: 0 1px 2px var(--cp-shadow), 0 2px 6px var(--cp-shadow);
}
.cpick-seg:has(.cpick-input:checked) .cpick-icon, .cpick-seg.is-checked .cpick-icon { color: var(--cp-icon-on); }
/* visible focus ring on the segment whose radio has keyboard focus */
.cpick-seg:has(.cpick-input:focus-visible), .cpick-seg.is-focus { outline: 2px solid var(--cp-focus); outline-offset: 2px; }
/* phone widths: tighter padding + a 16px icon keep 'Text message' on one line at 375px; at 320px the label
   may wrap at its space (never mid-word) — the two segments stay side by side with 44px targets */
@media (max-width: 480px) { .cpick-seg { padding: 4px 6px 4px 10px; column-gap: 6px; } .cpick-icon { width: 16px; height: 16px; } .cpick-label { font-size: 0.84rem; } .cpick-sub { font-size: 0.7rem; } }
@media (prefers-reduced-motion: reduce) { .cpick-seg { transition: none; } }