/* =============================================================================
   Air-Plan form standard: style D, "capped cards" (chosen 2026-10-10)
   -----------------------------------------------------------------------------
   The single home for form styling. Every form converted under
   docs/FORM_REDESIGN.md uses these classes; page stylesheets keep only layout
   that is genuinely specific to that page, never field/label/input styling.
   Markup contract and snippets: .claude/skills/airplan-forms/references/
   form-standard.md. Live demo: /layout-preview, "Form standard" section.

   Scope: everything is under .ap-form. Legacy pages also use .ap-field,
   .ap-field__label and .ap-form-grid (components.css) outside a form, and
   must keep their current look until they are converted, so nothing here
   reaches an element without an .ap-form ancestor, except the shared .input
   text box itself (next section).

   Restyle every form through the --form-* tokens in variables.css. Each var()
   carries the light value as its fallback because auth pages (always light)
   do not load variables.css.
   ========================================================================== */

/* --- Shared text box: .input --------------------------------------------
   The one rule here outside .ap-form: the base control every page uses,
   inside a form or not (filter bars, toolbars, map panels). Moved from
   app.css in forms Phase 3, values unchanged. Forms build on it below.
   Its colours, border and focus ring come from variables.css tokens. */

.input {
    width: 100%;
    min-height: var(--control-height-md);
    background: var(--control-bg);
    color: var(--control-text);
    border: 1px solid var(--control-border);
    border-radius: var(--input-radius, var(--radius-form));
    padding: 0 var(--control-padding-x);
    font-family: inherit;
    font-size: var(--control-font-size, var(--type-base, 13px));
    line-height: var(--leading-base, 1.5);
    outline: none;
    transition: border-color var(--input-transition-duration, .2s) ease, box-shadow var(--input-transition-duration, .2s) ease, background var(--input-transition-duration, .2s) ease;
}

.input.has-options {
    color: var(--text);
}

:root[data-theme="light"] .input {
    background: var(--input);
}

.input::placeholder {
    color: var(--muted);
    font-style: normal;
    opacity: .78;
}

.input:focus-visible,
select.input:focus-visible,
textarea.input:focus-visible {
    border-color: color-mix(in srgb, var(--control-border) 40%, var(--color-primary) 60%);
    box-shadow: var(--input-focus-shadow, 0 0 0 3px var(--focus-ring-color));
}

/* The shell's keyboard outline (components.css, :where(...):focus-visible)
   beat the outline: none above only by loading after it, which it no longer
   does. Same outline, restated. Forms remove it again (.ap-form .input). */
