/* calendar.css - THE month grid: the day-of-week row, the seven-column grid and one
   day cell with its states. Worn by the booking wizard (pages/index.css) and the
   console's Calendar (admin/admin.css), which each used to carry the same twenty
   rules; a page keeps only what it genuinely does differently (the console's booking
   dots, the wizard's roving tab stop). Load order: after components.css, before the
   page sheet. Depends on tokens.css. */

.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}
/* --ink-dim reads at 4.1:1 on the panel - under the 4.5:1 floor, and it looked it.
   --ink-soft clears it with room while staying clearly below the numbers' --ink. */
.cal-dow span{text-align:center;font-size:.64rem;color:var(--ink-soft);letter-spacing:.06em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
/* The digit is centred by the flex box and by nothing else; anything laid over a day
   (the console's booking dots) is out of the flow, over the cell's bottom edge. */
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;border-radius:var(--radius-sm);color:var(--ink);border:1px solid transparent;
  transition:all .15s;position:relative}
/* A day that can be chosen lights on hover; a disabled day (`.dis`), an out-of-month
   day (`.off`), the selected day and a leading blank never do. */
.cal-cell.day{cursor:pointer}
@media(hover:hover) and (pointer:fine){
  .cal-cell.day:hover:not(.sel):not(.dis):not(.empty){border-color:var(--line);background:rgba(201,165,88,.06)}}
.cal-cell.day:active:not(.sel):not(.dis):not(.empty){border-color:var(--line);background:rgba(201,165,88,.06)}
.cal-cell.dis{color:var(--ink-dim);opacity:.35;cursor:default}
.cal-cell.off{color:var(--ink-dim);opacity:.32;cursor:default}
.cal-cell.past{color:var(--ink-dim);opacity:.4;cursor:pointer}
.cal-cell.sel{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:500}
/* A leading blank only offsets the first day into its column - it is not a day and
   must never light up. The pointer cannot reach it at all. */
.cal-cell.empty{cursor:default;pointer-events:none;border-color:transparent;background:none}
.cal-cell:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* US federal holidays, from the same generated directory both calendars read
   (shared/us-holidays.js). Presentation only: a THIN inset ring rather than a border
   (the border belongs to the hover and selected states, and a holiday must not argue
   with either); inside a selected, gold-filled cell the ring flips to the page ink. */
.cal-cell.hol{box-shadow:inset 0 0 0 1px rgba(201,165,88,.55)}
.cal-cell.hol.sel{box-shadow:inset 0 0 0 1px rgba(15,14,12,.45)}
/* Name on hover, above the day. Pure CSS from the cell's own data attribute, and
   pointer-events:none so it can never swallow a click or a tap. No hover on touch, so
   the tooltip never appears there; the name rides the slot panel's heading instead. */
.cal-cell[data-holiday]::after{
  content:attr(data-holiday);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%) translateY(2px);z-index:5;pointer-events:none;
  padding:5px 9px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);color:var(--ink);white-space:nowrap;
  font-size:.7rem;letter-spacing:.02em;line-height:1;
  opacity:0;transition:opacity 150ms var(--ease),transform 150ms var(--ease)}
@media(hover:hover) and (pointer:fine){
  .cal-cell[data-holiday]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
}
@media(prefers-reduced-motion:reduce){.cal-cell[data-holiday]::after{transition:none}}