/*
 * Canonical form LAYOUT (#259). The APPEARANCE of controls — inputs, selects,
 * textareas, radios/checkboxes, and .button/.primary-button — comes from the
 * base framework, FeatherCSS (public/css/feather.css), which is a document
 * stylesheet and so already reaches every shadow-DOM form. This sheet adds only
 * form-level layout on top; it must never re-skin controls (that duplicates
 * Feather, ignores the theme, and clobbers element-specific buttons).
 *
 * CLASS-SCOPED (.stdform) on purpose: a bare `form` rule here leaks into every
 * shadow root via BaseElement.syncAdoptedStyleSheets and overrides component
 * layouts — that was #258. FormElement adds `.stdform` to its forms
 * automatically; light-DOM forms opt in with class="stdform".
 */

.stdform {
    display: grid;
    gap: 0.75rem;
    /* Element-tunable via :host vars so components adjust width without
       re-declaring the layout (drift was the #259 duplication problem).
       min-width lets modal forms keep a sensible floor, e.g.
       --stdform-min-width: min(480px, 90vw). */
    min-width: var(--stdform-min-width, auto);
    max-width: var(--stdform-max-width, 520px);
}

/* On a phone the vw-based min-width floor exceeds a modal card's content box and
   the form clips off the right edge; let it fill its container instead. */
@media (max-width: 767px) {
    .stdform {
        min-width: 0;
    }
}

/* A paired-field row inside a modal form: two columns that stack on a phone
   (defined once here — form.css is adopted into the elements' shadow trees). */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 767px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* Full-page / settings forms (login, register, set-password) center the block
   on the page instead of hugging the top-left. */
.stdform--center {
    margin-inline: auto;
}

/* Let the grid gap own vertical rhythm instead of Feather's per-label margin. */
.stdform label {
    margin: 0;
}

/* Stack a field's label text above its control, medium weight — the canonical
   field-label look every element block used. Checkbox/radio labels are excluded:
   they keep their inline row (control beside text) and normal weight, and are
   often full sentences ("I agree to the Terms…") that shouldn't be bolded.
   Deliberately NO text-transform: label casing is authored per-language in the
   catalog (Dutch is sentence-case; German capitalises nouns; CJK has no case), so
   a CSS transform can't be correct across locales — `capitalize` also mangled Dutch
   hyphenated labels (Btw-nummer → Btw-Nummer). See #465. */
.stdform label:not(:has(> input:is([type="checkbox"], [type="radio"]))) {
    display: grid;
    gap: 0.35rem;
    font-weight: 500;
}

/* Text-like controls fill the form column; their look stays Feather's. Checkbox,
   radio, color, file and button inputs keep their intrinsic size. */
.stdform input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="hidden"]),
.stdform select,
.stdform textarea {
    width: 100%;
}

.stdform textarea {
    min-height: var(--stdform-textarea-min-height, 60px);
    resize: vertical;
}

/* Paired fields (e.g. start/end dates): stacked on narrow viewports, two columns
   once there's room. Mobile-first so it never cramps a phone — and so #259
   migrations inherit responsive rows, not a fixed 2-up. The 720px breakpoint
   matches the responsive rows address-edit already ships. */
.stdform .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 720px) {
    .stdform .row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Horizontal button/action row. */
.stdform .actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}