/* /book and /book/manage/ only: the appointment request page. Uses main.css's tokens and form styles. */

/* The pages show and hide their parts with the hidden attribute; main.css's .button (display: inline-flex) would otherwise
   keep a hidden button visible - e.g. "Withdraw this request" on a confirmed appointment (found 2026-10-13, Stage 4B). */
.page-book [hidden] { display: none !important; }

.book-shell { max-width: 860px; }
.book h1 { margin: 6px 0 14px; }
.book-notice { margin: 18px 0 6px; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--paper); color: var(--charcoal); font-size: 0.95rem; }
.book-zone { margin: 0 0 22px; font-size: 0.85rem; }
.book-loading { margin: 28px 0; }
.book-fallback { margin: 18px 0 8px; }
.book-fallback-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }

.book-types { display: grid; gap: 10px; }
.book-type { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); cursor: pointer; }
.book-type input { margin-top: 4px; width: 18px; height: 18px; }
.book-type > span { display: grid; gap: 3px; }
.book-type:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(20, 40, 75, 0.12); }
.book-type .muted { font-size: 0.86rem; }

.book-days { display: grid; gap: 16px; }
.book-day-title { margin: 0 0 8px; font-weight: 600; color: var(--navy); font-size: 0.92rem; }
.book-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.book-slot { min-width: 96px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--navy); font: 500 0.92rem var(--sans); cursor: pointer; }
.book-slot:hover, .book-slot:focus-visible { border-color: var(--navy); }
.book-slot[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.book-more { margin-top: 14px; }
.book-chosen { margin: 14px 0 0; font-weight: 600; color: var(--navy); }
.book-chosen:empty { display: none; }
.book-empty { margin: 0; }

.book-success { margin-top: 26px; }
.book-ref { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; }
.book-card { margin: 10px 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.book-card p { margin: 0 0 8px; }
.book-status { font-weight: 600; color: var(--navy); }
.book-when { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }

@media (max-width: 640px) {
  .book-slot { flex: 1 1 calc(33.333% - 8px); min-width: 0; }
  .book-fallback-actions .button { width: 100%; justify-content: center; }
}