/* ===== Radio Component ===== */

.ui-radio-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ui-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

/* #10567 triad round 3 (ultra-r2 a11y-1): was `display: none`, which removes the native input from
   both the tab order and the accessibility tree -- a keyboard or screen-reader user could never
   select a reason, and Submit (disabled until a reason is chosen) never enabled. Visually hidden but
   focusable instead (the same clip-rect pattern friendlist.css's .visually-hidden already uses in
   this repo), so Tab/arrow-key group navigation, AT role/name/state, and the :focus-visible ring
   below all work again; the click target is unaffected because .ui-radio is the <label>. */
.ui-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* --- Radio dot --- */

.radio-dot {
    width: 18px;
    height: 18px;
    background: var(--radio-background, var(--meb-surface-input, var(--meb-surface-card)));
    border: 1px solid var(--radio-border, var(--meb-border-input, var(--meb-border-subtle)));
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.ui-radio input:checked + .radio-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--radio-border-focus, var(--meb-accent-primary));
    /* Forced-colors mode repaints background in one system colour, so the selected dot would vanish into
       the circle. A transparent inset outline fills the dot and is repainted as a solid disc there
       (ADO 11309). */
    outline: calc(var(--meb-border-width-md) * 2) solid transparent;
    outline-offset: calc(var(--meb-border-width-md) * -2);
}

/* --- Label and error --- */

.radio-label {
    color: var(--radio-foreground, var(--meb-text-default));
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    user-select: none;
}

.radio-error {
    color: var(--radio-border-error, var(--meb-accent-danger));
    font-size: var(--text-xs);
}

/* --- Focus ring --- */

.ui-radio input:focus-visible + .radio-dot {
    /* Transparent, not none: forced-colors mode strips the box-shadow ring and repaints this outline in a system colour (ADO 11309). */
    outline: var(--meb-focus-ring-width) solid transparent;
    outline-offset: var(--meb-focus-ring-offset);
    border-color: var(--radio-border-focus, var(--meb-border-accent));
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}

/* --- Variant: Default --- */

.ui-radio-wrapper.variant-default .radio-dot {
    background: var(--radio-background, var(--meb-surface-input, var(--meb-surface-card)));
    border: 1px solid var(--radio-border, var(--meb-border-input, var(--meb-border-subtle)));
}

/* --- Variant: Outlined --- */

.ui-radio-wrapper.variant-outlined .radio-dot {
    background: transparent;
    border: 1px solid var(--radio-border, var(--meb-border-input, var(--meb-border-subtle)));
}

/* --- Variant: Filled --- */

.ui-radio-wrapper.variant-filled .radio-dot {
    background: var(--radio-background, var(--meb-surface-input-filled));
    border: 1px solid transparent;
}

/* --- Disabled state --- */

.ui-radio-wrapper.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ui-radio-wrapper.disabled .radio-dot {
    background: var(--radio-surface-disabled, var(--meb-surface-disabled));
    border-color: var(--radio-surface-disabled, var(--meb-surface-disabled));
}

.ui-radio-wrapper.disabled .radio-label {
    color: var(--radio-text-disabled, var(--meb-text-muted));
}

/* --- Error state --- */

.ui-radio-wrapper.error .radio-dot {
    border-color: var(--radio-border-error, var(--meb-accent-danger));
}