/* 07 · #book — weekend-night strip with computed moons + the booking ticket. Tokens only (+ values written in SECTIONS.md §7).
   The page is dir=rtl everywhere; the few physical-direction values (mask positions, fade gradient, sheen translate) are marked. */
#book [hidden] { display: none !important; }

/* staged boundary: the sheet slides over the night section above (#guide) */

/* ── layout ── */
#book .book-grid { display: grid; gap: clamp(28px, 5vw, 44px); }
#book .ticket-wrap { inline-size: 100%; max-inline-size: 560px; margin-inline: auto; perspective: 1000px; }
@media (min-width: 961px) {
  #book.is-ready .book-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  #book.is-ready .book-pick { grid-column: 1 / 8; min-inline-size: 0; }
  #book.is-ready .ticket-wrap { grid-column: 8 / 13; max-inline-size: none; margin-inline: 0; position: sticky; inset-block-start: 96px; }
}

/* ── night strip ── */
#book .book-pick { min-inline-size: 0; }
#book .nights {
  display: flex; gap: 12px; padding: 10px 6px 14px; padding-inline-end: 36px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* fade hint on the physical left = where the strip continues in RTL */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px);
}
#book .nights::-webkit-scrollbar { display: none; }
@media (max-width: 960px) {
  #book .nights { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter) calc(var(--gutter) + 28px); scroll-padding-inline: var(--gutter); }
}

/* desktop: the split layout has room for every night, so the strip lays out as a grid (no hidden, undiscoverable scroll for mouse users) */
@media (min-width: 961px) {
  #book.is-ready .nights {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; padding: 0; overflow: visible; scroll-snap-type: none;
    -webkit-mask-image: none; mask-image: none;
  }
  #book.is-ready .night { inline-size: auto; }
}

#book .night {
  position: relative; flex: none; inline-size: 132px; min-block-size: 190px; padding: 14px 14px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: start;
  background: var(--sand-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-card);
  scroll-snap-align: start; cursor: pointer;
  transition: translate .3s var(--ease-out), border-color .2s ease, box-shadow .3s ease;
}
#book .night:hover { translate: 0 -3px; border-color: var(--ink-3); }
#book .night:focus-visible { outline: 3px solid var(--focus-sand); outline-offset: 3px; border-radius: var(--r-card); }
#book .night[aria-checked="true"] { border-color: var(--ochre); box-shadow: inset 0 0 0 1px var(--ochre), var(--sh-1); }
#book .night::after {
  content: ""; position: absolute; inset-block-start: 14px; inset-inline-end: 14px; inline-size: 12px; block-size: 12px; background: var(--ochre);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  scale: 0; rotate: -45deg; opacity: 0; transition: scale .4s var(--ease-spring), rotate .4s var(--ease-out), opacity .2s ease;
}
#book .night[aria-checked="true"]::after { scale: 1; rotate: 0deg; opacity: 1; }
#book .night__day { font-size: var(--t-sm); font-weight: 600; color: var(--ink); line-height: 1.5; padding-inline-end: 18px; }
#book .night__date { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--ochre); line-height: var(--lh-display); }
/* the moon is this camp's one unique fact: 40px on the card, 48px when chosen (the 48px box is reserved, so nothing shifts) */
#book .night__moon { display: grid; align-items: center; justify-items: start; inline-size: 48px; block-size: 48px; margin-block: 6px 4px; }
#book .night .moon { inline-size: 40px; block-size: 40px; transition: inline-size .35s var(--ease-spring), block-size .35s var(--ease-spring); }
#book .night[aria-checked="true"] .moon { inline-size: 48px; block-size: 48px; }
#book .night__label { font-size: var(--t-xs); line-height: 1.8; color: var(--ink-3); text-wrap: balance; }

/* moon glyph (SVG 28px): dark disc + lit part */
#book .moon { inline-size: 28px; block-size: 28px; flex: none; overflow: visible; }
#book .moon-disc { fill: var(--night-2); }
#book .moon-lit { fill: var(--star); }

