/* Booking explorations, round 2: the parts every direction shares. Only
   available hours are ever drawn, each with its student price; the empty,
   busy, locked and error states are designed, not left to the defaults. */

/* a slot someone just took leaves the list; the error line says why */
.bk-page .bkp-time.is-taken { display: none; }

/* the price beside a time */
.x-slot-price { color: var(--ls-ink-2); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.bkp-time) input:checked + * .x-slot-price { color: inherit; }

/* no open time: the sleeping cat, the live sentence */
.x-empty { display: grid; justify-items: center; gap: 4px; padding: 20px 16px 24px; border-radius: 18px; background: var(--ls-tint, #F4EEE4); text-align: center; }
.x-empty-art { display: block; width: 132px; margin-bottom: 8px; }
.x-empty-art img { display: block; width: 100%; height: auto; }
.x-empty-title { margin: 0; color: var(--ls-ink); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.x-empty-line { margin: 0; color: var(--ls-ink-2); font-size: 16px; }
/* nothing to book: the stub and the steps step aside */
.bk-page .x-none { display: none !important; }

/* the pick error: a calm line with a mark, not loose red text */
.bk-page .bkp-pick-error:not([hidden]) { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ls-orange, #F04E23) 9%, var(--ls-paper, #FAF7F2)); color: var(--ls-accent-text, #A63A12); font-size: 15px; font-weight: 700; line-height: 1.4; }
.bk-page .bkp-pick-error:not([hidden])::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; font-size: 13px; font-weight: 800; line-height: 1; }
.bk-page .bkp-msg:not(:empty) { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ls-orange, #F04E23) 9%, var(--ls-paper, #FAF7F2)); color: var(--ls-accent-text, #A63A12); font-size: 15px; font-weight: 700; }

/* the launch lock: a calm pill at full strength, not a faded button */
.bk-page .bkp-go[data-bk-locked]:disabled { opacity: 1; color: var(--ls-ink); background: var(--ls-paper, #FAF7F2); box-shadow: inset 0 0 0 1.5px var(--ls-ink); cursor: default; }
/* busy: "Booking..." stays readable while the request runs */
.bk-page .bkp-go:disabled:not([data-bk-locked]) { opacity: .82; }

/* tap targets and focus for every choice */
.bk-page :is(.bkp-day, .bkp-time, .bkp-seg) input:focus-visible + * { outline: 3px solid var(--ls-ink); outline-offset: 2px; }
.bk-page .bkp-back { min-height: 44px; }

/* the signed-in header fits a 360 to 400 px phone (the /bookings/ sizes) */
@media (max-width: 400px) {
  .ls .nav { gap: 8px; }
  .ls .nav-logo { width: 104px; }
  .ls .nav-right { gap: 6px; }
  .ls .nav-right .btn-sm { padding-inline: 12px 14px; }
}
@media (max-width: 370px) {
  .ls .nav-logo { width: 96px; }
  .ls .nav-right { gap: 4px; }
  .ls .nav-right .btn-sm { padding-inline: 10px 12px; }
}

/* dark follows light: the brand's deep band colour carries white type, and a
   picked hour keeps one ink on the pale dark-mode accent */
[data-theme="dark"] :is(.xa-price, .xd-price, .xe-card-price) { background: var(--brand-band); color: #FFFFFF; }
[data-theme="dark"] .bk-page :is(.bkp-time, .bkp-day, .bkp-seg) input:checked + * :is(span, b, small) { color: var(--brand-accent-ink) !important; }
[data-theme="dark"] .x-held-page .x-ticket-stub { background: var(--brand-tone, var(--ls-paper)); }