.input:focus-visible {
    outline: 2px solid var(--color-primary, #0b5bff);
}

textarea.input {
    min-height: var(--textarea-input-min-height, 88px);
    padding-top: var(--textarea-input-padding-y, 10px);
    padding-bottom: var(--textarea-input-padding-y, 10px);
}

.input:not(:placeholder-shown) {
    color: var(--text);
    font-style: normal;
}

/* iOS Safari zooms the page into any text box under 16px: phones and small
   tablets get 16px. Moved from layout.css with .input; same breakpoint. */
@media (max-width: 899px) {
    .input,
    select.input,
    textarea.input {
        font-size: 16px;
    }
}

/* --- Root ---------------------------------------------------------------- */

.ap-form {
    display: flex;
    flex-direction: column;
    gap: var(--form-section-gap, 12px);
    min-width: 0;
    margin: 0;
    color: var(--text);
}

/* Pages show and hide parts of a form with the hidden attribute (the quick
   enquiry's pleasure-flight section, unused passenger rows). The display
   values set below would otherwise override it. */
/* The form itself too: .ap-form's display:flex outranks the browser's own
   [hidden] rule (found on the logbook add-aircraft prompt, wave 4) */
.ap-form[hidden],
.ap-form [hidden] {
    display: none !important;
}

/* --- Problem summary ------------------------------------------------------
   "N problems to fix" box at the top of the form. form_feedback.js fills it,
   un-hides it and moves focus to it so screen readers announce the problems. */

.ap-form .ap-form-summary {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--form-error-color, #dc2626);
    border-radius: var(--form-card-radius, 12px);
    background: color-mix(in srgb, var(--form-error-color, #dc2626) 10%, transparent);
    color: var(--text);
    font-size: 13px;
}

.ap-form .ap-form-summary[hidden] {
    display: none;
}

.ap-form .ap-form-summary:focus {
    outline: 2px solid var(--form-error-color, #dc2626);
    outline-offset: 2px;
}

.ap-form .ap-form-summary__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.ap-form .ap-form-summary__title i {
    color: var(--form-error-color, #dc2626);
    font-size: 15px;
}

/* Indented to line up with the title text, past the icon */
.ap-form .ap-form-summary__list {
    margin: 4px 0 0;
    padding: 0 0 0 23px;
    list-style: none;
}

.ap-form .ap-form-summary__list li + li {
    margin-top: 2px;
}

.ap-form .ap-form-summary a {
    color: var(--form-error-color, #dc2626);
    text-decoration: underline;
}

/* --- Notice ---------------------------------------------------------------
   Good news the server sends back with the form ("Password updated",
   "Reset link sent"). Never the red summary: that is for problems. */

.ap-form .ap-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--form-notice-color, #15803d);
    border-radius: var(--form-card-radius, 12px);
    background: color-mix(in srgb, var(--form-notice-color, #15803d) 10%, transparent);
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
}

.ap-form .ap-form-notice i {
    flex: none;
    margin-top: 2px;
    color: var(--form-notice-color, #15803d);
    font-size: 15px;
}

/* --- Section card with header cap -----------------------------------------
   No overflow: hidden on the card: it would clip autocomplete menus and
   other popovers opened from a field. The cap rounds its own top corners
   instead (1px inside the card border). */

.ap-form .ap-form-section {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--form-card-border, #c6d0e0);
    border-radius: var(--form-card-radius, 12px);
    background: var(--form-card-bg, #f5f7fb);
}

.ap-form .ap-form-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    padding: var(--form-cap-pad, 7px 14px);
    border-bottom: 1px solid var(--form-card-border, #c6d0e0);
    border-radius: calc(var(--form-card-radius, 12px) - 1px) calc(var(--form-card-radius, 12px) - 1px) 0 0;
    background: var(--form-card-cap-bg, #eef2f8);
}

.ap-form .ap-form-section__title {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.ap-form .ap-form-section__hint {
    margin: 0;
    color: var(--form-label-color, #45546b);
    font-size: 12px;
    line-height: 1.4;
}

/* Body stacks its children (grids, check rows, lone fields) on one rhythm */
.ap-form .ap-form-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--form-row-gap, 10px);
    padding: var(--form-card-pad, 12px 14px 14px);
}

/* Collapsible section: the same card as a native <details>, its head the
   <summary>. For optional groups that are usually empty (simulator time,
   approaches), so they fold away; the browser gives keyboard and screen
   reader support with no script. Folded, the head is the whole card.
   Added with the logbook entry form (wave 4). */
.ap-form details.ap-form-section > summary.ap-form-section__head {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ap-form details.ap-form-section > summary.ap-form-section__head::-webkit-details-marker {
    display: none;
}

.ap-form details.ap-form-section > summary .ap-form-section__title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px 2px 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

.ap-form details.ap-form-section[open] > summary .ap-form-section__title::before {
    transform: rotate(45deg);
}

.ap-form details.ap-form-section:not([open]) > summary.ap-form-section__head {
    border-bottom: 0;
    border-radius: calc(var(--form-card-radius, 12px) - 1px);
}

.ap-form details.ap-form-section > summary.ap-form-section__head:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--focus-ring-color, rgba(11, 91, 255, 0.28));
}

/* --- Grid -----------------------------------------------------------------
   "At most N columns" without media or container queries: each track is at
   least --ap-grid-min wide and at least 1/N of the row, so a wide form shows
   N columns, a narrow modal 2, and a phone 1. auto-fill (not auto-fit) keeps
   empty tracks, so a two-field row still lines up with the three-field rows
   in the other cards. */

.ap-form .ap-form-grid {
    --ap-grid-cols: 3;
    --ap-grid-min: 11rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--ap-grid-min), calc((100% - (var(--ap-grid-cols) - 1) * var(--form-col-gap, 10px)) / var(--ap-grid-cols))), 1fr));
    gap: var(--form-row-gap, 10px) var(--form-col-gap, 10px);
    margin: 0;
}

.ap-form .ap-form-grid--1 { --ap-grid-cols: 1; }
.ap-form .ap-form-grid--2 { --ap-grid-cols: 2; }
.ap-form .ap-form-grid--4 { --ap-grid-cols: 4; --ap-grid-min: 9rem; }

/* --- Repeated item group --------------------------------------------------
   One of several like items inside a section: "Passenger 1", "Passenger 2".
   A fieldset, so a screen reader names the group with each of its fields.
   The legend floats inside the box rather than notching the border. */

.ap-form .ap-form-subgroup {
    display: flex;
    flex-direction: column;
    gap: var(--form-row-gap, 10px);
    min-width: 0;
    margin: 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--form-card-border, #c6d0e0);
    border-radius: calc(var(--form-card-radius, 12px) - 4px);
    background: color-mix(in srgb, var(--form-card-cap-bg, #eef2f8) 55%, transparent);
}

.ap-form .ap-form-subgroup__title {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

/* --- Field ------------------------------------------------------------------ */

.ap-form .ap-field {
    display: flex;
    flex-direction: column;
    gap: var(--form-field-gap, 4px);
    min-width: 0;
    margin: 0;
}

.ap-form .ap-field--full {
    grid-column: 1 / -1;
}

/* A span on a one-column grid would create a phantom second column and push
   the form sideways, so spans start at tablet width. */
@media (min-width: 768px) {
    .ap-form .ap-field--span-2 {
        grid-column: span 2;
    }
}

/* Overrides the uppercase legacy .ap-field__label in components.css inside
   converted forms only. */
.ap-form .ap-field__label {
    color: var(--form-label-color, #45546b);
    font-size: var(--form-label-size, 12px);
    font-weight: var(--form-label-weight, 500);
    letter-spacing: var(--form-label-tracking, 0);
    line-height: 1.35;
    text-transform: var(--form-label-transform, none);
}

.ap-form .ap-field__optional {
    font-weight: 400;
}

/* A label with a small action beside it (an info button). The button must
   sit outside the <label>: inside it, the button becomes the labelled
   control and the field loses its label. */
.ap-form .ap-field__label-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* A full 24px target that does not make the label line taller than its
   neighbours' (the negative margin), so the controls below stay level. */
.ap-form .ap-field__label-row > .btn {
    width: 24px;
    height: 24px;
    min-height: 24px;
    margin-block: -4px;
    padding: 0;
    flex: none;
}

.ap-form .ap-field__hint,
.ap-form .ap-field__error {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}

.ap-form .ap-field__hint {
    color: var(--form-label-color, #45546b);
}

.ap-form .ap-field__error {
    color: var(--form-error-color, #dc2626);
}

.ap-form .ap-field__error[hidden] {
    display: none;
}

/* --- Controls ---------------------------------------------------------------
   Builds on the shared .input (top of this file), but sets everything a field needs
   itself, focus ring included. The shared .input takes its border, colours
   and focus ring from variables.css tokens, which auth pages do not load:
   there it would render with no border and no focus ring at all. Fixed
   height as well as min-height so selects and inputs line up exactly. */

.ap-form .input {
    height: var(--form-control-height, 34px);
    min-height: var(--form-control-height, 34px);
    padding: 0 10px;
    border: 1px solid var(--form-control-border, #c6d0e0);
    border-radius: var(--form-control-radius, 8px);
    outline: none;
    background: var(--form-control-bg, #ffffff);
    color: var(--text);
    font-size: var(--form-control-font-size, 13px);
}

.ap-form .input:focus-visible {
    border-color: color-mix(in srgb, var(--form-control-border, #c6d0e0) 40%, var(--color-primary, #0b5bff) 60%);
    box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(11, 91, 255, 0.28));
}

/* app.css sets the light-theme input background at higher specificity;
   restate it here so the token stays in charge in both themes. */
:root[data-theme="light"] .ap-form .input {
    background: var(--form-control-bg, #ffffff);
}

.ap-form textarea.input {
    height: auto;
    min-height: 60px;
    padding: 7px 10px;
    line-height: 1.45;
    resize: vertical;
}

/* File pickers (forms wave 5): a fixed-height box left the browser's
   "Choose file" button stuck to its top edge. The box sizes to its content
   instead, and the button is styled to sit inside it. */
.ap-form input[type="file"].input {
    height: auto;
    padding: 4px 6px;
    line-height: 1.6;
}

/* Multi-select lists (forms wave 5): the fixed control height cut a list
   to its first row or two; it now shows the rows its size attribute asks for,
   on touch screens too (this outranks the 44px touch height) */
.ap-form select[multiple].input {
    height: auto;
    padding: 4px;
}

.ap-form input[type="file"].input::file-selector-button {
    margin-right: 8px;
    padding: 1px 10px;
    border: 1px solid var(--form-control-border, #c6d0e0);
    border-radius: 6px;
    background: var(--form-card-cap-bg, #eef2f8);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

/* Read-only values must stay fully readable (a member viewing an aircraft they
   cannot manage): full text colour on the cap tint, never dimmed. */
.ap-form .input[readonly] {
    background: var(--form-card-cap-bg, #eef2f8);
    color: var(--text);
}

/* Disabled controls are not submitted and not focusable; keep the text at
   readable contrast rather than fading it with opacity. */
.ap-form .input:disabled {
    background: var(--form-card-cap-bg, #eef2f8);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 1;
}

.ap-form .input[aria-invalid="true"] {
    border-color: var(--form-error-color, #dc2626);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-error-color, #dc2626) 18%, transparent);
}

/* --- Units and other addons -------------------------------------------------
   Numeric fields always show their unit (kg/lb, L/USG, ft, kt) beside the
   value. The text comes from the user's unit preference, never hard-coded. */

.ap-form .ap-input-group {
    display: flex;
    min-width: 0;
}

.ap-form .ap-input-group > .input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ap-form .ap-input-group__addon {
    display: flex;
    flex: none;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--form-control-border, #c6d0e0);
    border-left: 0;
    border-radius: 0 var(--form-control-radius, 8px) var(--form-control-radius, 8px) 0;
    background: var(--form-card-cap-bg, #eef2f8);
    color: var(--form-label-color, #45546b);
    font-size: var(--form-control-font-size, 13px);
    white-space: nowrap;
}

/* --- Checkbox, toggle and radio rows ------------------------------------- */

/* 28px on a mouse screen keeps a stack of checkboxes (Remember me / Show
   password) compact; touch screens raise it to the 44px target below. */
.ap-form .ap-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    margin: 0;
    color: var(--text);
    font-size: 13px;
}

.ap-form .ap-check > label {
    cursor: pointer;
}

/* Consecutive check rows sit 4px apart instead of the full gap of the stack
   they are in, so a list of options reads as one group. Their own height
   keeps each one a full touch target. The form root stacks on
   --form-section-gap, a section body on --form-row-gap. */
.ap-form > .ap-check + .ap-check {
    margin-top: calc(4px - var(--form-section-gap, 12px));
}

.ap-form .ap-form-section__body > .ap-check + .ap-check {
    margin-top: calc(4px - var(--form-row-gap, 10px));
}

/* Plain checkboxes and radios; the .toggle switch keeps its own styling */
.ap-form .ap-check > input[type="checkbox"]:not(.toggle),
.ap-form .ap-check > input[type="radio"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary, #0b5bff);
}

.ap-form .ap-choice-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ap-form .ap-choice-group > legend {
    margin-bottom: var(--form-field-gap, 4px);
    padding: 0;
}

/* The rendered legend sits outside the fieldset's flex layout, so it stays on
   its own row above the options in both variants. */
.ap-form .ap-choice-group--inline {
    flex-flow: row wrap;
    column-gap: 18px;
}

/* Segmented radios: a short either/or choice (Person / Company) drawn as one
   joined control the height of a field. It is still a radio group, so arrow
   keys move the choice and a screen reader reads "radio button, 1 of 2". The
   radio itself is visually hidden but stays focusable; its label is the
   segment. Added with the contact editor (wave 3). */
.ap-form .ap-choice-group--segmented {
    flex-flow: row nowrap;
    width: fit-content;
    max-width: 100%;
}

.ap-form .ap-choice-group--segmented > .ap-check {
    position: relative;
    gap: 0;
    min-height: 0;
}

.ap-form .ap-choice-group--segmented > .ap-check > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ap-form .ap-choice-group--segmented > .ap-check > label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--form-control-height, 34px);
    padding: 0 14px;
    border: 1px solid var(--form-control-border, #c6d0e0);
    background: var(--form-control-bg, #ffffff);
    color: var(--form-label-color, #45546b);
    font-size: var(--form-control-font-size, 13px);
    font-weight: 500;
    white-space: nowrap;
}

.ap-form .ap-choice-group--segmented > .ap-check + .ap-check > label {
    border-left: 0;
}

.ap-form .ap-choice-group--segmented > .ap-check:first-of-type > label {
    border-radius: var(--form-control-radius, 8px) 0 0 var(--form-control-radius, 8px);
}

.ap-form .ap-choice-group--segmented > .ap-check:last-of-type > label {
    border-radius: 0 var(--form-control-radius, 8px) var(--form-control-radius, 8px) 0;
}

.ap-form .ap-choice-group--segmented > .ap-check > input:checked + label {
    background: color-mix(in srgb, var(--color-primary, #0b5bff) 14%, var(--form-control-bg, #ffffff));
    color: var(--color-primary, #0b5bff);
    font-weight: 600;
}

.ap-form .ap-choice-group--segmented > .ap-check > input:focus-visible + label {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(11, 91, 255, 0.28));
}

.ap-form .ap-choice-group--segmented > .ap-check > input:disabled + label {
    background: var(--form-card-cap-bg, #eef2f8);
    cursor: not-allowed;
}

/* --- Actions ----------------------------------------------------------------
   Order in the markup: destructive action, spacer, Cancel, primary. Buttons
   use the shared .btn variants from the layout preview. */

.ap-form .ap-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.ap-form .ap-form-actions__spacer {
    flex: 1 1 auto;
}

/* A short line about what Save does ("Saved in the background…"). It also
   takes the spacer's place, pushing the buttons right. */
.ap-form .ap-form-actions__note {
    flex: 1 1 14rem;
    margin: 0;
    color: var(--form-label-color, #45546b);
    font-size: 12px;
    line-height: 1.4;
}

/* components.css caps every paragraph in a .content-card at 640px, which
   stopped the note filling its row on a wide page (the Delete button beside
   it was pushed in from the edge) and would cut hints short (forms wave 5) */
.ap-form .ap-form-actions__note,
.ap-form .ap-field__hint,
.ap-form .ap-form-section__hint {
    max-width: none;
}

/* Save status written into the note by page scripts (is-success / is-error,
   the classes the unit-preference scripts already use), on the note itself
   or a span inside it */
.ap-form .ap-form-actions__note.is-success,
.ap-form .ap-form-actions__note .is-success {
    color: var(--form-notice-color, #15803d);
}

/* An empty status note keeps its line, so the buttons do not jump when
   "Saving…" or "Saved." appears */
.ap-form .ap-form-actions__note:empty::before {
    content: "\00a0";
}

/* The scripts also add the generic .alert class on errors; inside a one-line
   note that box styling is dropped and the red text carries it. */
.ap-form .ap-form-actions__note .is-error {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--form-error-color, #dc2626);
}

/* Single-action forms (sign-in, reset): full-width buttons at every width,
   primary on top. The same arrangement phones get for every form. */
.ap-form .ap-form-actions--stacked {
    flex-direction: column-reverse;
    align-items: stretch;
}

.ap-form .ap-form-actions--stacked .ap-form-actions__spacer {
    display: none;
}

.ap-form .ap-form-actions--stacked .ap-form-actions__note {
    flex: none;
}

.ap-form .ap-form-actions--stacked .btn {
    justify-content: center;
    width: 100%;
}

/* Busy submit button (form_feedback.js setFormBusy). It stays focusable, so
   it is dimmed rather than disabled; the form ignores clicks meanwhile. */
.ap-form .btn[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.7;
}

/* Modal forms: keep Save in view while the body scrolls. Modals under the
   standard use the page background (form-standard.md "Modals"), so the bar
   does too; a container with another background sets --form-sticky-bg. */
.ap-form .ap-form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 10px 0;
    border-top: 1px solid var(--form-card-border, #c6d0e0);
    background: var(--form-sticky-bg, var(--color-bg, var(--bg)));
}

/* --- Touch and phone ------------------------------------------------------- */

/* Any touch screen, phone or iPad: 44px targets, and 16px text so iOS Safari
   does not zoom the page when a field is focused. */
@media (pointer: coarse) {
    .ap-form .input {
        height: var(--form-touch-height, 44px);
        min-height: var(--form-touch-height, 44px);
        font-size: var(--form-touch-font-size, 16px);
    }

    .ap-form textarea.input {
        height: auto;
    }

    .ap-form input[type="file"].input {
        height: auto;
        padding-block: 8px;
    }

    .ap-form .ap-input-group__addon {
        font-size: var(--form-touch-font-size, 16px);
    }

    .ap-form .ap-check {
        min-height: var(--form-touch-height, 44px);
    }

    .ap-form .ap-choice-group--segmented > .ap-check > label {
        min-height: var(--form-touch-height, 44px);
        font-size: var(--form-touch-font-size, 16px);
    }

    .ap-form details.ap-form-section > summary.ap-form-section__head {
        min-height: var(--form-touch-height, 44px);
        align-items: center;
    }
}

/* Phone width: full-width actions, primary on top, destructive last. */
@media (max-width: 767px) {
    .ap-form .ap-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ap-form .ap-form-actions__spacer {
        display: none;
    }

    /* In a column the note's flex-basis would become its height */
    .ap-form .ap-form-actions__note {
        flex: none;
    }

    .ap-form .ap-form-actions .btn {
        justify-content: center;
        width: 100%;
        min-height: var(--form-touch-height, 44px);
    }

    /* A modal's action bar stacked like that took a quarter of a phone
       screen: keep the buttons to one row of equal widths (Cancel | Save),
       with the note (save status) on its own line above them. */
    .ap-form .ap-form-actions--sticky {
        flex-flow: row wrap;
    }

    .ap-form .ap-form-actions--sticky .ap-form-actions__note {
        flex: 1 1 100%;
    }

    .ap-form .ap-form-actions--sticky .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}