/* ============================================
   xm-radio-group + xm-radio — single-choice group (Story 2.6).

   Two BEM blocks in one file (multi-element component, AD-4):
     • `radio-group` — the form-associated value owner (extends XmField). Lays
       out the group label, the radiogroup options column, and the helper/error
       row. Chrome semantics (disabled / error) mirror the field family.
     • `radio` — a selectable, presentational child: the hairline circle + coral
       dot + label. Value/selection/disabled are driven by the group.

   Surface & ink (AD-13): both ride the inverse-surface card tier — label + radio
   text are inverse-on-surface ink; the circle hairline is outline-variant. The
   SELECTED radio fills its dot + ring with the single coral accent
   (--md-sys-color-primary). Coral = selection only, never severity (AD-11). The
   error string in the message row carries severity via the warn icon + copy.

   BEM blocks: `radio-group` and `radio`. Both registered in
   scripts/check-bem.sh STRICT_BLOCKS.
   ============================================ */

/* ──────────────── radio-group block ──────────────── */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
}

.radio-group__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-label-large-weight)
    var(--md-sys-typescale-label-large-size) /
    var(--md-sys-typescale-label-large-line-height)
    var(--md-sys-typescale-label-large-font);
}
.radio-group__label-text {
  letter-spacing: 0;
}
.radio-group__required {
  color: var(--md-sys-color-primary);
  font-weight: 700;
  line-height: 1;
}

.radio-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.radio-group__message {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: 1em;
  font:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
}
.radio-group__message--helper {
  color: var(--xm-color-inverse-on-surface-muted);
}
.radio-group__message--error {
  color: var(--md-sys-color-inverse-on-surface);
}
.radio-group__error-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--md-sys-color-inverse-on-surface);
}
.radio-group__message-text {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}

/* ──────────────── radio block ──────────────── */
/* Focus ring lives on the host (the focusable element) — the inner circle gets
   the coral halo when the host is focus-visible. */
:host(:focus-visible) {
  outline: none;
}
:host(:focus-visible) .radio__circle {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--xm-state-focus-ring);
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  user-select: none;
}

.radio__circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.radio:hover .radio__circle {
  border-color: var(--md-sys-color-outline);
}

/* The inner dot — hidden until selected, then coral. Fades in (opacity), not a
   scale-in reveal (POLICIES.md rule 8: no scale-in). */
.radio__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}

.radio__label {
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-body-medium-weight)
    var(--md-sys-typescale-body-medium-size) /
    var(--md-sys-typescale-body-medium-line-height)
    var(--md-sys-typescale-body-medium-font);
  letter-spacing: 0;
}

/* Selected — coral ring + visible dot. */
.radio--checked .radio__circle {
  border-color: var(--md-sys-color-primary);
}
.radio--checked .radio__dot {
  opacity: 1;
}
.radio--checked:hover .radio__circle {
  border-color: var(--md-sys-color-primary);
}

/* Disabled — reduced emphasis, hover reverted, no pointer. */
.radio--disabled {
  cursor: not-allowed;
}
.radio--disabled .radio__circle {
  opacity: 0.45;
  box-shadow: none;
}
.radio--disabled .radio__label {
  color: var(--xm-color-inverse-on-surface-disabled);
}
.radio--disabled:hover .radio__circle {
  border-color: var(--md-sys-color-outline-variant);
}
.radio--disabled.radio--checked:hover .radio__circle {
  border-color: var(--md-sys-color-primary);
}

/* Group disabled cascades to the option text + label. */
.radio-group--disabled .radio-group__label {
  color: var(--xm-color-inverse-on-surface-disabled);
}