/* Container width tiers — views apply one class instead of an inline max-width (Phase 3+).
   See docs/css-refactoring.md §7/§8. */
.w5-w-narrow { max-width: 560px; }
.w5-w-medium { max-width: 760px; }
.w5-w-wide   { max-width: 1180px; }
/* no class = full width (correct for data grids / large tabbed forms) */

/* All tiers collapse to full width on mobile (§7) */
@media (max-width: 767.98px) {
    .w5-w-narrow,
    .w5-w-medium,
    .w5-w-wide {
        max-width: 100%;
    }
}

/* Form footer — the submit/cancel action row emitted by the FormActions widget
   (docs/css-refactoring.md §7). Replaces the per-page .sa-form-actions /
   .eform-form-actions / ad-hoc .form-actions copies and the mt-3/mt-4 idioms.
   Buttons sit in a wrapping flex row with a consistent gap, so call sites never
   pass ms-2; the top border/padding separate the footer from the form body. */
.w5-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: 1.25rem;
    margin-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

/* Form field group — a titled section of a form (the FormHelper sectioning contract,
   docs/css-refactoring.md §7). Replaces the byte-identical per-page .sa-field-group /
   .eform-field-group copies; the <h5> is the section heading. */
.w5-field-group {
    margin-bottom: 1.25rem;
}
.w5-field-group h5 {
    font-size: .78rem;
    font-weight: 700;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: .35rem;
    margin-bottom: .7rem;
}