/* ============================================================
   .uk-request-* — the public data-request form at /request
   ============================================================
   One form serves both request types. A radio group styled as a segmented
   control picks the type, and the matching field panel is revealed with
   :has(). No JavaScript is involved in the switching, so the selector works
   with scripts off, browser back/forward restores it, and form.reset() needs
   no re-sync.

   The heading and lede above the form are deliberately fixed — they describe
   the page rather than the selected mode, so nothing above the form shifts
   when the selector changes.

   The `uk-` prefix on the segmented classes is load-bearing: public/js/ui-kit.js
   delegates a click handler onto the UNPREFIXED `.input-segmented-btn` to toggle
   an .active class between siblings. classList.contains() is an exact token
   match, so the prefixed name keeps that handler away from these labels, where
   it would otherwise fight the radios for control of the active state.

   Loaded only by resources/views/requests/index.blade.php, not from
   components/ui-kit-assets (that partial loads site-wide).
   ============================================================ */

/* ============================================
   Vertical rhythm
   ============================================
   .uk-form-field is `display: flex; flex-direction: column; gap: space-sm`
   with NO margin of its own — the design system expects the container to
   supply the spacing between fields, the way .uk-form-row supplies it
   horizontally. Without a gap here the fields stack flush against each
   other, and because the label-to-input gap inside a field is the only
   spacing left, every label reads as belonging to the input ABOVE it.

   space-lg between fields against space-sm inside one keeps that
   relationship unambiguous.
   ============================================ */
.uk-request-page #requestForm {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* The panels take the same rhythm, but `display` is deliberately NOT set
   here — it belongs to the show/hide rules further down. Setting it in this
   rule with #requestForm in the selector would outrank them on specificity
   and leave both panels permanently visible. */
.uk-request-page [data-mode] {
    flex-direction: column;
    gap: var(--space-lg);
}

.uk-request-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ============================================
   Visually-hidden helpers
   ============================================
   Off-screen via clip-rect rather than display:none. The radios must stay
   focusable and reachable by assistive tech; the honeypot must still look
   fillable to a bot that skips display:none fields.

   Both are position:absolute, so neither becomes a flex item and neither
   contributes a stray gap to the column above.
   ============================================ */
.uk-request-type-radio,
.uk-request-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Type selector
   ============================================ */

/* UA styles on fieldset would otherwise add a border and, via
   min-inline-size: min-content, stop the control shrinking on narrow screens. */
.uk-request-type {
    border: 0;
    padding: 0;
    min-width: 0;
}

/* <legend> needs the padding reset UA styles apply to legends specifically.

   margin-bottom is doing real work here rather than being cosmetic: the
   rendered <legend> is lifted out of the fieldset's formatting context, so it
   never becomes a flex item and the container's `gap` does NOT apply between
   it and the control below. Left alone it sits flush at 0px while every other
   field in the form has space-sm between its label and its input. This puts
   the type selector back in step with them. */
.uk-request-type > legend {
    padding: 0;
    margin-bottom: var(--space-sm);
}

/* Grid rather than the inherited inline-flex, for two reasons:
   grid-auto-columns: 1fr makes both segments exactly as wide as the widest
   one, so the control is not lopsided; and width: fit-content with
   align-self stops it stretching to the full form width, which it otherwise
   does as a stretch-aligned flex item of .uk-form-field. */
.uk-request-type-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
}

.uk-request-type-segmented .uk-input-segmented-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Reproduces .uk-input-segmented-btn.active from uk-forms.css, driven by the
   radio instead of a JS class toggle. */
.uk-input-segmented-btn:has(.uk-request-type-radio:checked) {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

/* The clipped radio swallows the focus ring, so put it back on the label.
   Without this the control is unusable by keyboard. */
.uk-input-segmented-btn:has(.uk-request-type-radio:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* ============================================
   Type-scoped panels
   ============================================
   Scoped to .uk-request-page rather than to the <form> so the hook stays
   available to anything outside the form that ever needs it.
   ============================================ */
.uk-request-page [data-mode] {
    display: none;
}

.uk-request-page:has(.uk-request-type-radio[value="removal"]:checked) [data-mode="removal"],
.uk-request-page:has(.uk-request-type-radio[value="restriction"]:checked) [data-mode="restriction"] {
    display: flex;
}

/* ============================================
   Narrow screens
   ============================================ */
@media (max-width: 480px) {
    .uk-request-type-segmented {
        width: 100%;
    }
}

/* ============================================
   Fallback for browsers without :has()
   ============================================
   Reveal everything. The result is one long form showing both request types
   with unambiguous labels, which is usable — the failure mode is verbosity,
   not a form that cannot be filled in.
   ============================================ */
@supports not (selector(:has(*))) {
    .uk-request-page [data-mode] {
        display: flex;
    }

    /* With both panels open the segmented control no longer reflects anything,
       and a control that cannot show its own state is worse than none. Fall
       back to plain visible radios. */
    .uk-request-type-radio {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0.5rem 0 0;
        clip: auto;
    }

    .uk-request-type-segmented {
        display: flex;
        gap: var(--space-md);
        background: transparent;
        border: 0;
    }
}