/* Card, the settings variant (v5): a sheet of the pure paper on the drawn ground. No border, no shadow, no lift on
   hover; the chosen one is outlined in the account's color, and a logo stands loose, without a tinted tile. */
:where(html[data-visual="v5"]) :is(.cs-panel, .cs-conn-card, .cs-chanpicker-card, .cs-choice-card) {
  border: 0;
  border-radius: var(--ds-radius-2xl);
  background-color: var(--ds-bg-pure);
  box-shadow: none;
}
:where(html[data-visual="v5"]) :is(.cs-panel, .cs-chanpicker-card, .cs-choice-card) { padding: var(--ds-space-6); }
:where(html[data-visual="v5"]) .cs-choice-card { transition: background-color 0.15s ease; }
:where(html[data-visual="v5"]) .cs-choice-card:hover { box-shadow: none; transform: none; }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-choice-card:hover { background-color: var(--ds-fill-hover); }
}
:where(html[data-visual="v5"]) .cs-choice-card:has(.cs-choice-card__input:checked) {
  background-color: var(--ds-bg-pure);
  box-shadow: none;
  outline: 2px solid var(--ds-cta);
  outline-offset: -2px;
}
:where(html[data-visual="v5"]) .cs-chanpicker-card[data-unavailable="true"] { opacity: 1; color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-conn-card__logo { background: none; color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-conn-card__head { padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-conn-card__block { padding: var(--ds-space-4) var(--ds-space-6); }
:where(html[data-visual="v5"]) .cs-conn-card__divider { margin-inline: var(--ds-space-6); background-color: var(--ds-border); }
:where(html[data-visual="v5"]) :is(.cs-panel__title, .cs-conn-card__kind) {
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.06em;
  color: var(--ds-text-muted);
}
/* A field on the sheet keeps its edge: the box's border is the strong one (3:1 on the paper), as on the contact form. */
:where(html[data-visual="v5"]) :is(.cs-panel, .cs-conn-card, .cs-chanpicker-card) .input--box {
  --input-background: var(--ds-bg-pure);
  --input-border-color: var(--ds-border-strong);
  --input-border-radius: var(--ds-radius-xl);
}