/* ============================================================================
   The date range picker, all of its style. It goes with assets/calendar.js,
   which builds the markup, and a host talks to it through tokens only: the
   colours of the band it sits in (--c-fg, --c-dim, --c-line, --c-line-2,
   --c-card, --c-card-on, --c-btn-bg, --c-btn-fg) and --cal-cell for the size
   of a day. Every day is a card; the arrival and the departure are ink, the
   nights between them tinted, a booked night struck through. Red never enters
   this file: a calendar is a choice, not the call to action. Nothing here
   animates a size, and the grid keeps six rows whatever the month.
============================================================================ */

/* ---------------------------------------------------------------- tokens */
/* --cal-cell is the host's: the booking sheet sizes the month to the
   height of the screen so the whole panel fits without a scroll. The
   fallback is a comfortable day on a card. */
.axt-cal{
  --axt-cal-cell:var(--cal-cell,42px);
  --axt-cal-gap:3px;
  --axt-cal-r:9px;
  --axt-cal-band:var(--c-card-on,#ececec);
  --axt-cal-pre:var(--c-card-on,#ececec);
  --axt-cal-edge:var(--c-line-2,#d6d6d6);
  --axt-cal-t:var(--t-fast,150ms);
  --axt-cal-ease:var(--ease,cubic-bezier(.4,0,.2,1));
  display:block;max-width:100%;min-width:0;
  color:var(--c-fg,#131313);
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent}
/* where color-mix is understood the two tints are derived from the ink, so a
   host that changes its ink gets a range that follows it */
@supports (background:color-mix(in srgb,#000 10%,transparent)){
  .axt-cal{
    --axt-cal-band:color-mix(in srgb,var(--c-fg,#131313) 9%,transparent);
    --axt-cal-pre:color-mix(in srgb,var(--c-fg,#131313) 5%,transparent);
    --axt-cal-edge:color-mix(in srgb,var(--c-fg,#131313) 32%,transparent)}
}
/* one flag on the root swaps the tint for its lighter twin, so the preview
   and the real thing share one set of cell classes */
.axt-cal--pre{--axt-cal-band:var(--axt-cal-pre)}

/* ------------------------------------------------------------ the header */
.axt-cal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.axt-cal-mon{flex:1 1 auto;min-width:0;text-align:center;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  color:var(--c-fg,#131313)}
/* the arrows: a hairline circle that turns to ink */
.axt-cal-nav{flex:0 0 auto;width:34px;height:34px;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--c-line,#e8e8e8);
  background-color:var(--c-card,#ffffff);color:var(--c-fg,#131313);
  transition:background-color var(--axt-cal-t) var(--axt-cal-ease),
             color var(--axt-cal-t) var(--axt-cal-ease),
             border-color var(--axt-cal-t) var(--axt-cal-ease),
             opacity var(--axt-cal-t) var(--axt-cal-ease)}
.axt-cal-nav:hover:not([aria-disabled="true"]){background-color:var(--c-btn-bg,#131313);
  border-color:var(--c-btn-bg,#131313);color:var(--c-btn-fg,#ffffff)}
.axt-cal-gl{font-size:1rem;line-height:1}
/* the ends of the window keep their button focusable and simply stop
   answering: a control that disappears from the tab order under the finger
   that is using it is a control that loses the keyboard */
.axt-cal-nav[aria-disabled="true"]{opacity:.28;cursor:default}

/* -------------------------------------------------------------- the grid */
/* border-spacing IS the air between two cards: the cells do not touch, and
   nothing is painted on a cell, only on the day button inside it */
.axt-cal-grid{width:100%;table-layout:fixed;border-collapse:separate;
  border-spacing:var(--axt-cal-gap);margin:0 calc(-1 * var(--axt-cal-gap));
  width:calc(100% + 2 * var(--axt-cal-gap));
  user-select:none;-webkit-user-select:none}
.axt-cal-dow{padding:0 0 4px;text-align:center;
  font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-dim,#5c5c5c)}
/* the height is on the CELL and not only on the button: a month whose six
   rows are not all used ends on a row of empty cells, and an empty row is a
   row of zero height, which is a height change, which is the one thing this
   block may never do */
.axt-cal-c{padding:0;height:var(--axt-cal-cell);vertical-align:middle;text-align:center}
.axt-cal-c--pad{background:none}

/* --------------------------------------------------------------- the day */
.axt-cal-d{display:grid;place-items:center;width:100%;height:var(--axt-cal-cell);
  margin:0;padding:0;cursor:pointer;
  border:1px solid var(--c-line,#e8e8e8);border-radius:var(--axt-cal-r);
  background-color:var(--c-card,#ffffff);color:var(--c-fg,#131313);
  font-size:.8125rem;font-weight:600;line-height:1;
  transition:transform .18s var(--axt-cal-ease),
             background-color var(--axt-cal-t) var(--axt-cal-ease),
             color var(--axt-cal-t) var(--axt-cal-ease),
             border-color var(--axt-cal-t) var(--axt-cal-ease),
             opacity var(--axt-cal-t) var(--axt-cal-ease)}
/* hover is asked for, never assumed: a touch screen that fakes it leaves a
   day lifted long after the finger has gone */
@media (hover:hover) and (pointer:fine){
  .axt-cal-d:hover:not(:disabled):not([aria-disabled="true"]){
    transform:translateY(-2px);border-color:var(--axt-cal-edge)}
}
/* the nights between the two ends: tinted, no edge, so the eye reads one
   stay and not a row of buttons */
.axt-cal-c--band .axt-cal-d{background-color:var(--axt-cal-band);border-color:transparent}
/* the day the pointer proposes as a departure */
.axt-cal .axt-cal-d--pre{background-color:var(--axt-cal-band);border-color:var(--c-fg,#131313)}
/* the arrival and the departure: ink, like a primary button */
.axt-cal .axt-cal-d--on{background-color:var(--c-btn-bg,#131313);
  border-color:var(--c-btn-bg,#131313);color:var(--c-btn-fg,#ffffff)}
/* today is a dot drawn in currentColor, so it turns to the ink foreground by
   itself the day it lands inside the range */
.axt-cal-d--today{background-image:radial-gradient(circle at 50% 84%,
  currentColor 0 1.5px,rgb(0 0 0 / 0) 1.5px)}
/* a night someone else sleeps: struck through, on the tint of the band. The
   strike is its own mark, separate from aria-disabled, because a booked day
   is still a legal DEPARTURE day and then keeps its full colour: the strike
   says "the night", the opacity says "the tap" (calendar.js decides which) */
.axt-cal-d--busy{text-decoration:line-through;text-decoration-thickness:1px;
  color:var(--c-dim,#757575);background-color:var(--c-card-on,#f4f4f4);border-color:transparent}
/* last, so they win over hover at equal weight: too close to the arrival to
   make a stay, booked, or not free before it */
.axt-cal-d[aria-disabled="true"]{opacity:.42;cursor:default;transform:none}
/* out of the window (the past, mostly): a number and no card, the way the
   calendar greys what is gone */
.axt-cal-d:disabled{opacity:.4;cursor:default;transform:none;
  border-color:transparent;background-color:transparent;color:var(--c-dim,#757575)}
.axt-cal-d:focus-visible{outline:2px solid var(--c-fg,#131313);outline-offset:1px}
.axt-cal-nav:focus-visible{outline:2px solid var(--c-fg,#131313);outline-offset:2px}

/* -------------------------------------------------------------- the line */
/* only built when the host did not ask for state:false. min-height holds the
   line open while it says two words, so the panel never changes height
   between "Pick your arrival" and a full range */
.axt-cal-state{margin:10px 0 0;font-size:.8125rem;font-weight:500;line-height:1.4;
  min-height:1.4em;color:var(--c-dim,#5c5c5c);
  transition:color var(--axt-cal-t) var(--axt-cal-ease)}
.axt-cal-state--set{color:var(--c-fg,#131313);font-weight:600}

/* ------------------------------------------------------------- the month */
/* a month change fades, and fades ONLY the opacity of the six rows */
@keyframes axt-cal-in{from{opacity:0}to{opacity:1}}
.axt-cal-fade{animation:axt-cal-in 170ms var(--axt-cal-ease) both}

/* ------------------------------------------------------------- the touch */
/* the viewport, not a container query: the picker has no wrapper of its own
   to measure against, and the panel it lives in is a phone width below this
   breakpoint anyway. 44px of height plus a seventh of the panel of width is
   comfortably past the 40px target. */
@media (max-width:520px){
  .axt-cal{--axt-cal-cell:var(--cal-cell,44px)}
  .axt-cal-d{font-size:.875rem}
  .axt-cal-nav{width:36px;height:36px}
}

/* --------------------------------------------------------- asked for calm */
/* last in the file so it wins on order alone, without !important */
@media (prefers-reduced-motion:reduce){
  .axt-cal-nav,.axt-cal-d,.axt-cal-state{transition:none}
  .axt-cal-d:hover{transform:none}
  .axt-cal-fade{animation:none}
}