/* ==========================================================================
   datepicker -- the ONE date picker of the Calendar family (S284-DATEPICK, BT-284.1; ui-guideline.md Q112).
   Behaviour: static/shared/tra_datepicker.js. A shared partial (ui-guideline.md §3, Q47): this file uses only Tier-0 properties and
   its own --datepicker-* interface; each family maps the interface from its own Tier-1 tokens in its own file
   (Calendar: static/ops/calendar.css; Desktop family: static/ops/atoms-desktop.css), so the picker looks the same in every host
   of the Reservation Drawer and follows Light / Dark with the family's own tokens.

   Markup contract (built by tra_datepicker.js and appended to <body>):
     .datepicker.datepicker--two | --one | --sheet    the dialog; two = 2-month popover, one = 1-month compact popover, sheet = phone
       .datepicker__handle                            sheet grab handle (sheet only)
       .datepicker__head > .datepicker__presets, .datepicker__fields
       .datepicker__nav > .datepicker__navbtn x2
       .datepicker__months > .datepicker__month > .datepicker__monthhead + .datepicker__grid
       .datepicker__foot > .datepicker__status (.datepicker__readout, .datepicker__warn) [+ Cancel, Apply]
     .datepicker__scrim, .datepicker__tip            sheet scrim, the follow-the-pointer tooltip
   Interface properties (all required): see the :root block of the mapping file.
   ========================================================================== */
.datepicker {
  position: fixed;
  z-index: var(--datepicker-z);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--datepicker-gap);
  padding: var(--datepicker-pad);
  background: var(--datepicker-surface);
  color: var(--datepicker-text);
  border: 1px solid var(--datepicker-border);
  border-radius: var(--datepicker-radius);
  box-shadow: var(--datepicker-shadow);
  font-family: var(--datepicker-font);
  font-size: var(--datepicker-fs);
  overflow: auto;
  overscroll-behavior: contain;
}
.datepicker--two { width: 36.25rem; }
.datepicker--one { width: 19.5rem; }
/* S315 WEBCHK: the modal presentation (option `modal`): a centred dialog, two months or one, over the scrim. */
.datepicker--dialog-two { width: 36.25rem; }
.datepicker--dialog-one { width: 19.5rem; }
.datepicker--dialog-two, .datepicker--dialog-one { z-index: calc(var(--datepicker-z) + 1); }
.datepicker--sheet {
  left: 0; right: 0; bottom: 0; width: auto;
  border-radius: var(--datepicker-radius) var(--datepicker-radius) 0 0;
  border-inline: 0; border-bottom: 0;
  padding-bottom: calc(var(--datepicker-pad) + env(safe-area-inset-bottom, 0rem));
  z-index: calc(var(--datepicker-z) + 1);
}
.datepicker__scrim { display: none; position: fixed; inset: 0; background: var(--datepicker-scrim); z-index: var(--datepicker-z); }
.datepicker__scrim.is-on { display: block; }
.datepicker__handle { display: none; align-self: center; width: 2.5rem; height: 0.25rem; border-radius: var(--datepicker-radius-pill); background: var(--datepicker-border-strong); }
.datepicker--sheet .datepicker__handle { display: block; }

.datepicker__head { display: flex; flex-direction: column; gap: var(--datepicker-gap); padding-bottom: var(--datepicker-gap); border-bottom: 1px solid var(--datepicker-border); }
.datepicker__presets { display: flex; flex-wrap: wrap; gap: var(--datepicker-gap); }
.datepicker__preset {
  font: inherit; font-size: var(--datepicker-fs); color: var(--datepicker-text); background: var(--datepicker-surface);
  border: 1px solid var(--datepicker-border); border-radius: var(--datepicker-radius-sm); padding: 0.25rem 0.75rem; cursor: pointer;
}
.datepicker__preset:hover { background: var(--datepicker-hover); border-color: var(--datepicker-border-strong); }
.datepicker__preset.is-on { background: var(--datepicker-accent); border-color: var(--datepicker-accent); color: var(--datepicker-on-accent); }
.datepicker__fields { display: flex; align-items: flex-end; gap: var(--datepicker-gap); flex-wrap: wrap; }
.datepicker__field { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.datepicker__fieldcap { font-size: var(--datepicker-fs-sm); color: var(--datepicker-text-muted); }
.datepicker__input {
  box-sizing: border-box; width: 8.5rem; font: inherit; font-size: var(--datepicker-fs); color: var(--datepicker-text); text-align: center;
  background: var(--datepicker-surface); border: 1px solid var(--datepicker-border); border-radius: var(--datepicker-radius-sm); padding: 0.375rem 0.5rem;
}
.datepicker__input:focus-visible { outline: 2px solid var(--datepicker-accent); outline-offset: 1px; }
.datepicker__input.is-invalid { border-color: var(--datepicker-danger); }
.datepicker__arrow { color: var(--datepicker-text-faint); padding-bottom: 0.4rem; }

.datepicker__nav { display: flex; justify-content: space-between; }
.datepicker__navbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; font: inherit; font-size: 1.25rem; line-height: 1;
  color: var(--datepicker-text-muted); background: none; border: 1px solid var(--datepicker-border); border-radius: var(--datepicker-radius-sm); cursor: pointer;
}
.datepicker__navbtn:hover:not(:disabled) { background: var(--datepicker-hover); color: var(--datepicker-text); }
.datepicker__navbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.datepicker__navbtn:focus-visible, .datepicker__preset:focus-visible { outline: 2px solid var(--datepicker-accent); outline-offset: 1px; }

