/* ============================================================================
   AXT : THE DATE RANGE PICKER, ALL OF ITS STYLE. Linked AFTER assets/axt.css
   by every page that mounts it:
     <link rel="stylesheet" href="assets/axt.css">
     <link rel="stylesheet" href="assets/calendar.css">

   It goes with assets/calendar.js, which BUILDS the markup below. A host page
   owns a mount point and nothing else, and nothing here may be overridden in
   a page <style>: two calendars that disagree about what a night looks like
   is exactly what this file exists to stop.

   IT TAKES ITS COLOURS FROM THE BAND IT SITS IN. The picker is mounted inside
   a strip that is dark on the buy side and light on the rent side, so not one
   colour below is written out: they all come from the tokens the host band
   already declares (--c-fg, --c-dim, --c-line, --c-line-2, --c-card,
   --c-card-on, --c-btn-bg, --c-btn-fg), and every var() carries a fallback so
   the file still renders when it is opened on its own. Add a token, never a
   raw colour.

   RED IS NOT IN THIS FILE, AND MUST NOT ENTER IT. Red is the one call to
   action of a screen. A calendar is not a call to action, it is a choice: the
   chosen range is INK (--c-btn-bg on --c-btn-fg), the same ink as a primary
   button, and that is the whole point. If a range ever needs to shout, the
   host band changes its ink, not this file.

   THE BAND IS PAINTED, NOT GROWN. The selected range is three background
   layers on the CELLS: half a cell at the arrival, whole cells in between,
   half a cell at the departure. The two round ends are the day buttons
   themselves, which are stadiums exactly as tall as the row. Nothing here
   animates a width, a height, a padding or a margin, ever: hover and
   selection change a colour and an opacity, a month change fades. That rule
   is what keeps a range that spans a row, a month or a scrollbar from
   leaving a stray pixel behind.

   Contract of the markup, in the order calendar.js writes it:
     .axt-cal                         (+ .axt-cal--pre while a range is previewed)
       .axt-cal-head  > button.axt-cal-nav.axt-cal-nav--prev > .axt-cal-gl
                      + .axt-cal-mon
                      + button.axt-cal-nav.axt-cal-nav--next > .axt-cal-gl
       table.axt-cal-grid
         thead > tr.axt-cal-week > th.axt-cal-dow x7
         tbody.axt-cal-body      > tr.axt-cal-week x6
                                     > td.axt-cal-c[--pad|--start|--band|--end]
                                         > button.axt-cal-d[--on|--pre|--today]
       p.axt-cal-state (+ .axt-cal-state--set)
============================================================================ */

/* ---------------------------------------------------------------- tokens */
/* --c-card-on is the fallback band because it is the one token that is a
   readable surface in BOTH worlds (#191b1c on the dark band, #f4f4f4 on the
   light one). Where color-mix is understood we do better and derive the two
   band tints from --c-fg itself, so a host that changes its ink gets a band
   that follows it, and the tint stays translucent over a photograph. */
.axt-cal{
  --axt-cal-cell:38px;
  --axt-cal-band:var(--c-card-on,#ececec);
  --axt-cal-pre:var(--c-card-on,#ececec);
  --axt-cal-pre-fg: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}
@supports (background:color-mix(in srgb,#000 10%,transparent)){
  .axt-cal{
    --axt-cal-band:color-mix(in srgb,var(--c-fg,#131313) 13%,transparent);
    --axt-cal-pre:color-mix(in srgb,var(--c-fg,#131313) 7%,transparent)}
}
/* one flag on the root swaps the band 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:6px;margin-bottom:8px}
.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)}
.axt-cal-nav{flex:0 0 auto;width:32px;height:32px;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;border-radius:999px;
  background-color:transparent;color:var(--c-fg,#131313);
  box-shadow:inset 0 0 0 1px var(--c-line,rgb(0 0 0 / .16));
  transition:background-color var(--axt-cal-t) var(--axt-cal-ease),
             opacity var(--axt-cal-t) var(--axt-cal-ease)}
.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 0 is structural, not cosmetic: the cells of a range have to
   touch or the band shows a seam every seven days */
.axt-cal-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
  user-select:none;-webkit-user-select:none}
.axt-cal-dow{padding:0 0 6px;text-align:center;
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;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 (September 2026 fills five) ends on a row of empty
   cells, and an empty row is a row of zero height. Measured on 22 August
   2026: the panel lost 38px between August and September, 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;
  background-repeat:no-repeat}
.axt-cal-c--pad{background:none}
.axt-cal-c--band{background-color:var(--axt-cal-band)}
/* the hard stop at 50% is the whole trick: the band leaves the arrival at the
   middle of its cell and enters the departure the same way, so the round ends
   of the two ink stadiums sit ON the band instead of next to it */
.axt-cal-c--start{background-image:linear-gradient(to right,
  rgb(0 0 0 / 0) 50%,var(--axt-cal-band) 50%)}
.axt-cal-c--end{background-image:linear-gradient(to right,
  var(--axt-cal-band) 50%,rgb(0 0 0 / 0) 50%)}
/* the AR side of the house reverses the row, so the two halves swap with it */
[dir="rtl"] .axt-cal-c--start{background-image:linear-gradient(to left,
  rgb(0 0 0 / 0) 50%,var(--axt-cal-band) 50%)}
[dir="rtl"] .axt-cal-c--end{background-image:linear-gradient(to left,
  var(--axt-cal-band) 50%,rgb(0 0 0 / 0) 50%)}

/* --------------------------------------------------------------- the day */
/* the button fills its cell and border-radius 999px is clamped by the browser
   to half the height, so a day is a stadium exactly as tall as the band and
   the two shapes meet without a step */
.axt-cal-d{display:block;width:100%;height:var(--axt-cal-cell);margin:0;padding:0;
  border:0;border-radius:999px;cursor:pointer;
  background-color:transparent;color:var(--c-fg,#131313);
  font-size:.875rem;font-weight:500;line-height:1;
  transition:background-color var(--axt-cal-t) var(--axt-cal-ease),
             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 looking picked long after the finger has gone */
@media (hover:hover) and (pointer:fine){
  .axt-cal-d:hover{background-color:var(--axt-cal-pre)}
}
/* 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% 82%,
  currentColor 0 2px,rgb(0 0 0 / 0) 2px)}
.axt-cal .axt-cal-d--pre{background-color:var(--axt-cal-pre-fg)}
.axt-cal .axt-cal-d--on{background-color:var(--c-btn-bg,#131313);
  color:var(--c-btn-fg,#ffffff);font-weight:600}
/* a night someone else sleeps: struck through, in the ink 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)}
/* last, so they win over hover at equal weight: out of the window, 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;background-color:transparent}
.axt-cal-d:disabled{opacity:.28;cursor:default;background-color:transparent}
/* inset, because the cells touch: an outset ring would sit on the neighbour */
.axt-cal-d:focus-visible{outline:2px solid var(--c-fg,#131313);outline-offset:-3px}
.axt-cal-nav:focus-visible{outline:2px solid var(--c-fg,#131313);outline-offset:2px}

/* -------------------------------------------------------------- the line */
/* 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. The grid
   is six rows tall whatever the month holds, so paging never moves a pixel of
   layout and this animation has nothing to fight with. */
@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. 42px 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:42px}
  .axt-cal-d{font-size:.9375rem}
  .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-fade{animation:none}
}