/* Availability widget — prototype. Palette is the existing one; no new brand
   colours were invented for it, because the point of showing it to the client
   is the idea, not a recolour.

   Every state is carried by shape as well as colour — a dot under departing
   days, a hatch across closed ones — so it survives being printed, being looked
   at by someone colour-blind, and being screenshotted into an email. Colour
   alone would fail all three. */

.avail {
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: #fff;
  padding: 26px;
  margin: 0 0 30px;
  box-shadow: 0 30px 60px -40px var(--shaddow);
}

.avail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.avail-head .tour-subheading { margin: 0; }

.avail-nav { display: flex; gap: 6px; }
.avail-step {
  width: 32px; height: 32px;
  border: 1px solid var(--dark-outline);
  border-radius: var(--radius);
  background: #fff;
  color: var(--black);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.avail-step:hover:not(:disabled) { border-color: var(--royal-blue); color: var(--royal-blue); }
.avail-step:disabled { opacity: .35; cursor: default; }

.avail-cal { width: 100%; border-collapse: collapse; }
.avail-caption {
  caption-side: top;
  text-align: left;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  color: var(--body-display);
  padding-bottom: 10px;
}
.avail-cal th {
  font-size: 11px; font-weight: 500; letter-spacing: 1px;
  color: var(--body-display);
  padding-bottom: 8px;
}
.avail-cal th abbr { text-decoration: none; border: 0; }
.avail-cell { padding: 2px; text-align: center; }

.avail-day {
  display: block;
  width: 100%;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font: inherit; font-size: 14px;
  color: var(--body-display);
  line-height: 36px;
  position: relative;
}

/* Departing — the only cells that do anything, so the only ones that look
   pressable. The dot is what makes the state readable without colour. */
.is-departing .avail-day {
  border-color: var(--dark-outline);
  background: var(--grey-background);
  color: var(--black);
  font-weight: 600;
  cursor: pointer;
}
.is-departing .avail-day::after {
  content: '';
  position: absolute; left: 50%; bottom: 5px;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: var(--royal-blue);
}
.is-departing .avail-day:hover { border-color: var(--royal-blue); background: #fff; }
.avail-day:focus-visible { outline: 2px solid var(--royal-blue); outline-offset: 2px; }

.is-selected .avail-day,
.is-selected .avail-day:hover {
  background: var(--royal-blue);
  border-color: var(--royal-blue);
  color: #fff;
}
.is-selected .avail-day::after { background: #fff; }

.is-none .avail-day { color: var(--body-display); opacity: .5; }

/* Closed — hatched, not just tinted, and struck through. This is the state a
   visitor most needs to not misread. */
.is-closed .avail-day {
  color: var(--teal);
  text-decoration: line-through;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 3px,
    rgba(160, 134, 116, .28) 3px 5px
  );
}

.is-past .avail-day { opacity: .22; }
.is-blank { padding: 0; }

.avail-key {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 13px;
  color: var(--body-display);
}
.avail-key li { display: flex; align-items: center; gap: 8px; }
.avail-swatch {
  width: 18px; height: 18px;
  border: 1px solid var(--dark-outline);
  border-radius: var(--radius);
  position: relative;
  flex: none;
}
.avail-key .is-departing .avail-swatch { background: var(--grey-background); }
.avail-key .is-departing .avail-swatch::after {
  content: '';
  position: absolute; left: 50%; bottom: 3px;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--royal-blue);
}
.avail-key .is-none .avail-swatch { border-style: dashed; opacity: .6; }
.avail-key .is-closed .avail-swatch {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 3px,
    rgba(160, 134, 116, .28) 3px 5px
  );
}

.avail-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--body-display);
}
.avail-note.is-live { color: var(--black); font-weight: 500; }

.avail-request p { margin: 0; }

@media (max-width: 560px) {
  .avail { padding: 20px; }
  .avail-day { min-height: 34px; line-height: 32px; font-size: 13px; }
}

/* Departing but full. It looks like a departure because it is one — the visitor
   should still see the tour runs that day — but it is not pressable, because
   picking it would put a date in the enquiry we cannot honour. */
.is-full .avail-day {
  border-color: var(--dark-outline);
  background: var(--grey-background);
  color: var(--body-display);
  cursor: default;
}
.is-full .avail-day::after {
  content: '';
  position: absolute; left: 50%; bottom: 5px;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: var(--teal);
}
.avail-key .is-full .avail-swatch { background: var(--grey-background); }
.avail-key .is-full .avail-swatch::after {
  content: '';
  position: absolute; left: 50%; bottom: 3px;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--teal);
}

/* Shown only while the dates are invented. It removes itself the moment a real
   calendar answers — which is the point: nobody should be able to look at this
   widget and not know which it is. */
.avail-provenance {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  font-size: 13px;
  font-style: italic;
  color: var(--body-display);
}

/* ---------------- seats left ----------------

   The number of seats still available, shown only on days the operator wrote a
   party size for — server/availability.mjs withholds the count rather than
   guessing it, so a departing cell with no digit means "unknown", not "empty".

   Top-right rather than under the day number: the departing dot already owns
   the bottom of the cell, and it has to stay. The dot is what makes the state
   readable without colour, and the digit cannot do that job — a visitor who
   cannot see the blue would have no way to tell 3-seats-left from the 3rd of
   the month. */
.avail-seats {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--royal-blue);
}
.is-selected .avail-seats { color: #fff; }

.avail-key .is-seats .avail-swatch { background: var(--grey-background); }
.avail-key .is-seats .avail-swatch::after {
  content: '3';
  position: absolute; top: 1px; right: 2px;
  font-size: 9px; font-weight: 700; line-height: 1;
  color: var(--royal-blue);
}

@media (max-width: 600px) {
  .avail-seats { font-size: 9px; top: 1px; right: 3px; }
}