input[type=date], input[type=time] {
    -webkit-min-logical-width: calc(100% - 16px);
}

.the-radio-group--tiles {
    flex: 1;
}

/* the framework lays the shell's command bar out as one right-aligned row that cannot wrap, and the bar
   clips what does not fit. right-aligned overflow spills off the *left* edge, so on a phone the first
   commands - Back to Bookings and Save - end up outside the screen with nothing to scroll them back.
   ButtonBar is excluded: it builds the same markup but decides for itself, through its Wrap parameter,
   whether a second line is wanted */
.the-command-bar .the-command-bar__buttons:not(.button-bar) {
    flex-wrap: wrap;
}

/* the service is chosen in two steps, the second only for a service sold at several lengths. the pair
   is held apart from the fields around it and stays tight within itself, so the length box reads as
   belonging to the service above it */
.service-choice {
    margin-block: var(--the-unit-4x);
}

/* a field that has appeared and holds no answer yet. the ring is drawn outside the box, since the box
   chromes draw their own focus ring inset */
.awaiting-answer {
    box-shadow: 0 0 0 2px var(--the-hue-action-3);
}