/* Cedar Lodge: the branded date range calendar.

   SPEC: ../.planning/site-ux-2026-10-02/SPEC.md section 3. Written 2026-10-02.

   Loaded immediately AFTER /css/site.css so that a rule here at equal specificity wins on
   source order. That is what lets a three-class selector below restyle .lodge .field input
   without an arms race on specificity.

   Every value reads a live token from body.lodge (css/site.css:662 to 735). The only hand
   written colours in this file are the two rgba shadows, which match the card shadow already in
   site.css, and the three rgba charcoal tints used as a hairline or a scrim.

   One theme, light. No prefers-color-scheme block, no [data-theme] rule, no toggle, per the
   2026-09-23 ruling. */

/* ---------- The trigger buttons ----------------------------------------------------------
   The native date inputs stay in the form and keep submitting. They are hidden only while the
   calendar is running: a display:none input still submits its value and is still readable and
   writable as .value. Nothing here disables anything, because a disabled input does not submit. */
.lodge .picker.cal-on .field input[type="date"] { display:none;
}
/* The same box the native input had (css/site.css:1000 to 1004), plus three additions, so the
   three fields keep identical height, radius, border, ground and type size. */
.lodge .picker.cal-on .cal-trigger {
  min-height:var(--tap); width:100%; height:100%; display:flex; align-items:center;
  border-radius:var(--radius-sm); border:1px solid var(--cl-surface-deep);
  background:var(--cl-background); color:var(--ink);
  font-family:var(--font-sans); font-size:1rem; padding:0 12px; text-align:left; cursor:pointer;
}
.lodge .picker.cal-on .cal-trigger:hover { border-color:var(--border-strong);
}
.lodge .picker.cal-on .cal-trigger:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
.lodge .picker.cal-on .cal-trigger[aria-expanded="true"] {
  border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
}
/* The Guests select is not converted (ruled 2026-09-25: the three fields read as one row), so
   this one rule gives it the same focus treatment as the new trigger beside it. */
.lodge .picker.cal-on .field select:focus-visible {
  border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
}

/* ---------- The nights count under the fields ----------------------------------------------
   Empty with JavaScript off, and an empty one takes no space at all, so no blank row ever
   ships. */
.lodge .picker-nights {
  margin:12px 0 0; font-family:var(--font-sans); font-size:.86rem; color:var(--ink-muted);
}
.lodge .picker-nights:empty { display:none;
}

/* ---------- The popover ---------------------------------------------------------------------
   A non-modal dialog: role="dialog" with no aria-modal, dismissed by Escape or by a click on
   the page. SPEC 3.4 names this as a deliberate departure from both APG examples.
   z-index sits below the fixed header (50 at css/site.css:857), which is above the hero. */
.lodge .picker.cal-on { position:relative;
}
.lodge .cal-pop {
  position:absolute; z-index:48; top:calc(100% + 10px); left:0; right:0;
  background:var(--cl-white); color:var(--ink);
  border:1px solid var(--cl-surface-deep); border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(26,26,26,.10), 0 18px 40px -20px rgba(26,26,26,.45);
  padding:14px; font-family:var(--font-sans); text-align:left;
}

.lodge .cal-head { display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.lodge .cal-title {
  margin:0; flex:1 1 auto; text-align:center;
  font-family:var(--font-sans); font-size:.94rem; font-weight:600; color:var(--ink);
}
.lodge .cal-nav {
  flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cl-surface-deep); border-radius:var(--radius-sm);
  background:var(--cl-white); color:var(--ink); font-size:1rem; cursor:pointer;
}
.lodge .cal-nav:hover { background:var(--sunken);
}
.lodge .cal-nav:focus-visible { outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- The month grids ---------------------------------------------------------------- */
.lodge .cal-months { display:flex; gap:18px; align-items:flex-start;
}
.lodge .cal-grid {
  flex:1 1 0; min-width:0; width:100%; border-collapse:collapse; table-layout:fixed;
}
.lodge .cal-grid th {
  padding:0 0 6px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--ink-muted); text-align:center;
  border-bottom:1px solid var(--cl-surface-deep);
}
.lodge .cal-grid td { padding:1px; text-align:center;
}
.lodge .cal-day {
  width:100%; min-height:var(--tap); display:flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--radius-sm); background:transparent;
  font-family:var(--font-sans); font-size:.94rem; color:var(--ink); cursor:pointer;
}
.lodge .cal-day:hover { background:var(--sunken);
}
.lodge .cal-day:focus-visible { outline:2px solid var(--accent); outline-offset:2px;
}
/* Terracotta is the one accent inside this component and it means "your range". Nothing else in
   here is allowed to use it as a fill. */
