/*
    Default styles for a rendered form (design decision #78).

    The platform renders forms, so it has to ship something that looks deliberate out of the box —
    but this is the floor, not the ceiling. Every hook here is a plain class a partner can restyle
    or ignore, and the markup is overridable wholesale by putting a Pages/Shared/Blocks/Form.cshtml
    in the site. Nothing in here is load-bearing for correctness.

    Deliberately unopinionated about colour: it inherits the page's own text colour and borders
    from currentColor where it can, so a form dropped into a customer's design does not arrive
    wearing ours.
*/

/*
    The form's own section.

    container-type is what makes the field widths below fractions of THE FORM rather than of the
    page -- see the note on them.

    width is the form's Width setting: --block-width is the fraction the setting writes, and 1 (full
    width) when it was left on Auto or the site's blocks never had the setting at all. Standing on
    its own, a 50% form takes half the row from the left, exactly as a Content Item at 50% does.
    Inside a container that lays blocks out side by side this rule is inert: the container makes this
    section a flex item and sets its flex-basis, which beats width -- so the same setting means "half
    the page" alone and "half the row" in a container, with no second knob.
*/
.mc-form-block {
    container-type: inline-size;

    /*
        The Width setting, with a floor. Reading outwards: the fraction of whatever the parent
        gives us, never below --block-min-width, and never more than the parent has.

        The floor is for the case the breakpoint below cannot see: a narrow COLUMN on a wide screen.
        A form in a 400px sidebar at 1600px gets no media query, and 50% of that sidebar is 200px,
        which honours the setting and is useless. #78 (a) -- a scaffolded site renders a usable form
        with no work at all -- makes that not a trade a default may make, so below the floor the
        form takes the floor.
    */
    width: min(100%, max(var(--block-min-width, 20rem), calc(var(--block-width, 1) * 100%)));
}

/*
    On a phone, a part-width form goes full width.

    A deliberate exception to this file's container-query rule, and the only one. The floor above
    stops a form being unusably narrow but leaves it short of the edge -- a 50% form on a 375px
    screen resolves to the 20rem floor, which is 85% of the screen and reads as a layout mistake
    rather than a choice. Snapping is what a reader expects there.

    900px, not a narrower "phone" width, because that is where a side-by-side container stacks its
    items. Any other value would mean one form at 50% went full width inside a container and stayed
    half width standing alone at the same screen size, which is the kind of split nobody can hold in
    their head. A site that stacks somewhere else overrides this rule on .mc-form-block; a media
    query cannot read a custom property, so the number cannot be a token.

    The FIELD widths inside the form are untouched by this and stay a container query: how much room
    the form has is a question about the page, and how much room a field has is a question about the
    form. Those do not become the same question just because the screen is small.
*/
@media (max-width: 900px) {
    .mc-form-block { width: 100%; }
}

.mc-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: flex-start;
}

/*
    Widths are §4's six steps, and they are fractions of THE FORM'S CONTAINER, not the viewport.
    A form can sit in a 320px sidebar on a 1600px screen, where a viewport media query would leave
    a quarter-width number field unusable — so the collapse below is a container query. That is the
    one place forms deliberately diverge from the editor's own rule (#78).

    The gap is subtracted so two halves really do sit side by side.
*/
.mc-form-field { flex: 0 0 100%; min-width: 0; }

@container (min-width: 30rem) {
    .mc-form-w-25  { flex-basis: calc(25%  - 0.9375rem); }
    .mc-form-w-33  { flex-basis: calc(33.333% - 0.834rem); }
    .mc-form-w-50  { flex-basis: calc(50%  - 0.625rem); }
    .mc-form-w-66  { flex-basis: calc(66.666% - 0.417rem); }
    .mc-form-w-75  { flex-basis: calc(75%  - 0.3125rem); }
    .mc-form-w-100 { flex-basis: 100%; }
}

/*
    A browser with no container-query support gets one field per row, which is the layout that
    works everywhere rather than a broken approximation of the one that does not.
*/

.mc-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.mc-form-required { margin-left: 0.15rem; opacity: 0.7; }

.mc-form-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: 0.95;
}

.mc-form-input:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

.mc-form-description {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.7;
}

/*
    Errors carry a border and an icon-free text line rather than colour alone — colour is not
    available to every reader, and aria-invalid plus the described-by wiring in the partial is what
    actually announces the failure.
*/
.mc-form-field--invalid .mc-form-input { border-width: 2px; }