/* ── ticket ── */
#book .ticket-tilt { position: relative; transform-origin: 50% 50%; will-change: transform; }
#book .ticket-tilt::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); box-shadow: var(--sh-ticket); }
#book .ticket {
  --stub-h: 236px;
  position: relative; display: grid; overflow: hidden; border-radius: var(--r-card); background: var(--night-2); color: var(--star-2);
  /* stacked: stub below, notches on both sides of the perforation (the cut position is measured from the bottom) */
  -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - var(--stub-h)), #0000 11.5px, #000 12px), radial-gradient(circle 12px at 100% calc(100% - var(--stub-h)), #0000 11.5px, #000 12px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 12px at 0 calc(100% - var(--stub-h)), #0000 11.5px, #000 12px), radial-gradient(circle 12px at 100% calc(100% - var(--stub-h)), #0000 11.5px, #000 12px);
  mask-composite: intersect;
}
#book .ticket__main { padding: 26px 24px 20px; display: grid; gap: 4px; align-content: start; }
#book .ticket__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; line-height: var(--lh-display); color: var(--star); margin-block-end: 8px; }
#book .ticket__title .star4 { inline-size: 14px; block-size: 14px; color: var(--gold); }
#book .ticket__rows { margin: 0; }
#book .trow { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; column-gap: 12px; padding-block: 12px; border-block-end: 1px solid var(--line-night); }
#book .trow dt { font-size: var(--t-sm); color: var(--star-3); }
#book .trow dd { margin: 0; font-size: var(--t-md); font-weight: 500; color: var(--star); }

/* rolling value (H3): old rolls up and out, new rolls in from below */
#book .roll { display: grid; overflow: hidden; }
#book .roll__v { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; line-height: 1.6; will-change: transform, opacity; }
#book .roll[data-roll="night"] .roll__v { color: var(--gold); font-weight: 600; }
#book .roll[data-roll="night"] .roll__v b { font-weight: 600; }
#book .roll--moon { min-block-size: 3.4em; align-content: center; }
#book .roll__txt { display: grid; line-height: 1.55; }
#book .roll__txt small { font-size: var(--t-xs); color: var(--star-3); font-weight: 400; }
#book .ticket .moon-disc { fill: var(--night); stroke: var(--line-night); stroke-width: 1; }

#book .ticket__opts { display: grid; gap: 10px; padding-block-start: 12px; }
#book .check { display: flex; align-items: center; gap: 12px; min-block-size: 44px; font-size: var(--t-sm); color: var(--star-2); cursor: pointer; }
#book .check input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; inline-size: 24px; block-size: 24px; display: grid; place-content: center;
  border: 1.5px solid var(--star-3); border-radius: 7px; background: transparent; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
#book .check input::after { content: ""; inline-size: 6px; block-size: 11px; border: solid var(--night); border-width: 0 2.5px 2.5px 0; rotate: 45deg; translate: 0 -1px; opacity: 0; transition: opacity .15s ease; }
#book .check input:checked { background: var(--gold); border-color: var(--gold); }
#book .check input:checked::after { opacity: 1; }
#book .field { display: grid; gap: 4px; }
#book .field label { font-size: var(--t-sm); color: var(--star-2); }
#book .field label small { font-size: var(--t-xs); color: var(--star-3); }
#book .field input {
  inline-size: 100%; min-block-size: 44px; padding-inline: 14px; font-size: var(--t-md); color: var(--star);
  background: var(--night); border: 1px solid var(--star-3); border-radius: var(--r-ctl);
}
#book .ticket :focus-visible { outline: 3px solid var(--focus-night); outline-offset: 3px; }

/* stub: always below the main part (the price is display-size and needs the full width) */
#book .ticket__stub {
  position: relative; display: grid; justify-items: stretch; align-content: center; gap: 14px;
  padding: 24px 24px 20px; background: var(--night);
}
#book .ticket__stub::before { content: ""; position: absolute; inset-inline: 20px; inset-block-start: 0; border-block-start: 2px dashed var(--star-3); opacity: .5; }
#book .ticket__total { font: 700 var(--d-num)/1.2 var(--font-display); color: var(--gold); white-space: nowrap; }
#book .ticket__stub .btn-primary { inline-size: 100%; }
#book .ticket__fine { font-size: var(--t-xs); line-height: 1.6; color: var(--star-3); }

/* keep focused controls clear of the fixed mobile CTA bar (the page sets only scroll-padding-top) */
#book .check input, #book .field input, #book .ticket .btn-primary, #book .night { scroll-margin-block-end: 104px; }

/* sheen (fine pointers; moved by JS with transform only) */
#book .ticket__sheen {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 360px; block-size: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(242, 199, 126, .18), transparent 62%); opacity: 0; pointer-events: none; z-index: 2;
  transition: opacity .35s ease; will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  #book .night, #book .night::after, #book .night .moon { transition: none; }
  #book .ticket-tilt { will-change: auto; }
}

/* ticket row: the eight-tent constellation in miniature, your star lit */
#book .mini-const { display: inline-flex; align-items: center; gap: 5px; margin-inline-end: 8px; vertical-align: middle; }
#book .mini-const i { inline-size: 7px; block-size: 7px; background: var(--star-3); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
#book .mini-const i:nth-child(odd) { translate: 0 -3px; }
#book .mini-const i.you { inline-size: 12px; block-size: 12px; background: var(--gold); }