.datepicker__months { display: flex; gap: var(--datepicker-pad); justify-content: space-between; }
.datepicker__month { flex: 1 1 0; min-width: 0; }
.datepicker__monthhead { text-align: center; font-weight: var(--datepicker-fw-bold); color: var(--datepicker-text); margin-bottom: var(--datepicker-gap); }
.datepicker__grid { display: flex; flex-direction: column; gap: 0.125rem; }
.datepicker__dow, .datepicker__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.datepicker__dow span { text-align: center; font-size: var(--datepicker-fs-sm); color: var(--datepicker-text-faint); padding-bottom: 0.25rem; }
.datepicker__blank { height: var(--datepicker-cell-h); }
.datepicker__day {
  position: relative; box-sizing: border-box; height: var(--datepicker-cell-h); min-width: 0; padding: 0; font: inherit; font-size: var(--datepicker-fs);
  color: var(--datepicker-text); background: none; border: 1px solid transparent; border-radius: var(--datepicker-radius-sm); cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none;
}
.datepicker__day:hover { background: var(--datepicker-hover); }
.datepicker__day.is-today { border-color: var(--datepicker-accent); font-weight: var(--datepicker-fw-bold); }
.datepicker__day.is-range, .datepicker__day.is-preview { background: var(--datepicker-range); font-weight: var(--datepicker-fw-bold); border-radius: 0; }
.datepicker__day.is-preview { opacity: 0.85; }
.datepicker__day.is-edge { background: var(--datepicker-range-edge); border-color: var(--datepicker-range-edge); color: var(--datepicker-on-accent); font-weight: var(--datepicker-fw-bold); }
.datepicker__day.is-edge.is-first { border-start-start-radius: var(--datepicker-radius-sm); border-end-start-radius: var(--datepicker-radius-sm); }
.datepicker__day.is-edge.is-last { border-start-end-radius: var(--datepicker-radius-sm); border-end-end-radius: var(--datepicker-radius-sm); }
.datepicker__day.is-edge:not(.is-first):not(.is-last) { border-radius: var(--datepicker-radius-sm); }
.datepicker__day.is-disabled { opacity: 0.35; cursor: not-allowed; }
.datepicker__day.is-disabled:hover { background: none; }
.datepicker__day:focus-visible { outline: 2px solid var(--datepicker-accent); outline-offset: -2px; z-index: 1; }