.mc-form-error {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.mc-form-errors,
/* The sign-in prompt stands where the form would, so it reads like the confirmation that would
   follow it: one plain framed message. */
.mc-form-confirmation,
.mc-form-signin {
    flex: 0 0 100%;
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 4px;
}

.mc-form-confirmation {
    text-align: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.mc-form-errors p,
.mc-form-confirmation p { margin: 0; }

.mc-form-actions { flex: 0 0 100%; }

/*
    A button sizes to its label. #78: a submit button at "a quarter of the column" means a stretched
    button, which is a different idea from a text box at a quarter — so buttons take no width class
    at all.
*/
.mc-form-submit {
    font: inherit;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
}

.mc-form-submit:hover { opacity: 0.8; }

/* --- Slice 6 elements ------------------------------------------------------------------------ */

/* A range needs its number beside it: a slider with no read-out is a control a visitor cannot
   answer accurately, which defeats the point of giving it bounds. */
.mc-form-range { display: flex; align-items: center; gap: .6rem; }
.mc-form-range input[type="range"] { flex: 1 1 auto; min-width: 0; }
.mc-form-range-value { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.5ch; text-align: right; }

/* Choice groups. Stacked rather than inline: an option's label is the author's prose and can be a
   sentence, and inline options wrap into a shape where it stops being clear which label belongs to
   which control. */
.mc-form-choice { display: flex; flex-direction: column; gap: .4rem; }
.mc-form-option { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.mc-form-option input { flex: 0 0 auto; margin: 0; }

/* Image choice. The picture is the label, so it gets the room and the text sits under it. */
.mc-form-imagechoice { display: flex; flex-wrap: wrap; gap: .75rem; }
.mc-form-imagechoice .mc-form-option {
    flex-direction: column; align-items: stretch; gap: .35rem;
    flex: 0 0 auto; width: 9rem; padding: .5rem;
    border: 1px solid currentColor; border-radius: 5px; opacity: .85;
}
.mc-form-imagechoice .mc-form-option:hover { opacity: 1; }
/* Checked state drawn on the wrapper, so the whole card reads as chosen rather than a small dot. */
.mc-form-imagechoice .mc-form-option:has(input:checked) { border-width: 2px; opacity: 1; }
.mc-form-imagechoice img { display: block; width: 100%; height: 6rem; object-fit: cover; border-radius: 3px; }
.mc-form-imagechoice span { font-size: .875rem; }

/* Reset sits beside Submit and is visually quieter — it is the destructive one of the pair, and a
   button that discards what somebody typed should not be the loudest thing on the form. */
.mc-form-reset {
    font: inherit; padding: .5rem 1.1rem; margin-left: .5rem;
    color: inherit; background: transparent; border: 1px solid currentColor;
    border-radius: 4px; cursor: pointer; opacity: .7;
}
.mc-form-reset:hover { opacity: 1; }
.mc-form-reset-said { margin-left: .6rem; font-size: .875rem; opacity: .8; }

/* Built-in puzzle fallback when no vendor captcha is configured. Sits in the field like any
   other input — the question is the description, the answer is a short number. */
.mc-form-puzzle { display: flex; flex-direction: column; gap: .35rem; }
.mc-form-puzzle .mc-form-input { max-width: 8rem; }

/* --- Multi-step (#78, slice 8) ---------------------------------------------------------------- */

/* Which step, of how many. Not clickable: a step nobody has answered cannot be validated, and one
   they have is reached with Back — a bar that looks navigable but is not would be worse than one
   that plainly is not. */
.mc-form-steps {
    flex: 0 0 100%;
    display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
    list-style: none; margin: 0 0 .5rem; padding: 0;
}
.mc-form-steps li { display: flex; align-items: center; gap: .45rem; font-size: .875rem; opacity: .5; }
.mc-form-steps li.is-current { opacity: 1; font-weight: 600; }
.mc-form-steps li.is-done { opacity: .8; }
.mc-form-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid currentColor; font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.mc-form-steps li.is-current .mc-form-step-n { border-width: 2px; }

/* Back is quieter than Next for the same reason Reset is quieter than Submit: the button that
   moves somebody forward should be the one they find first. */
.mc-form-back {
    font: inherit; padding: .5rem 1.1rem; margin-right: .5rem;
    color: inherit; background: transparent; border: 1px solid currentColor;
    border-radius: 4px; cursor: pointer; opacity: .7;
}
.mc-form-back:hover { opacity: 1; }