/*
    IRM_Lib_Forms stylesheet.
    Served at /_content/IRM_Lib_Forms/irm-forms.css, loaded after irm-theme.css.

    Every custom property read here is one IRM_Lib_Theme actually emits. The literals are
    standalone fallbacks for a host that loads this package without the theme; they are not the
    normal path. An earlier revision read --irm-color-text-muted, --irm-color-danger and
    --irm-color-focus, none of which the theme has ever emitted, so the fallbacks were the only
    path and no theme could reach a form control.
*/

.irm-form__section {
    margin-block: 2.5rem;
}

.irm-form__section:first-of-type {
    margin-block-start: 0;
}

.irm-form__heading {
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--irm-border, rgba(0, 0, 0, 0.15));
}

.irm-form__help {
    color: var(--irm-muted, #4f4f4f);
}

.irm-form__field {
    margin-block: 1.75rem;
}

/*
    One rule for every question name, whether it renders as a <label> for a single control or as a
    <legend> for a checkbox group. Matching on a shared class rather than on the element keeps the
    two identical by construction: a host stylesheet that restyles `label` cannot move one without
    the other, because neither is selected by its tag here. The class also scores 0-2-0 inside
    .irm-form__field, which is above the `.irm-page main label` shape a host is likely to write.
*/
.irm-form__field .irm-form__label {
    display: block;
    inline-size: 100%;
    max-inline-size: 48rem;
    margin-block: 0 0.375rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--irm-text, #212529);
}

.irm-form__label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-inline-size: 48rem;
}

.irm-form__label-row .irm-form__label {
    flex: 1;
    inline-size: auto;
    margin: 0;
}

.irm-form__label > span:first-child {
    margin-inline-end: 0.5rem;
}