.lodge .cal-day[data-state="mid"] { background:var(--accent-soft);
}
.lodge .cal-day[data-state="start"],
.lodge .cal-day[data-state="end"] {
  background:var(--accent); color:var(--cl-white); font-weight:600;
}
/* D2, fixed 2026-10-02. There was an :hover rule here putting the two range ends on
   var(--accent-hover), which is color-mix(in srgb, var(--cl-accent) 82%, black 18%) and
   resolves to #9F583D. The pointer rests on the check-out cell the instant it is clicked, so
   the two ends of a range read as two different terracottas for as long as the guest leaves
   the mouse where it was: measured, check in rgb(194,107,74) against a check out mixed 18
   percent toward black. SPEC 3.9 puts both ends on var(--cl-accent) with a white numeral and
   names no endpoint hover, so the rule is gone rather than retuned. The two ends now read the
   same token at all times. Hover on a day that is NOT an end still fills var(--sunken) from
   the rule above, and the focus-visible outline is untouched. */
/* Never --cl-muted here: the contrast ruling at css/site.css:669 reserves stone for borders,
   rules and icons and measures it as failing text on all three grounds. */
.lodge .cal-day[aria-disabled="true"] {
  color:var(--ink-soft); opacity:.38; cursor:default;
}
.lodge .cal-day[aria-disabled="true"]:hover { background:transparent;
}
.lodge .cal-day[data-today="true"] { box-shadow:inset 0 -2px 0 var(--accent);
}
.lodge .cal-day[data-today="true"][data-state="start"],
.lodge .cal-day[data-today="true"][data-state="end"] { box-shadow:none;
}

/* ---------- Hint and footer ---------------------------------------------------------------- */
.lodge .cal-hint {
  margin:10px 0 0; padding:8px 10px; border-radius:var(--radius-sm);
  background:var(--cl-background); color:var(--ink-muted); font-size:.82rem;
}
.lodge .cal-foot {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--cl-surface-deep);
}
.lodge .cal-nights { margin:0; font-size:.9rem; font-weight:600; color:var(--ink);
}
/* Charcoal, not ember. --ember resolves to the same terracotta as --accent, so an ember Done
   button would compete with the selected range for the eye. SPEC 3.9. */
.lodge .cal-close {
  min-height:40px; padding:0 18px; border:1px solid var(--action); border-radius:var(--radius-sm);
  background:var(--action); color:var(--action-ink);
  font-family:var(--font-sans); font-size:.92rem; font-weight:500; cursor:pointer;
}
.lodge .cal-close:hover { background:var(--action-hover); border-color:var(--action-hover);
}
.lodge .cal-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- Motion -------------------------------------------------------------------------
   Declared only under no-preference. There is no second prefers-reduced-motion block in this
   file: the site-wide one at css/site.css:1464 is the single home for the reduction, and
   nothing here ever appears only through an animation. Open and close are el.hidden. */
@media (prefers-reduced-motion: no-preference) {
  .lodge .cal-day { transition:background-color .12s ease, color .12s ease;
  }
  .lodge .cal-nav, .lodge .cal-close, .lodge .picker.cal-on .cal-trigger {
    transition:background-color .12s ease, border-color .12s ease;
  }
}

/* ---------- Phone: the popover becomes a bottom sheet --------------------------------------
   One month, rendered rather than hidden (js/calendar.js renders the second table only at
   761px and above, so a screen reader is never reading a month nobody can see). The sheet
   scrolls in its own box and a scroll gesture inside it does not scroll the page behind. */
