/* calendar — the month calendar.js draws: its head and arrows, the days, a fixed term's buttons; one day
   (data-mode single) or a stretch (range: a band between the ends, taken days struck through); the key under it. */

.cal { max-width: 22rem; margin: 1rem 0 1.4rem; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }

.cal-title { font-weight: 600; color: var(--ink); text-transform: capitalize; }

.cal-nav {
  width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--bg); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer;
}

.cal-nav { display: grid; place-items: center; padding: 0; }

.cal-nav svg { width: 1.1rem; height: 1.1rem; }

.cal-nav:hover:not(:disabled) { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }

.cal-nav:disabled { opacity: .35; cursor: default; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }

.cal-dow { font-size: .72rem; text-align: center; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: .2rem 0; }

.cal-day {
  aspect-ratio: 1; border: 1.5px solid transparent; border-radius: var(--radius-small);
  background: var(--bg); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}

.cal-day:hover:not(:disabled) { border-color: var(--mark, var(--primary)); }

.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--line); }

.cal-day.is-past { color: var(--muted); opacity: .45; cursor: default; }

/* A taken night, a day booked full — struck through, so «greyed» does not read as «in the past». */
.cal-day.is-busy,
.cal-day.is-full { color: var(--muted); opacity: .55; text-decoration: line-through; cursor: not-allowed; }

/* Not selectable right now (past the first taken night, short of the minimum
   stay): faded, so what can be clicked is visible before anything is clicked. */
.cal-day:disabled { cursor: default; }

.cal-day:disabled:not(.is-past):not(.is-busy):not(.is-full):not(.is-selected) { opacity: .35; }

.cal-day.is-between { background: color-mix(in srgb, var(--primary) 26%, var(--bg)); color: var(--ink); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

.cal-day.is-selected { background: var(--primary); color: var(--primary-ink); border-color: var(--mark, var(--primary)); }

.cal-day:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Terms under a day-rental calendar: the end in one click from the start. Off
   until a start is picked, and for a term the rules or a taken day rule out. */
.cal-terms { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }

.cal-term {
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}

.cal-term:hover:not(:disabled):not(.is-selected) { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }

.cal-term:disabled { opacity: .35; cursor: default; }

.cal-term.is-selected { background: var(--primary); color: var(--primary-ink); border-color: var(--mark, var(--primary)); }

/* The month: an open day is a tile, a closed one is only a number. */
.cal[data-mode='single'] .cal-day { background: var(--surface); border: 1px solid var(--line); position: relative; }

.cal[data-mode='single'] .cal-day:hover:not(:disabled) { border-color: var(--mark, var(--primary)); }

.cal[data-mode='single'] .cal-day:disabled:not(.is-selected) { background: none; border-color: transparent; color: var(--muted); font-weight: 400; opacity: .5; }

.cal[data-mode='single'] .cal-day.is-today { box-shadow: none; }

.cal[data-mode='single'] .cal-day.is-today::after {
  content: ''; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
}

.cal[data-mode='single'] .cal-day.is-selected { background: var(--ink); color: var(--bg); border-color: var(--ink); opacity: 1; }

.cal[data-mode='single'] .cal-day:focus-visible { outline: 2px solid var(--mark, var(--primary)); }

/* The month for a range: a free day is a tile, a taken one is struck through, one out of reach
   is a faint number; the chosen ends are ink, the days between a band (--range), no gaps. */
.cal[data-mode='range'] .cal-grid { column-gap: 0; row-gap: .25rem; }

.cal[data-mode='range'] .cal-day {
  position: relative; z-index: 0; background: none; border: 0; border-radius: 0; color: var(--ink); opacity: 1;
  font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; box-shadow: none;
}

.cal[data-mode='range'] .cal-day::before {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: var(--radius-small);
  border: 1px solid var(--line); background: var(--surface);
}

.cal[data-mode='range'] .cal-day.is-free:hover::before { border-color: var(--mark, var(--primary)); }

.cal[data-mode='range'] .cal-day.is-busy,
.cal[data-mode='range'] .cal-day.is-off,
.cal[data-mode='range'] .cal-day.is-nope { cursor: default; font-weight: 400; color: var(--muted); }

.cal[data-mode='range'] .cal-day.is-busy { text-decoration: line-through; }

.cal[data-mode='range'] .cal-day.is-off,
.cal[data-mode='range'] .cal-day.is-nope { opacity: .5; }

.cal[data-mode='range'] .cal-day.is-busy::before,
.cal[data-mode='range'] .cal-day.is-off::before,
.cal[data-mode='range'] .cal-day.is-nope::before { display: none; }

.cal[data-mode='range'] .cal-day.is-between,
.cal[data-mode='range'] .cal-day.is-preview { background: var(--range); opacity: 1; color: var(--ink); text-decoration: none; }

.cal[data-mode='range'] .cal-day.is-preview { background: color-mix(in srgb, var(--ink) 8%, var(--surface, #fff)); } /* the band to be, fainter than the chosen one */

.cal[data-mode='range'] .cal-day.is-between::before,
.cal[data-mode='range'] .cal-day.is-preview::before { display: none; }

.cal[data-mode='range'] .cal-day.is-selected { color: var(--bg); opacity: 1; }

.cal[data-mode='range'] .cal-day.is-selected::before { display: block; background: var(--ink); border-color: var(--ink); }

.cal[data-mode='range'] .cal-day.is-start.has-range { background: linear-gradient(to right, transparent 50%, var(--range) 50%); }

.cal[data-mode='range'] .cal-day.is-end:not(.is-start) { background: linear-gradient(to left, transparent 50%, var(--range) 50%); }

.cal[data-mode='range'] .cal-day.is-today::after {
  content: ''; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}

.cal[data-mode='range'] .cal-day:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }

.cal[data-mode='range'] .cal-term.is-selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.cal[data-mode='range'] .cal-term:disabled { opacity: .4; }

.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.3rem; margin: .3rem 0 .7rem; font-size: .82rem; line-height: 1; color: var(--muted); }

.cal-legend span { display: inline-flex; align-items: center; gap: .5rem; }

.cal-legend span::before { content: ''; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 5px; box-sizing: border-box; }

/* The free tile's own frame is faint on a dark surface; at legend size it needs the muted ink to show. */
.cal-legend__free::before { border: 1px solid color-mix(in srgb, var(--muted) 70%, transparent); background: var(--surface); }

.cal-legend__busy::before {
  content: '15' !important; display: grid; place-items: center; width: auto !important; height: 1.2rem;
  text-decoration: line-through; font-size: 1.05rem; font-weight: 600; color: var(--muted);
}

.cal-legend__picked::before { background: var(--ink); }