/* Copied from kit/calendar.css by scripts/kit-sync.mjs. Do not edit here —
   edit kit/calendar.css and run: node scripts/kit-sync.mjs */
/* Reusable month calendar (calendar.js). Product-agnostic: only the sc-/hair/
   paper variables that booking.css also relies on. Prefixed cal- throughout
   so it can sit next to booking.css without clashing. */
.cal { display: grid; gap: .6rem; }
.cal-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cal-title { font: 600 .9rem/1.2 var(--sc-font-text); color: var(--sc-ink); }
.cal-nav {
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 999px;
  background: transparent; border: 1px solid var(--hair); color: var(--sc-ink); cursor: pointer;
  font: 500 1rem/1 var(--sc-font-text); transition: background-color 140ms, border-color 140ms;
}
.cal-nav:disabled { opacity: .3; pointer-events: none; }
@media (hover: hover) { .cal-nav:not(:disabled):hover { border-color: var(--sc-ink); } }

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: .4rem; }
.cal-dow span { text-align: center; font: 500 .68rem/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }

.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: .15rem; }
.cal-cell {
  aspect-ratio: 1; display: grid; place-items: center; font: 500 .82rem/1 var(--sc-font-text);
  font-variant-numeric: tabular-nums; border-radius: 999px;
}
.cal-cell--pad { visibility: hidden; }
.cal-cell--off { color: var(--sc-ink-soft); opacity: .35; }
.cal-cell--today { text-decoration: underline; text-underline-offset: .2em; opacity: .55; }
.cal-day {
  background: transparent; border: 1px solid transparent; color: var(--sc-ink); cursor: pointer;
  transition: background-color 140ms, border-color 140ms, color 140ms;
}
.cal-day--today { border-color: var(--hair); }
.cal-day[aria-pressed="true"] { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--paper); }
@media (hover: hover) { .cal-day:not([aria-pressed="true"]):hover { border-color: var(--sc-ink); } }
.cal-day:focus-visible, .cal-nav:focus-visible, .cal-time:focus-visible, .cal-back:focus-visible {
  outline: 2px solid var(--sc-ink); outline-offset: 2px;
}

.cal-times-wrap { display: grid; gap: .5rem; align-content: start; }
.cal-times-h { margin: 0; font: 500 .82rem/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.cal-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .5rem; }
.cal-time {
  padding: .7rem .5rem; background: transparent; border: 1px solid var(--hair); border-radius: 999px; cursor: pointer;
  font: 500 .95rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; color: var(--sc-ink);
  transition: background-color 140ms, border-color 140ms;
}
.cal-time[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; }
@media (hover: hover) { .cal-time:not([aria-pressed="true"]):hover { border-color: var(--sc-ink); } }

.cal-back {
  justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font: 500 .85rem/1.2 var(--sc-font-text);
  color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: .25em;
}
.cal-back:hover { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }

/* narrow: month and times are two stages, never both — this keeps the
   picker inside the pinned one-screen #trial stage. */
.cal--narrow .cal-row { display: block; }
.cal--narrow .cal-cell { font-size: .8rem; }

@media (max-width: 860px) {
  .cal-row { grid-template-columns: 1fr; }
}

/* Short phones: a square cell is ~46px wide on a 360px screen, which made six
   week rows push Continue below the one-screen #trial stage. Fixed-height
   rows keep the month well inside it. */
.cal--narrow .cal-cell { aspect-ratio: auto; height: 2.35rem; }
@media (max-height: 700px) { .cal--narrow .cal-cell { height: 2.1rem; } }