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__buttons) {
    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);
}

/* the shell caps its own height only for a top-level page that asks; a modal sets the same flag and
   nothing reads it, so the booking form's pickers cap it here instead. without this the shell grows
   past the viewport, the document scrolls, and a picker's buttons go down with it */
#the-responsive-shell:has(.staff-filter),
#the-responsive-shell:has(.service-filter) {
    max-height: 100vh;
    max-height: 100dvh;
}

/* the staff home page places each rostered day against today. the whole-business summary and a staff
   member's own list are separate components, so the pair of classes lives here rather than in either
   one's scoped stylesheet */
.roster-day--past {
    color: var(--the-hue-neutral-4);
}

.roster-day--today {
    font-weight: bold;
}

/* a ButtonBar wears .the-command-bar for its styling, and the shell hides its own inlined command bar
   on the page at desktop width, where the commands are in the title bar instead. that rule must not
   reach a bar the page itself put there */
.the-responsive-shell__page > .the-command-bar.button-bar {
    display: flex;
}

/* a list page's search view takes its height from its container, and scrolls its results within it.
   the layouts wrap every page in .page-body, so that wrapper has to hand its own height down to it */
.page-body:has(> .the-entity-search-view) {
    display: flex;
    flex-direction: column;
}

/* the framework holds an inline notification to one line and cuts off whatever does not fit, which on a
   phone is the part of a warning that says what it is about. it wraps instead, everywhere but the one
   notification a desktop command bar sets among its buttons, where the bar's height is fixed, and a
   small one. the icons are a whole field tall, so they overhang the box rather than set its height */
.the-notification-view.the-notification-view--inline:not(.the-notification-view--small, .the-command-bar__buttons > *) {
    height: auto;
    min-height: var(--the-unit-fullfield);
}

.the-notification-view--inline:not(.the-notification-view--small, .the-command-bar__buttons > *) > .the-notification-view__message {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-block: var(--the-unit);
    margin-block: 0;
}

.the-notification-view--inline:not(.the-notification-view--small) > a {
    display: flex;
    align-items: center;
    height: 0;
}

/* on a phone that one takes a line of its own above the buttons, which wrap below it, and wraps the same way */
@media screen and (max-width: 1219px) {
    @media (orientation: portrait), (max-width: 719px) {
        .the-command-bar__buttons > .the-notification-view.the-notification-view--inline:not(.the-notification-view--small) {
            flex-basis: 100%;
            height: auto;
            min-height: var(--the-unit-fullfield);
        }

        .the-command-bar__buttons > .the-notification-view--inline:not(.the-notification-view--small) > .the-notification-view__message {
            white-space: normal;
            overflow-wrap: anywhere;
            padding-block: var(--the-unit);
            margin-block: 0;
        }
    }
}

/* copy.js marks a data-copy button with how its last copy went */
[data-copy-state="copied"]::after {
    content: " \2713";
}

[data-copy-state="failed"]::after {
    content: " failed";
}