@layer components {
  /* Visibility choices: PATCH buttons in a channel's settings, real radios in the new-channel box. */
  .settings-card {
    position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--background); color: var(--foreground);
    font: inherit; text-align: left;
  }
  button.settings-card, label.settings-card { cursor: pointer; }
  button.settings-card:is(:hover, :active), label.settings-card:hover { background: var(--secondary); }
  .settings-card:focus-visible, label.settings-card:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 3px var(--jx-accent); }
  .settings-card[aria-checked="true"], label.settings-card:has(input:checked) {
    border-color: var(--jx-accent); background: var(--jx-accent-soft, var(--secondary));
  }
  .settings-radio { flex: none; width: 14px; height: 14px; margin-top: 2px; border: 1px solid var(--border); border-radius: 50%; }
  .settings-card[aria-checked="true"] .settings-radio, label.settings-card:has(input:checked) .settings-radio {
    border: 4px solid var(--jx-accent);
  }
  .settings-card-text { display: flex; flex-direction: column; gap: 2px; }
  .settings-card-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
  .settings-card-hint { color: var(--muted-foreground); line-height: 1.4; }

  /* The real input stays focusable and in the accessibility tree; the card draws its state. */
  .settings-card-input {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none;
  }
  label.settings-card:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
  label.settings-card:has(input:disabled):hover { background: var(--background); }
  label.settings-card:has(input:disabled:checked) { outline: 1px solid var(--jx-accent); }
}