.datepicker__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--datepicker-gap); padding-top: var(--datepicker-gap); border-top: 1px solid var(--datepicker-border); }
.datepicker__status { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.datepicker__readout { font-weight: var(--datepicker-fw-bold); color: var(--datepicker-text); min-height: 1.25rem; }
.datepicker__warn { display: none; color: var(--datepicker-warn); font-size: var(--datepicker-fs-sm); }
.datepicker__warn.is-on { display: block; }

.datepicker__tip {
  position: fixed; display: none; pointer-events: none; z-index: calc(var(--datepicker-z) + 2); max-width: 18rem;
  background: var(--datepicker-tip-bg); color: var(--datepicker-tip-text); border-radius: var(--datepicker-radius-sm);
  padding: 0.375rem 0.625rem; font-family: var(--datepicker-font); font-size: var(--datepicker-fs-sm); box-shadow: var(--datepicker-shadow);
}
.datepicker__tip.is-on { display: block; }
.datepicker__tipline { font-weight: var(--datepicker-fw-bold); white-space: nowrap; }
.datepicker__tipwarn { margin-top: 0.125rem; color: var(--datepicker-tip-warn); }
.datepicker__sr { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Bottom sheet: one month, finger-sized targets, stacked fields. */
.datepicker--sheet { gap: var(--datepicker-pad); }
.datepicker__apply:disabled { opacity: 0.45; cursor: not-allowed; }
.datepicker--sheet .datepicker__day, .datepicker--sheet .datepicker__blank { height: var(--datepicker-cell-h-touch); font-size: var(--datepicker-fs-touch); }
.datepicker--sheet .datepicker__navbtn { width: 2.75rem; height: 2.75rem; }
.datepicker--sheet .datepicker__preset { padding: 0.5rem 1rem; }
.datepicker--sheet .datepicker__input { width: 100%; padding: 0.625rem 0.5rem; font-size: var(--datepicker-fs-touch); }
.datepicker--sheet .datepicker__field { flex: 1 1 0; }
.datepicker--sheet .datepicker__foot { position: sticky; bottom: 0; background: var(--datepicker-surface); }
.datepicker--one .datepicker__input { width: 100%; }
.datepicker--one .datepicker__field { flex: 1 1 0; }

@media (prefers-reduced-motion: no-preference) {
  .datepicker--sheet { animation: datepicker-rise 0.18s ease-out; }
  @keyframes datepicker-rise { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---- Current vs New (an edit of existing dates; tra_datepicker.js `current`) ------------------------------------------------------ */
.datepicker__change { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--datepicker-gap) 0.75rem; background: var(--datepicker-hover); border-radius: var(--datepicker-radius-sm); }
.datepicker__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--datepicker-gap); }
.datepicker__rowcap { flex: 0 0 4rem; font-size: var(--datepicker-fs-sm); color: var(--datepicker-text-muted); }
.datepicker__row--cur .datepicker__rowval { color: var(--datepicker-text-muted); }
.datepicker__row--new .datepicker__rowval { color: var(--datepicker-text); font-weight: var(--datepicker-fw-bold); }
.datepicker__row--new .datepicker__rowval.is-same { color: var(--datepicker-text-muted); font-weight: inherit; }
.datepicker__delta { margin-inline-start: auto; font-size: var(--datepicker-fs-sm); font-weight: var(--datepicker-fw-bold); padding: 0.0625rem 0.5rem; border-radius: var(--datepicker-radius-pill); background: var(--datepicker-range); color: var(--datepicker-text); }
.datepicker__delta:empty { display: none; }
.datepicker__delta.is-more { background: var(--datepicker-range-edge); color: var(--datepicker-on-accent); }
.datepicker__delta.is-less { background: var(--datepicker-warn); color: var(--datepicker-surface); }
.datepicker__delta.is-same { background: transparent; color: var(--datepicker-text-muted); font-weight: inherit; }
.datepicker__input.is-active { border-color: var(--datepicker-accent); box-shadow: 0 0 0 1px var(--datepicker-accent); }
.datepicker__input.is-changed { background: var(--datepicker-range); font-weight: var(--datepicker-fw-bold); }
/* The original stay, outlined (dashed) so it reads apart from the new selection (filled). */
.datepicker__day.is-current::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border: 0 dashed var(--datepicker-text-muted);
  border-block-width: 1px;
}
.datepicker__day.is-current-first::after { border-inline-start-width: 1px; border-start-start-radius: var(--datepicker-radius-sm); border-end-start-radius: var(--datepicker-radius-sm); }
.datepicker__day.is-current-last::after { border-inline-end-width: 1px; border-start-end-radius: var(--datepicker-radius-sm); border-end-end-radius: var(--datepicker-radius-sm); }

/* ---- Combined range field: ONE control, two labelled segments + the night count (templates/shared/_range_field.html; tapechart.js emits
   the same markup for the Block form). Segments open the shared picker; the Current / New lines show under it for an existing stay. ---- */
.datepicker-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; width: 100%; }
.datepicker-field__ctl {
  display: flex; align-items: stretch; flex-wrap: wrap; min-width: 0; box-sizing: border-box; background: var(--datepicker-surface);
  border: 1px solid var(--datepicker-border-strong); border-radius: var(--datepicker-radius-sm); font-family: var(--datepicker-font); font-size: var(--datepicker-fs);
}
.datepicker-field__ctl:focus-within { border-color: var(--datepicker-accent); }
.datepicker-field__seg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.0625rem; flex: 1 1 7rem; min-width: 0; padding: 0.375rem 0.625rem; font: inherit; text-align: start;
  color: var(--datepicker-text); background: none; border: 0; cursor: pointer;
}
.datepicker-field__seg:hover:not([aria-disabled="true"]) { background: var(--datepicker-hover); }
.datepicker-field__seg:focus-visible { outline: 2px solid var(--datepicker-accent); outline-offset: -2px; }
.datepicker-field__seg[aria-expanded="true"] { background: var(--datepicker-range); }
.datepicker-field__seg[aria-disabled="true"] { cursor: default; color: var(--datepicker-text-muted); }
.datepicker-field__cap { font-size: var(--datepicker-fs-sm); color: var(--datepicker-text-muted); }
.datepicker-field__val { font-weight: var(--datepicker-fw-bold); overflow-wrap: anywhere; }
.datepicker-field__arrow { align-self: center; color: var(--datepicker-text-faint); }
.datepicker-field__nights {
  align-self: center; margin: 0.375rem 0.625rem; padding: 0.0625rem 0.5rem; white-space: nowrap; font-size: var(--datepicker-fs-sm); font-weight: var(--datepicker-fw-bold);
  color: var(--datepicker-text); background: var(--datepicker-range); border-radius: var(--datepicker-radius-pill);
}
.datepicker-field__change { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--datepicker-fs-sm); color: var(--datepicker-text-muted); }
.datepicker-field__change .is-new { color: var(--datepicker-text); font-weight: var(--datepicker-fw-bold); }
.datepicker-field__change .is-same { font-weight: inherit; color: var(--datepicker-text-muted); }
.datepicker-field__change .datepicker__delta { margin-inline-start: 0.375rem; }