/* The dining page. Layered on site.css for tokens, fields and buttons.
   Mobile first: one column, the stage under the reservation. */

.dine { padding-block: clamp(28px, 4vw, 48px) clamp(72px, 10vw, 128px); }
.dine__in { display: grid; gap: 32px; align-items: start; }

/* ------------------------------------------------------- reservation ---- */
/* The form is the page's one raised surface, like a receipt elsewhere. */
.res { display: grid; gap: 12px; padding: clamp(18px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.res__h { font-size: calc(1.5rem * var(--ds)); }
.res__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.res__pair { display: grid; gap: 8px; }
.res__menu { justify-self: start; font-size: 14px; }
.res .field input:not([type="checkbox"]):not([type="radio"]), .res .field select, .res .sel__btn, .res .field .count { min-height: 42px; }
.res .field input:not([type="checkbox"]):not([type="radio"]), .res .field select, .res .sel__btn { padding-block: 9px; }
.res__note { font-size: 13px; color: var(--muted); }
.res__done { padding: 12px 14px; border-radius: calc(var(--r-card) / 2); background: var(--tint); font-size: 15px; line-height: 1.5; }
.res__done b { display: block; font: var(--display-weight) calc(1.25rem * var(--ds))/1.2 var(--display); }
.res__done a { display: block; margin-top: 6px; color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

.picker { display: grid; gap: 2px; width: 100%; padding: 11px 12px; border: 1px solid var(--field-line); border-radius: calc(var(--r-card) / 2); background: var(--field-bg); text-align: left; }
.picker:hover { border-color: var(--ink); }
.picker__k { font-size: 13px; font-weight: 500; color: var(--muted); }
.picker__v { font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------------- stage ---- */
.stage { position: relative; min-width: 0; }
.stage__face { display: none; }
.stage__face.is-on { display: block; animation: face var(--dur) var(--ease) both; }
@keyframes face { from { opacity: 0; } }
.stage__back { margin-bottom: 14px; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.stage__shots .frame { border-radius: var(--r-feature); }
:root[data-vibe="palace"] .stage__shots .frame { border-radius: var(--r-img); }

.rows { margin-top: 18px; }
.outlet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: baseline; width: 100%; padding: 20px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.outlet:last-child { border-bottom: 1px solid var(--line); }
.outlet__name { font: var(--display-weight) calc(clamp(1.5rem, 2.4vw, 2rem) * var(--ds))/1.1 var(--display); letter-spacing: var(--display-track); color: var(--muted); transition: color 150ms ease; }
.outlet[aria-pressed="true"] .outlet__name, .outlet:hover .outlet__name { color: var(--ink); }
.outlet__meta { grid-column: 1; font-size: 14px; color: var(--muted); }
.outlet__hrs { grid-row: 1; grid-column: 2; font-size: 13px; color: var(--muted); }
.outlet__blurb { grid-column: 1 / -1; max-width: 52ch; margin-top: 6px; }
.outlet[aria-pressed="false"] .outlet__blurb { display: none; }

/* -------------------------------------------------------------- book ---- */
/* A leaf carries the right-hand page on its front and, on its back, the
   left-hand page you see once it has been turned. */
.book { display: grid; gap: 14px; }
.book__strip { overflow: hidden; border-radius: var(--r-img); background: var(--deep); }
.book__rail { display: flex; transition: transform 450ms var(--ease); touch-action: pan-y; }
.book__slide { flex: 0 0 100%; aspect-ratio: 3 / 4; }
.book__spread { position: relative; aspect-ratio: 3 / 4; perspective: 2200px; border-radius: var(--r-img); background: color-mix(in oklab, var(--deep) 92%, black); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.leaf { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; transition: transform 800ms cubic-bezier(.45, .05, .25, 1); }
.leaf.is-turned { transform: rotateY(-180deg); }
.leaf__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 var(--r-img) var(--r-img) 0; background: var(--paper); color: var(--paper-ink); box-shadow: inset 24px 0 30px -24px rgba(0, 0, 0, .35); }
.leaf__face--l { transform: rotateY(180deg); border-radius: var(--r-img) 0 0 var(--r-img); box-shadow: inset -24px 0 30px -24px rgba(0, 0, 0, .35); }
.page { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 4vw, 44px); background: var(--paper); color: var(--paper-ink); }
.page--cover { justify-content: center; align-items: center; text-align: center; gap: 10px; }
.page--blank { background: color-mix(in oklab, var(--deep) 92%, black); }
.page__kicker { font-size: 14px; opacity: .7; }
.page__title { font-size: calc(clamp(2rem, 4vw, 3rem) * var(--ds)); }
.page__foot { max-width: 28ch; font-size: 14px; opacity: .7; }
.page__cat { font-size: calc(clamp(1.4rem, 2.4vw, 2rem) * var(--ds)); margin-bottom: 4px; }
.page__list { display: grid; }
.page__list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in oklab, var(--paper-ink) 14%, transparent); font-size: 15px; }
.page__list span { font-weight: 600; }
.page__list i { flex: 1; }
.page__list b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.book__nav { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; color: var(--muted); }
.book__nav button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.1rem; }
.book__nav button:hover { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }

/* ------------------------------------------------------------- floor ---- */
.floor { display: grid; gap: 12px; }
.floor__head { font-size: 15px; color: var(--muted); }
.floor__head b { color: var(--ink); font-weight: 600; }
.floor__svg { width: 100%; height: auto; border-radius: var(--r-img); background: var(--tint); }
.floor__room { fill: var(--surface); stroke: var(--line); stroke-width: .4; }
.floor__door { font-size: 2.4px; fill: var(--muted); }
.tbl text { font-size: 3.4px; font-weight: 600; fill: var(--muted); pointer-events: none; }
.tbl circle, .tbl rect { stroke-width: .5; transition: fill 150ms ease, stroke 150ms ease; }
.tbl--free circle, .tbl--free rect { fill: var(--surface); stroke: var(--deep); cursor: pointer; }
.tbl--free:hover circle, .tbl--free:hover rect { fill: color-mix(in oklab, var(--deep) 16%, var(--surface)); }
.tbl--mine circle, .tbl--mine rect { fill: var(--deep); stroke: var(--deep); cursor: pointer; }
.tbl--mine text { fill: var(--on-deep); }
.tbl--small circle, .tbl--small rect { fill: var(--surface); stroke: var(--line); }
.tbl--small text, .tbl--taken text { fill: color-mix(in oklab, var(--ink) 35%, var(--surface)); }
.tbl--taken circle, .tbl--taken rect { fill: var(--line); stroke: var(--line); }
.tbl:focus-visible { outline: 2px solid var(--accent); }
.floor__key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--muted); }
.k { display: flex; align-items: center; gap: 6px; }
.k::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--deep); background: var(--surface); }
.k--mine::before { background: var(--deep); }
.k--small::before { border-color: var(--line); }
.k--taken::before { background: var(--line); border-color: var(--line); }
.floor__note { font-size: 13px; color: var(--muted); }

@media (min-width: 900px) {
  .dine__in { grid-template-columns: 340px minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  /* Whole on a laptop screen; on a very short one it scrolls inside itself
     rather than hiding the button below the fold. */
  .res { position: sticky; top: calc(var(--head-h) + 16px); max-height: calc(100svh - var(--head-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .book__spread { aspect-ratio: 1.46; }
  /* Two facing pages: leaves live on the right half and turn onto the left. */
  .leaf { left: 50%; width: 50%; }
}