.irm-form__requirement {
    color: var(--irm-muted, #4f4f4f);
    font-size: 0.875rem;
    font-weight: 400;
}

.irm-form__help-button {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #005ea5;
    font: inherit;
    cursor: pointer;
}

.irm-form__help-button > span {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-weight: 700;
    line-height: 1;
}

.irm-form__help-button:focus-visible {
    outline: 3px solid #005ea5;
    outline-offset: 2px;
}

.irm-form__help-popover {
    box-sizing: border-box;
    position: fixed;
    inset: auto;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
    inline-size: min(24rem, calc(100vw - 2rem));
    max-block-size: min(20rem, calc(100vh - 2rem));
    margin: 0.5rem 0 0;
    padding: 0.75rem 1rem;
    overflow: auto;
    border: 1px solid #005ea5;
    border-radius: var(--irm-radius, 4px);
    background: var(--irm-surface, #ffffff);
    color: var(--irm-text, #212529);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.irm-form__help {
    max-inline-size: 48rem;
    margin-block-end: 0.5rem;
    font-size: 0.9375rem;
}

.irm-form__review {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    max-inline-size: 48rem;
    min-block-size: 44px;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--irm-border, rgba(0, 0, 0, 0.15));
}

.irm-form__review-answer,
.irm-form__review-value,
.irm-form__review-source {
    display: block;
}

.irm-form__review-value {
    color: var(--irm-text, #212529);
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.irm-form__review-value + .irm-form__review-value {
    margin-block-start: 0.25rem;
}

.irm-form__review-source {
    margin-block-start: 0.25rem;
    color: var(--irm-muted, #4f4f4f);
    font-size: 0.875rem;
}

.irm-form__review-edit {
    flex: none;
    min-block-size: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--irm-primary, #d80d28);
    border-radius: var(--irm-radius, 4px);
    background: transparent;
    color: var(--irm-primary, #d80d28);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.irm-form__review-edit:focus-visible {
    outline: 3px solid var(--irm-primary, #d80d28);
    outline-offset: 2px;
}

@media (max-width: 30rem) {
    .irm-form__review {
        align-items: flex-start;
        flex-direction: column;
    }
}

/*
    font: inherit is the load-bearing declaration. Without it a control keeps its user-agent font,
    which is how this form ended up rendering labels in system-ui 16px, inputs in Arial 13.33px and
    textareas in monospace. 13.33px also makes Safari on iOS zoom the viewport on every focus.

    44px min-block-size clears WCAG 2.2 AA 2.5.8 (24px) with room to spare, which the audience for
    these forms needs: mostly phones, mostly one-handed, mostly once.
*/
.irm-form__field :where(input:not([type="checkbox"]), select, textarea) {
    display: block;
    /* border-box or min-block-size lands on the content box, and an <input> ends up 62px tall
       next to a <select> at 44px. .irm-page sets this on itself but it does not inherit. */
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 48rem;
    min-block-size: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--irm-border, rgba(0, 0, 0, 0.4));
    border-radius: var(--irm-radius, 4px);
    background: var(--irm-surface, #ffffff);
    color: var(--irm-text, #212529);
    font: inherit;
}

.irm-form__field textarea {
    min-block-size: 6rem;
    resize: vertical;
}

.irm-form__field :where(input, select, textarea)[aria-invalid="true"],
.irm-form__group[aria-invalid="true"] .irm-form__options {
    border-color: var(--irm-danger, #b10e1e);
}

/* Checkbox groups */

.irm-form__group {
    margin: 0;
    padding: 0;
    border: 0;
}

.irm-form__group > .irm-form__label-row {
    inline-size: 100%;
    padding: 0;
}

.irm-form__options {
    max-inline-size: 48rem;
    border: 1px solid var(--irm-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--irm-radius, 4px);
}

/*
    Long lists get a bounded, clearly scrollable region rather than an unbounded wall. The filter
    and the running count that irm-forms.js adds are what make the bound safe: nothing is hidden
    without a way to find it and a statement of how much is selected.
*/
.irm-form__options--scroll {
    max-block-size: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
    On touch, a scroll region inside a scrolling page makes every drag a guess about which one
    moves. The page scrolls better than the box does, so the cap comes off and the filter carries
    the long list instead.
*/
@media (pointer: coarse) {
    .irm-form__options--scroll {
        max-block-size: none;
        overflow-y: visible;
    }
}

/*
    Deliberately qualified with the container rather than written as a bare .irm-form__option.
    A host rule like `.irm-page main label { display: block; margin-block: 1rem; font-weight: 600 }`
    scores 0-1-2 and would beat a plain `.irm-form__option label` at 0-1-1 no matter what order the
    sheets load in, turning every row into a two-line bold heading with a stray checkbox above it.
    Qualifying takes these to 0-2-x and puts the component back in charge of its own rows.
*/
.irm-form__options .irm-form__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 44px;
    padding-inline: 0.75rem;
    border-block-end: 1px solid var(--irm-border, rgba(0, 0, 0, 0.15));
}

.irm-form__options .irm-form__option:last-child {
    border-block-end: 0;
}

.irm-form__options .irm-form__option:hover {
    background: color-mix(in srgb, var(--irm-text, #212529) 4%, transparent);
}

/*
    The resets are defensive, not decorative. A host application with a broad rule such as
    `main input { display: block; inline-size: 100%; min-block-size: 44px }` will otherwise inflate
    every checkbox into a full-width or 44px block and drop its label onto the next line. Stating
    all five properties means the box keeps its size no matter what the page says about inputs.
*/
.irm-form__options .irm-form__option input[type="checkbox"] {
    flex: none;
    display: inline-block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    min-block-size: 0;
    max-inline-size: none;
    padding: 0;
    margin: 0;
    aspect-ratio: 1;
    accent-color: var(--irm-primary, #d80d28);
}

/* The label fills the row, so the whole row is the target rather than the 20px box. Same defensive
   reasoning as the checkbox above: a host rule that makes every label a bold block with margins
   would otherwise break the row onto two lines. */
.irm-form__options .irm-form__option label {
    flex: 1;
    display: block;
    inline-size: auto;
    max-inline-size: none;
    margin: 0;
    padding-block: 0.625rem;
    font-weight: 400;
    cursor: pointer;
}

.irm-form__filter {
    margin-block-end: 0.5rem;
}

.irm-form__selected {
    margin-block-start: 0.5rem;
    color: var(--irm-muted, #4f4f4f);
    font-size: 0.9375rem;
}

.irm-form__no-matches {
    padding: 0.75rem;
    color: var(--irm-muted, #4f4f4f);
}

/* Other */

/*
    Indented and ruled so it reads as belonging to the question above it rather than as the next
    question. A 1px rule, not a thick accent stripe.
*/
.irm-form__other {
    max-inline-size: 48rem;
    margin-block: 0.75rem 0;
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--irm-border, rgba(0, 0, 0, 0.15));
}

/* Counter and errors */

.irm-form__count {
    max-inline-size: 48rem;
    margin-block-start: 0.375rem;
    color: var(--irm-muted, #4f4f4f);
    font-size: 0.9375rem;
    text-align: end;
}

.irm-form__count--near-limit {
    color: var(--irm-danger, #b10e1e);
    font-weight: 600;
}

.irm-form__error {
    max-inline-size: 48rem;
    margin-block: 0.5rem 0;
    color: var(--irm-danger, #b10e1e);
    font-weight: 600;
}

.irm-form__feedback,
.irm-form__error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.irm-form__feedback {
    max-inline-size: 48rem;
    margin-block: 0.5rem 0;
    font-weight: 600;
}

.irm-form__field[data-irm-validity-state="invalid"] > :where(input, select, textarea),
.irm-form__field[data-irm-validity-state="invalid"] > .irm-form__group .irm-form__options {
    border-color: var(--irm-danger, #b10e1e);
}

.irm-form__field[data-irm-validity-state="invalid"] > .irm-form__feedback {
    color: var(--irm-danger, #b10e1e);
}

.irm-form__field[data-irm-validity-state="valid"] > :where(input, select, textarea),
.irm-form__field[data-irm-validity-state="valid"] > .irm-form__group .irm-form__options {
    border-color: var(--irm-success, #137333);
}

.irm-form__field[data-irm-validity-state="valid"] > .irm-form__feedback {
    color: var(--irm-success, #137333);
}

/*
    Same token as the theme's own focus rule, so a control and a button ring identically. These two
    rules have equal specificity and this sheet loads second, so whatever is written here is what
    form controls actually get: it must not disagree with the theme.
*/
.irm-form__field :focus-visible {
    outline: 3px solid var(--irm-primary, #d80d28);
    outline-offset: 2px;
}

/*
    Scoped to the elements this package hides. An unscoped [hidden] { display: none !important }
    is a package overriding every host application's own markup.
*/
[data-irm-field][hidden],
[data-irm-other][hidden],
[data-irm-feedback][hidden],
[data-irm-review-summary][hidden],
[data-irm-review-editor][hidden] {
    display: none;
}