/* ==========================================================================
   SAT I MINUTA - one time of day, in two boxes

   `<input type="time">` is formatted by Chromium from the browser's UI language and from nothing
   the page can set: `lang="hr"` on the document, `lang="hr-BA"` and `lang="en-US"` on the element
   itself were all measured here and all four gave `05:00 PM`. So a salon in Mostar with an
   English-language browser read its own opening hours, and typed its own appointments, on a
   twelve-hour clock. The fix is not to use that control - two selects we render ourselves are
   twenty-four hour everywhere, need no script, work from a keyboard, still open a native wheel on
   a phone, and cannot produce 25:70.

   The markup is one fragment, templates/fragments/time-of-day.html. This file dresses it, and is
   loaded by the screens that use it through `fragments/time-of-day :: timeOfDayAssets`.

   Kept out of app.css on purpose: app.css is in the shell the service worker precaches for every
   visitor of every public salon page, and only six screens in the product ask for a time.
   ========================================================================== */

.time-of-day {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
}

/* Where the pair is the field's own control - a booking form, the filters, the alert - rather
   than one of several in a row. Inline-flex is sized by its contents, so without this the boxes
   sit at their natural width inside a label that is the full width of the card, and the two of
   them read as something smaller than the date beside them rather than as the same field. */
.field > .time-of-day {
    display: flex;
}

.time-of-day__part {
    min-height: var(--tap);
    /* Both boxes give way as the row narrows. The input this replaced carried an explicit
       `min-width: 0` in app.css for the same reason: a control that refuses to shrink pushes the
       whole card off the side of a 375px phone, and the filter sheet holds four of these. */
    flex: 1 1 0;
    min-width: 0;
    /* The form's usual side padding is written for a word, and there are four of these across a
       phone. At that width it leaves the browser's own arrow sitting on top of the two digits,
       which is a control showing nothing at all. */
    padding-inline: var(--sp-1);
    text-align: center;
}

.time-of-day__colon {
    color: var(--c-text-muted);
}

/* A date beside a time, on the three screens that book one. `.field-pair` gives its second
   column 9rem, which was written for one `<input type="time">`; two boxes and a colon in 9rem
   leave each box narrower than its own dropdown arrow. Only where a time is actually in the
   pair, so the cadence-and-count row on the series form keeps the width it was drawn for. */
@media (min-width: 30rem) {
    .field-pair--time { grid-template-columns: minmax(0, 1fr) 11rem; }
}

/* A fieldset is sized by its contents unless it is told otherwise, so without this the row
   inside it shrinks on a phone and the box around it does not. */
.card fieldset {
    min-width: 0;
}