/*
 * flatpickr, in Minet's colours.
 *
 * A FILE OF ITS OWN, and loaded after the vendor stylesheet, because that is
 * the only thing that makes these win. Living in shop.css they lost the
 * cascade — shop.css is in the document head before the calendar's own sheet,
 * so flatpickr's blue kept the selected day. Specificity hacks would have
 * worked and been a lie about why.
 *
 * Only the values that would otherwise be somebody else's brand are restated,
 * all of them from the tokens file. The library's layout and behaviour are left
 * alone.
 */
.flatpickr-alt {
    /* The visible half of the field: the real input goes hidden, so this has to
       inherit the shape every other control on the form has. */
    width: 100%;
    height: var(--control-height-form);
    padding-inline: var(--space-3);
    border: 1px solid var(--minet-control-border);
    border-radius: var(--radius);
    background: var(--minet-white);
    font: inherit;
    color: var(--minet-ink);
    cursor: pointer;
}
.flatpickr-alt:hover { border-color: var(--minet-ink); }
.flatpickr-alt:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.flatpickr-calendar {
    /* An edge that holds against the form behind it: on --minet-line the
       calendar and the fields it opens over ran into each other. */
    border: 1px solid var(--minet-line-strong);
    border-radius: var(--radius);
    box-shadow: none;                     /* the brand is flat and square-edged */
    font-family: inherit;
}
/* TOUCH TARGETS. The vendor ships 39x39 days, and `disableMobile: true` means
   this calendar is what a phone gets too — so it has to meet 44x44 rather than
   lean on the native picker it replaces. The day container is already 307.875px
   wide, which is seven 44px columns almost exactly; lifting the vendor's
   max-width lets each day fill one. */
.flatpickr-day {
    max-width: none;
    height: var(--tap-target-min);
    line-height: var(--tap-target-min);
    /* A day you CAN pick is ink and semi-bold. See the disabled rule below for
       the other half of this. */
    color: var(--minet-ink);
    font-weight: 600;
}
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--minet-surface); border-color: var(--minet-surface); }
.flatpickr-day.today { border-color: var(--minet-ink); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    /* White on red, so --minet-red-action is the only correct red. */
    background: var(--minet-red-action);
    border-color: var(--minet-red-action);
    color: var(--minet-white);
}
/* WHICH DAYS CAN I PICK. Open days, closed days and the neighbouring months'
   days were three greys a shade apart (#1B1B1B, #666 and #666), and a customer
   could not tell the past from the future without trying one.

   A closed day now differs in three ways, none of them a shade: it is pale, it
   is regular where open days are semi-bold, and it is struck through — and it
   shows the "no" cursor and no hover. Disabled text is exempt from contrast
   minimums, which is what lets it be this quiet. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    background: none;
    border-color: transparent;
    color: var(--minet-line-strong);
    font-weight: 400;
    text-decoration: line-through;
    cursor: not-allowed;
}
/* The tail of last month and the head of next are not this month's days and
   were the main source of the confusion: seven stray numbers above the 1st
   that looked exactly like closed days. Off the grid; the arrows move months. */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { visibility: hidden; }
/* THE HEADER'S TARGETS. The vendor's month row is 34px tall, with 34px arrows
   and a year box 23px high carrying two 12px spinner arrows — on a phone, where
   this calendar is the only one offered, none of that is 44px. The row and
   everything in it is lifted to the minimum; the year's spinner goes, because
   the month arrows cross a year boundary and a trip is at most a year out. */
.flatpickr-months,
.flatpickr-months .flatpickr-month { height: var(--tap-target-min); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target-min);
    height: var(--tap-target-min);
    padding: 0;
}
.flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--tap-target-min);
    padding: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month input.cur-year { height: var(--tap-target-min); }
.flatpickr-current-month .numInputWrapper span { display: none; }
/* The year LIST a date of birth gets (js/date-picker.js) in place of the year
   box — drawn as the month list beside it is, so the header is two of one
   control. The vendor sets the box's wrapper to inline-block, which outranks
   the `hidden` attribute, hence the second rule. */
.flatpickr-current-month .flatpickr-year-list {
    height: var(--tap-target-min);
    padding: 0 var(--space-1);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--minet-ink);
    font: inherit;
    cursor: pointer;
}
.flatpickr-current-month .flatpickr-year-list:hover { background: var(--minet-surface); }
.flatpickr-current-month .numInputWrapper[hidden] { display: none; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--minet-ink); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--minet-red-action); }
span.flatpickr-weekday { color: var(--minet-muted); }