/*
    The photo buttons and the save button of the mobile action bar share this shape, so the bar reads
    as one set of controls instead of a pile of differently sized buttons. Their layout and type
    (flex, gap, inline padding, label size and weight) comes from Bootstrap utilities in the markup,
    which is what keeps the three buttons the same height.
*/
.mobile-action-button {
    /* forms.css gives every <label> a margin-bottom, so the <label> photo buttons carry a bottom
       margin the submit <button> does not. In the report bar the items stretch to one row height, and
       a stretched item's box is that height minus its own margins: the labels end up shorter than the
       margin-less submit button. Zero it here so all three buttons are exactly the same height. */
    margin-block: 0;
    /* The 44px minimum touch target and nothing more: the action bar is space taken from the form
       above it. Sets the floor for the report bar, where the three buttons share one row and the
       tallest label decides the actual height. */
    min-height: 2.75rem;
    /* Inline padding is left to px-* in the markup, so a button can give it up when three of them
       have to divide the width of a phone. Corner radius is left to .btn (buttons.css). */
    padding-block: 0.375rem;
    /* A <label> gets no pointer cursor from .btn */
    cursor: pointer;
    /* Avoids the double-tap zoom delay and the grey tap flash on mobile browsers */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 100ms ease, opacity 150ms ease;
}

/* Touch devices have no hover, so the press itself has to give the feedback */
.mobile-action-button:active:not(.disabled) {
    transform: translateY(1px) scale(0.99);
}

/* The file input lives inside the label and is visually hidden, so keyboard focus
   lands on an invisible element: draw the focus ring on the label instead. */
.file-upload-button:focus-within {
    outline: 3px solid color-mix(in srgb, var(--cibor-blue, #065AA7) 45%, transparent);
    outline-offset: 2px;
}

.file-upload-button.disabled {
    opacity: 0.65;
    cursor: progress;
    pointer-events: none;
    transform: none;
}

/* Every button in the mobile action bar stacks its icon above its label, and the icon keeping its
   size is what makes those buttons equally tall: the label below it is the only part that may wrap. */
.mobile-action-button__icon {
    flex: 0 0 auto;
}