/* ==========================================================================
   Meet Rashan — the booking page's additive states (Task 9).

   kiln.css is the locked mock's stylesheet, copied verbatim from
   design/directions-v2/01-kiln/index.html; nothing in it is edited here. This
   file adds only what a wired page needs and the mock (which never failed a
   fetch) did not have:

     .alert          an error a visitor is allowed to read, with an optional
                     "try again" control — the mock had no failure state at all
     .loading        the caption on the 14-day rail while one availability read
                     is in flight
     .joinline       the Join button in the done state, which is an <a>, not a
                     <button>, because it leaves the page

   Same language as the contract: 4px scale, 2px --ink structure, squared, no
   radius, --err for errors, minimum 40px controls (44px at <=620px).
   ========================================================================== */

.alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-5) 0 0;
  padding: 14px var(--sp-4);
  border: 2px solid var(--err);
  background: #fdeeee;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  text-wrap: pretty;
}
[data-theme="dark"] .alert {
  background: #402228;
}
/* No `.alert .reset` here any more: `.reset` is styled once, globally, in
   kiln.css. It was written scoped to one call site, which is why every other
   `.reset` in the product fell back to browser chrome (round 4). */

/* the rail's one in-flight caption; it sits on the railhead line, opposite the
   heading, and never changes the grid's height */
.loading {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink3);
}

.joinline {
  margin: var(--sp-6) 0 0;
}

/* A busy button's label changes AND its hover style stops applying at the same
   moment. Letting the 120ms colour transition play through that swap drops the
   label's contrast mid-fade; a control that is saying "wait" should not shimmer
   while it says it. Static is clearer here. */
.btn[aria-busy="true"] {
  transition: none;
}

/* the cancel page is one sheet, so its wrap is one column wide (kiln.css's .wrap
   is the booking page's stage width) */
.wrap.narrow {
  max-width: 560px;
}
/* an <a> wearing .btn: same control, no underline, and the same colour swap the
   buttons get on hover */
a.btn {
  display: inline-block;
  text-decoration: none;
}
a.btn:hover {
  background: var(--card);
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--pop-sm);
}
a.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.legend i.gap {
  background: transparent;
  border-style: dashed;
  border-color: var(--ink3);
}

@media (max-width: 620px) {
  /* touch context: the 40px desktop floor becomes the 44px touch target */
  .joinline .btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a.btn {
    transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease),
      background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }
}