/* Delivery-channel picker (`/channel-picker.js`) — the ONE multi-select channel
   control's stylesheet.

   It lives in its own file, beside its own script, because the component is mounted
   on more than one page: the alerts wizard and the Roam purchase flow. Parked inside
   `alerts.css` it was only styled where the alerts wizard happened to be loaded, so
   the shared component rendered unstyled anywhere else — and "reuse the existing
   component" then quietly means "reuse the markup, rebuild the look", which is how a
   second divergent picker gets born (docs/standards/web-ux.md: one canonical control).

   Every page that loads `/channel-picker.js` must load this too. */

.cp {
  border: 0;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cp__legend {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest-deep);
  padding: 0;
}

.cp__hint { margin: 0; font-size: 0.86rem; color: var(--sage); }

.cp__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper-card);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}
.cp__opt:hover { border-color: var(--forest); }
.cp__opt:has(input:checked) { border-color: var(--forest); background: var(--paper-soft); }
.cp__opt:has(input:disabled) { cursor: default; }

.cp__opt input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--forest);
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.cp__body strong { display: block; color: var(--ink); font-weight: 600; }
.cp__note { display: block; margin-top: 0.15rem; font-size: 0.86rem; color: var(--sage); line-height: 1.45; }

/* The standing constraint tag ("on its own", "needs a phone"). Set on every repaint
   from the CURRENT rule, so an empty one must reserve no space — otherwise a channel
   with nothing to qualify sits oddly wider than its neighbours. */
.cp__tag {
  margin-left: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage);
}
.cp__tag:empty { display: none; }

/* The go-and-fix-it link on a channel whose prerequisite is unmet. Deliberately
   prominent (ember, underlined): it is the ONLY way out of that state, and a buyer
   who cannot find it reads the greyed-out box as "we don't do texts". */
.cp__action {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ember-deep);
  text-decoration: underline;
}
.cp__action[hidden] { display: none; }

.cp__status { margin: 0; font-size: 0.86rem; color: var(--ember-deep); }
/* Why the last-remaining channel is greyed out. Quieter than .cp__status — this is
   standing context, not a reaction to something the user just did, and an empty
   element must not reserve space. */
.cp__floor { margin: 0; font-size: 0.84rem; color: var(--sage); }
.cp__floor:empty { display: none; }

/* "Visible but inert" (WIZ-7): the control still advertises the capability but
   cannot arm a reminder that would never fire. Deliberately NOT display:none. */
.cp.is-inert { opacity: 0.55; }
.cp.is-inert .cp__opt { cursor: default; }