/* The booking date strip and the time cards, rendered by ReservationDayTimePicker on BOTH guest halves: the vitrine's
   booking form and the Menu's change form. One file for both, linked by the page that renders the picker.

   UNLAYERED, and it must stay so: each surface's own stylesheet carries an unlayered `input { width: 100%;
   min-height: 44px; border: 1px solid var(--muted) }`, and no `@layer` rule could take those three back from a card's
   radio. `.slot-card > input` outranks the element rule on specificity, whatever order the sheets load in.

   Three states, never told apart by colour alone:
   - available: a raised card with a solid border;
   - chosen: the gated fill (--brand-primary-raised) with the ink measured against it (--brand-on-primary), a tick,
     and a heavier border. Never the raw primary: in the dark theme the label is gated against the raised fill;
   - closed: flat, dashed, faint, its number struck through, and the word beside it for a screen reader.
   A closed day is an inactive control, so its faint text is exempt from the contrast minimum; the word "closed" is
   what carries the meaning, not the tone. */

.slot-picker { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

/* `min-width: 0` is load-bearing, not tidiness: a flex item defaults to `min-width: auto`, so without it the thirty
   day cells widen the whole PAGE rather than scrolling inside their own strip, and the footer runs off the right of a
   390 px phone. */
.slot-days {
    display: flex;
    gap: 0.4rem;
    min-width: 0;
    overflow-x: auto;
    padding: 0.25rem 0.1rem 0.4rem;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.5rem;
}
.slot-days:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

.slot-day {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.4rem 0.6rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--muted);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
    text-decoration: none;
    scroll-snap-align: start;
}
a.slot-day:hover { border-color: var(--brand-interactive); background: var(--brand-tint-2); }
a.slot-day:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

.slot-day[aria-current] {
    color: var(--brand-on-primary);
    background: var(--brand-primary-raised);
    border: 2px solid var(--brand-primary-raised);
    padding: calc(0.4rem - 1px) calc(0.6rem - 1px);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-primary-raised) 40%, transparent);
}
a.slot-day[aria-current]:hover { background: var(--brand-primary-raised); }
/* Bottom-right, where the short centred number leaves room: the top corner sat on the weekday's full stop. */
.slot-day[aria-current]::after {
    content: "\2713";
    position: absolute;
    bottom: 0.15rem;
    right: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.slot-day[aria-disabled="true"] {
    color: var(--muted);
    background: transparent;
    border: 1px dashed var(--brand-hairline);
    box-shadow: none;
    cursor: not-allowed;
}
.slot-day[aria-disabled="true"] .slot-day-number { text-decoration: line-through; font-weight: 500; }

.slot-day-name { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.slot-day-number { font-size: 1.05rem; font-weight: 700; line-height: 1; }

.slot-group { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.slot-legend { padding: 0; margin-bottom: 0.1rem; font-weight: 700; color: var(--ink); }
.slot-service { display: flex; flex-direction: column; gap: 0.4rem; }
.slot-service-name { margin: 0; font-size: 0.85rem; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }

.slot-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--muted);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
    font-weight: 600;
    cursor: pointer;
}
.slot-card:hover { border-color: var(--brand-interactive); background: var(--brand-tint-2); }

/* The radio covers the whole card and carries none of its own box, so the card IS the control: one tap target, one
   accessible name, and the label's text is what a screen reader reads. */
.slot-card > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

/* The tick's space is reserved on every card, so choosing a time reflows nothing under a thumb. */
.slot-card::before {
    content: "\2713";
    visibility: hidden;
    color: var(--brand-ink-accent);
    font-weight: 700;
}
.slot-card:has(:checked) {
    padding: calc(0.4rem - 1px) calc(0.75rem - 1px);
    color: var(--brand-on-primary);
    background: var(--brand-primary-raised);
    border: 2px solid var(--brand-primary-raised);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-primary-raised) 40%, transparent);
}
.slot-card:has(:checked)::before { visibility: visible; color: inherit; }
.slot-card:has(:checked) .slot-last { color: inherit; }
.slot-card:has(:focus-visible) { outline: 2px solid var(--accent-line); outline-offset: 2px; }

.slot-time { font-variant-numeric: tabular-nums; }
.slot-last { color: var(--muted); font-size: 0.75rem; font-weight: 500; }

.slot-note { margin: 0; font-size: 0.85rem; font-weight: 400; color: var(--muted); }

.slot-error {
    margin: 0;
    padding: 0.75rem 0.85rem;
    color: var(--danger-ink);
    background: var(--danger-bg);
    border-left: 3px solid var(--danger-line);
    border-radius: var(--radius-xs);
}

/* A new list of times is on its way. This is state, not motion, so it holds under reduced motion too. */
.slot-times[aria-busy="true"] { opacity: 0.45; pointer-events: none; }

.slot-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .slot-day,
    .slot-card {
        transition:
            background-color var(--dur-2) var(--ease-emphasis),
            border-color var(--dur-2) var(--ease-emphasis),
            color var(--dur-2) var(--ease-emphasis),
            box-shadow var(--dur-2) var(--ease-emphasis),
            transform var(--dur-1) var(--ease-emphasis);
    }
    a.slot-day:hover,
    .slot-card:hover { transform: translateY(-1px); }
    a.slot-day:active,
    .slot-card:active { transform: scale(0.97); }

    .slot-day[aria-current]::after,
    .slot-card:has(:checked)::before { animation: slot-tick var(--dur-2) var(--ease-emphasis) both; }

    .slot-times { transition: opacity var(--dur-1) var(--ease-emphasis); }
    .slot-times.is-entering .slot-service,
    .slot-times.is-entering .slot-note { animation: slot-enter var(--dur-3) var(--ease-emphasis) both; }
    .slot-times.is-entering .slot-card { animation: slot-enter var(--dur-3) var(--ease-emphasis) both; }
    .slot-times.is-entering .slot-card:nth-child(2) { animation-delay: 20ms; }
    .slot-times.is-entering .slot-card:nth-child(3) { animation-delay: 40ms; }
    .slot-times.is-entering .slot-card:nth-child(4) { animation-delay: 60ms; }
    .slot-times.is-entering .slot-card:nth-child(5) { animation-delay: 80ms; }
    .slot-times.is-entering .slot-card:nth-child(n + 6) { animation-delay: 100ms; }
}

@keyframes slot-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@keyframes slot-tick {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: none; }
}