/* The day calendar, shared by the public booking page and the operator's
   "Take a booking" screen.

   Every colour is a CSS variable, never a literal. The two pages define their
   own palettes (book.html has its own; the dashboard uses shell.css) and both
   have a dark mode. Hardcoding light greys here once made the month arrows
   invisible on a dark background -- a control that is present and cannot be
   seen, which is worse than one that is absent. */

.cal { margin-bottom:18px; }

.cal-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cal-head .m { font-weight:600; flex:1; }

.cal-nav {
  background:var(--card, var(--surface));
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  width:34px; height:34px;
  cursor:pointer; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.cal-nav:hover:not(:disabled) { border-color:var(--accent); }
.cal-nav:disabled { opacity:.35; cursor:default; }

/* The row gap is larger than the column gap on purpose: the run bar crosses
   the COLUMN gaps to look continuous, so those want to be tight, while weeks
   still need to read as separate rows. */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px 4px; }
.cal-dow {
  text-align:center; font-size:11.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; padding-bottom:4px;
}

.cal-day {
  position:relative;
  aspect-ratio:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  border-radius:9px; font-size:14px;
  border:1px solid transparent; color:var(--muted);
}
.cal-day .cal-num { line-height:1.1; }

.cal-day.has {
  background:color-mix(in srgb, var(--accent) 12%, var(--card, var(--surface)));
  border-color:color-mix(in srgb, var(--accent) 35%, var(--card, var(--surface)));
  color:var(--ink); cursor:pointer; font-weight:600;
}
.cal-day.has:hover { border-color:var(--accent); }

/* ====================== MULTI-DAY RUNS ====================== */

/* A continuation day -- day two onward of a course that has not been picked.
   It is NOT a separate offer, so it loses the tint and the border that say
   "here is something you can choose". It stays clickable, because clicking it
   selects the run, and it keeps normal ink so it does not read as disabled. */
.cal-day.run-cont:not(.on) {
  background:transparent;
  border-color:transparent;
  color:var(--ink);
  font-weight:500;
}
.cal-day.run-cont:not(.on):hover {
  background:color-mix(in srgb, var(--accent) 7%, var(--card, var(--surface)));
  border-color:color-mix(in srgb, var(--accent) 22%, var(--card, var(--surface)));
}

/* The bar that ties a run together. It sits under the number and reaches into
   the 4px column gaps (the -3px) so that across three squares it reads as one
   continuous line rather than three dashes. */
.cal-day.run::after {
  content:'';
  position:absolute;
  left:-3px; right:-3px; bottom:5px;
  height:3px;
  background:color-mix(in srgb, var(--accent) 55%, var(--card, var(--surface)));
  pointer-events:none;
}

/* INSET AT BOTH ENDS. The bar starts partway into the first day and stops
   partway into the last, the way a calendar draws an event that begins on one
   morning and ends on another evening: a gap before it starts, a gap after it
   finishes. Edge to edge would imply the course carries on past the days it
   actually occupies. */
.cal-day.run-start::after { left:30%;  border-radius:2px 0 0 2px; }
.cal-day.run-end::after   { right:30%; border-radius:0 2px 2px 0; }
.cal-day.run-start.run-end::after { border-radius:2px; }

/* A grid row is a week. A bar that ran off the right edge and reappeared on
   the left would read as a second, separate run, so it stops at Saturday and
   restarts on Sunday -- square ends, because it is a cut, not a finish. */
.cal-day.run.week-start:not(.run-start)::after { left:0;  border-radius:0; }
.cal-day.run.week-end:not(.run-end)::after     { right:0; border-radius:0; }

/* ====================== THE CHOSEN RUN ====================== */

.cal-day.on {
  background:color-mix(in srgb, var(--accent) 38%, var(--card, var(--surface)));
  border-color:color-mix(in srgb, var(--accent) 55%, var(--card, var(--surface)));
  color:var(--ink);
  font-weight:600;
}
/* Day one: the day you actually turn up on. Full strength. */
.cal-day.on.first {
  background:var(--accent);
  color:var(--accent-ink, #fff);
  border-color:var(--accent);
}
.cal-day.on.run::after { background:var(--accent); }

/* "Day 1", "Day 2", "Day 3" under the number. This is the thing three
   identical squares could not say: which one to turn up on, and in what
   order. */
.cal-day .cal-dn {
  font-size:8.5px; line-height:1; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
  opacity:.75;
  margin-bottom:5px;
}
.cal-day.on.first .cal-dn { opacity:.9; }

/* Small squares cannot hold "Day 2" under a date. Below this width the
   ordinal goes and the bar carries the meaning on its own. */
@media (max-width:360px) {
  .cal-day .cal-dn { display:none; }
  .cal-day { gap:0; }
}

/* Optional word under the number (renderDayCalendar dayNote): "2 left",
   "full", "2 times". Quiet by default; full is the warning colour. */
.cal-day .cal-note {
  font-size:9.5px; line-height:1; font-weight:600; opacity:.8; margin-bottom:4px;
  white-space:nowrap;
}
.cal-day .cal-note.full { color:var(--warn); opacity:1; }
.cal-day .cal-note.low  { color:var(--warn); }
.cal-day.on .cal-note { color:inherit; }
/* A free day an operator can add a date on (onPickEmpty). Quiet until
   hovered, then a "+" says what a click does. */
.cal-day.empty { cursor:pointer; color:var(--ink); }
.cal-day.empty:hover, .cal-day.empty:focus-visible {
  border:1px dashed var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.cal-day.empty:hover::before, .cal-day.empty:focus-visible::before {
  content:'+'; position:absolute; top:3px; right:6px; font-size:12px; font-weight:700; color:var(--accent);
}
.cal-day.empty.picked { border:1px dashed var(--accent); outline:2px solid var(--accent); outline-offset:1px; }
.cal-day.empty.picked::after { content:'new'; position:absolute; bottom:4px; font-size:9px; font-weight:700;
  color:var(--accent); text-transform:uppercase; letter-spacing:.03em; }
/* A date picked that holds several departures: outlined until one is chosen. */
.cal-day.picked { outline:2px solid var(--accent); outline-offset:1px; }
@media (max-width:360px) { .cal-day .cal-note { display:none; } }

.cal-legend { margin-top:10px; font-size:13px; color:var(--muted); }
.cal-legend .cal-daylist {
  font-weight:700; color:var(--ink); font-size:11px;
  text-transform:uppercase; letter-spacing:.02em;
}

/* Day one of the CHOSEN run is solid accent, so an accent-coloured bar on it
   is invisible -- which it was, the first time this shipped: days two and
   three were tied together and day one appeared to be a separate square. On
   that one cell the bar inverts to the ink colour instead. */
.cal-day.on.first.run::after {
  background:color-mix(in srgb, var(--accent-ink, #fff) 72%, transparent);
}