/* ============================================================
   <app-radio> / <app-radio-group> — project-owned radio (ADR 0014)

   Native <input type="radio"> with appearance: none, paired with
   a sibling circle span that renders the visual control and the
   selected dot. The input stays the source of truth for focus,
   keyboard activation, selection, form serialization, and a11y;
   the circle span is purely decorative (aria-hidden in markup).

   Visual language matches <app-checkbox> (accent fill + light
   glyph); the shape is a circle with a centre dot. The group
   stacks its options vertically — callers never need layout
   utilities or a Bootstrap .row.

   Lives in @layer components so it sits below @layer brand and
   @layer utilities — host brand overrides and per-element utility
   classes both win cleanly.

   Tokens consumed (semantic only):
     --color-accent       — selected fill
     --color-accent-deep  — focus halo + hover border
     --color-line         — unselected border
     --color-ink          — label text
     --color-ink-mute     — disabled label text
     --color-on-dark      — dot on the accent fill
     --color-surface      — unselected fill
     --color-surface-alt  — disabled fill
     --color-error        — invalid-state border
     --space-2            — label gap
     --space-3            — gap between stacked options
   ============================================================ */
@layer components {

    /* Stacks options vertically with consistent spacing. */
    .app-radio-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .app-radio {
        display: inline-flex;
        /* flex-start, not center: role labels are long and wrap, so the circle
           should align to the first line, not the vertical middle of a paragraph. */
        align-items: flex-start;
        gap: var(--space-2);
        cursor: pointer;
        font-size: 0.9375rem;
        line-height: 1.4;
        color: var(--color-ink);
        user-select: none;
    }

    /* Native input — visually hidden but kept focusable and in the tab order.
       Same recipe as .app-checkbox__input. */
    .app-radio__input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }

    /* Visible circle. */
    .app-radio__circle {
        inline-size: 1.125rem;
        block-size: 1.125rem;
        flex: 0 0 auto;
        /* nudge down so the circle sits centred on the first line of text */
        margin-block-start: 0.0625rem;
        border: 1.5px solid var(--color-line);
        border-radius: 50%;
        background: var(--color-surface);
        display: inline-grid;
        place-items: center;
        transition:
            background-color 120ms ease,
            border-color 120ms ease,
            box-shadow 120ms ease;
    }

    /* Centre dot — hidden until selected. */
    .app-radio__circle::after {
        content: "";
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background: var(--color-on-dark);
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 120ms ease, transform 120ms ease;
    }

    /* Selected state — accent fill, light dot. */
    .app-radio__input:checked + .app-radio__circle {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }
    .app-radio__input:checked + .app-radio__circle::after {
        opacity: 1;
        transform: scale(1);
    }

    /* Hover (on the label) — only when not disabled. */
    .app-radio:hover .app-radio__input:not(:disabled) + .app-radio__circle {
        border-color: var(--color-accent-deep);
    }

    /* Focus ring — keyboard users only (:focus-visible), applied to the circle. */
    .app-radio__input:focus-visible + .app-radio__circle {
        outline: 2px solid var(--color-accent-deep);
        outline-offset: 2px;
    }

    /* Active (pressing) — slight inset feedback. */
    .app-radio__input:active:not(:disabled) + .app-radio__circle {
        transform: translateY(0.5px);
    }

    /* Disabled state. */
    .app-radio--disabled,
    .app-radio:has(.app-radio__input:disabled) {
        cursor: not-allowed;
        color: var(--color-ink-mute);
    }
    .app-radio__input:disabled + .app-radio__circle {
        background-color: var(--color-surface-alt);
        border-color: var(--color-line);
        opacity: 0.6;
    }

    /* Validation — tint the circle when the input carries the error class/flag
       the FormValidator + app-form pipeline apply. */
    .app-radio__input.input-validation-error + .app-radio__circle,
    .app-radio__input[aria-invalid="true"] + .app-radio__circle {
        border-color: var(--color-error);
    }

    .app-radio__label {
        /* Inherits colour from .app-radio; hook for per-surface spacing/typography. */
    }
}