/*
 * FM-11 Radio & radio card — app/components/ui/radio_component.rb,
 * app/components/ui/radio_card_component.rb
 *
 * Plain radio mirrors checkbox.css's approach (real input + drawn box via
 * sibling combinator, 44px row). Radio cards are plain <label>s built on
 * .surface-glass with a real radio hidden with Tailwind's sr-only utility
 * (not display: none, so it stays in the tab order and arrow-key group
 * navigation — a native browser behaviour for same-name radios — keeps
 * working). Grouping radio cards under role="radiogroup" is the caller's
 * job in the view; native inputs sharing a `name` already arrow-navigate
 * without any JS.
 *
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

/* ---------------------------------------------------------------------- */
/* Plain radio                                                            */
/* ---------------------------------------------------------------------- */

.ui-radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  cursor: pointer;
}

.ui-radio-row--disabled {
  cursor: not-allowed;
}

.ui-radio {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
}

.ui-radio__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ui-radio__input:disabled {
  cursor: not-allowed;
}

.ui-radio__dot-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-round);
  background: var(--color-surface-inset);
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-radio__dot {
  width: 40%;
  height: 40%;
  border-radius: var(--radius-round);
  background: var(--color-on-accent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.ui-radio__input:checked ~ .ui-radio__dot-frame {
  background: var(--color-accent-strong);
}

.ui-radio__input:checked ~ .ui-radio__dot-frame .ui-radio__dot {
  opacity: 1;
}

.ui-radio__input:focus-visible ~ .ui-radio__dot-frame {
  box-shadow: var(--focus-halo);
}

.ui-radio__input:disabled ~ .ui-radio__dot-frame {
  background: var(--color-surface-sunken);
}

.ui-radio__input:checked:disabled ~ .ui-radio__dot-frame {
  background: var(--color-accent-300);
}

.ui-radio__label {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

.ui-radio-row--disabled .ui-radio__label {
  color: var(--color-ink-disabled);
}

/* ---------------------------------------------------------------------- */
/* Radio card                                                             */
/* ---------------------------------------------------------------------- */

.ui-radio-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  border: 2px solid transparent; /* reserves the --border-selected width so selecting never reflows */
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-radio-card:hover,
.ui-radio-card.is-hover {
  box-shadow: var(--shadow-sm);
}

/* :has() covers real interaction (native radios in the same group can be
   checked without this card's own component re-rendering); :focus-within
   is the fallback for browsers without :has() support. */
.ui-radio-card:has(.ui-radio-card__input:focus-visible),
.ui-radio-card:focus-within {
  box-shadow: var(--focus-halo);
}

.ui-radio-card--selected,
.ui-radio-card:has(.ui-radio-card__input:checked) {
  border: var(--border-selected);
}

.ui-radio-card--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ui-radio-card__icon {
  flex-shrink: 0;
  color: var(--color-ink-muted);
}

.ui-radio-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ui-radio-card__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.ui-radio-card__description {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
}