@media (max-width:760px) {
  .lodge .cal-pop {
    position:fixed; inset:auto 0 0 0; z-index:60; top:auto;
    border:0; border-top:1px solid var(--cl-surface-deep);
    border-radius:var(--radius) var(--radius) 0 0;
    padding:14px 14px 18px;
    max-height:88svh; overflow-y:auto; overscroll-behavior:contain;
    box-shadow:0 -10px 34px -16px rgba(26,26,26,.45);
  }
  .lodge .cal-months { gap:0;
  }
  .lodge .cal-title { font-size:1rem;
  }
  .lodge .cal-nav { width:var(--tap); height:var(--tap);
  }
  .lodge .cal-day { font-size:1rem;
  }
  .lodge .cal-close { min-height:var(--tap); padding:0 22px;
  }
  /* 16px is the floor on a phone, the same reason as the native fields it replaces: any smaller
     and iOS Safari zooms the page the moment the control is tapped. */
  .lodge .picker.cal-on .cal-trigger { font-size:16px; padding:0 10px;
  }
}

/* ---------- Desktop: the popover becomes a centred dialog -----------------------------------
   D1, fixed 2026-10-02. The anchored dropdown could not be made to fit. Measured at head
   ed6630c with the popover 461.19px tall: at 1440x900 it ran from y 720.77 to y 1181.95 and the
   hero section clipped 273.95px of it away, at 1366x768 it clipped 323.54px, at 1280x720 the
   same. The clip belongs to .hero.hero-home, whose overflow is hidden, and 37 to 51 day buttons
   plus the Done button failed an elementFromPoint test at their own centres: not merely
   invisible, unreachable.

   Why not the smaller fixes. Unclipping the section and flipping the panel above the field
   needs 461 + 10 px of room above the picker. There is 496.59px at 1440x900, so that one width
   would work, but only 406.66px at 1366x768 and about 396px at 1280x720, so the panel would
   start above the top of the screen at both. Below the field never fits at any of the three:
   the field bottom plus 471 lands at 1182, 1092 and 1083 against viewports of 900, 768 and 720.
   So an anchored panel is placeable at one of the three sizes tested and at neither of the
   other two, which is why this takes the third option in the brief.

   position:fixed is also what makes the clip irrelevant: a fixed box's containing block is the
   viewport, so an ancestor's overflow:hidden does not clip it. That is already proven in this
   file, because it is why the phone sheet below has always escaped the same clip. The hero's
   own overflow:hidden is therefore left exactly as it was, and the photograph and the scrim are
   untouched at every width.

   inset with margin:auto centres the box on both axes without a transform, which is deliberate:
   a transform would create a containing block for fixed descendants and change what the inset
   values mean.

   The top inset is 88px rather than 0, which is the 80px header plus 8px of air, so the dialog
   centres in the space BELOW the header instead of on the whole screen. It has to: .hero-home
   carries isolation:isolate, so this popover's z-index:60 is resolved inside the hero's own
   stacking context, and the hero as a whole sits below the z-index:50 header at the root. The
   header therefore paints over this dialog, measured: with the dialog open at 1366x768 the
   header pixels are unchanged at rgb(240,237,229) while the hero behind the dialog goes from
   rgb(59,67,71) to rgb(47,52,54). At the three sizes in the check the two never meet, but a
   short desktop window would have put the month title and the two month buttons under the
   header without this floor. The phone sheet has the same trap and does not care, because it
   is pinned to the bottom of the screen.

   The backdrop is a third box-shadow with a 100vmax spread, not an overlay element and not a
   pseudo-element. Two reasons, both measured rather than assumed. A pseudo-element at
   z-index:-1 paints AFTER the background of the box that owns it, so the first attempt tinted
   the dialog's own white surface grey; the screenshot showed it. And an outer shadow cannot
   take a pointer event, which matters here: the document-level dismiss handler in
   js/calendar.js closes on a click anywhere outside, and a real overlay that swallowed the
   click would be read as a click inside the popover and would leave it open. So the surface
   stays the non-modal dialog SPEC 3.4 ruled: role="dialog" with no aria-modal, Escape closes
   and returns focus, a click on the page dismisses. The two shadows already on .cal-pop are
   repeated here because box-shadow does not merge across rules.

   One theme, light. No prefers-color-scheme block and no second reduced-motion block: nothing
   here appears only through an animation, open and close are still el.hidden. */
@media (min-width:761px) {
  .lodge .cal-pop {
    position:fixed; z-index:60;
    inset:88px 12px 12px; margin:auto;
    width:min(718px, calc(100vw - 48px));
    height:max-content; max-height:calc(100svh - 112px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .lodge .cal-pop {
    box-shadow:0 2px 6px rgba(26,26,26,.10), 0 18px 40px -20px rgba(26,26,26,.45),
      0 0 0 100vmax rgba(26,26,26,.38);
  }
}