/* States the panel never had, because it had no backend.

   The panel's own look is defined in each page's <style> block and is
   untouched here. What this sheet adds is the four things a real booking
   goes through that a mailto link does not: waiting for availability,
   having none to offer, being submitted, and being confirmed.

   Same rules as the pages: every weight is 400, every size is a clamp(),
   hierarchy comes from size and colour. */

/* A sentence in place of the calendar: loading, or nothing on offer. */
.bk-msg{display:grid;align-content:center;gap:clamp(9px,.9vw,15px);
  min-height:clamp(150px,14vw,220px)}
.bk-msg p{font-size:clamp(13px,.98vw,16px);color:var(--fg-dim);line-height:1.5;max-width:34ch}
.bk-msg a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,0,0,.32);transition:text-decoration-color .3s}
.bk-msg a:hover{text-decoration-color:var(--fg)}

/* The chosen time, read back above the button so nobody sends a request
   without seeing what they picked. */
.bk-chosen{font-size:clamp(12px,.92vw,15px);color:var(--fg-dim)}
.bk-chosen b{color:var(--fg);letter-spacing:-.01em}
.bk-chosen[hidden]{display:none}

/* Confirmation. The grid drops to one column: there is no calendar left to
   sit beside. */
.bk-grid.done{grid-template-columns:1fr}
.bk-done{display:grid;gap:clamp(11px,1.1vw,18px);max-width:46ch;
  padding:clamp(6px,1vw,18px) 0}
.bk-done p{font-size:clamp(14px,1.02vw,17px);color:var(--fg-dim);line-height:1.5}
.bk-done b{color:var(--fg);letter-spacing:-.01em}
.bk-done a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,0,0,.32);transition:text-decoration-color .3s}
.bk-done a:hover{text-decoration-color:var(--fg)}
.bk-done .bk-send{margin-top:clamp(5px,.6vw,10px)}

/* A tick, drawn rather than set: no icon font, no emoji. */
.bk-tick{width:clamp(30px,2.6vw,42px);height:clamp(30px,2.6vw,42px);border-radius:999px;
  border:1px solid rgba(14,124,86,.38);background:rgba(14,124,86,.07);
  display:grid;place-items:center}
.bk-tick svg{width:46%;height:46%;fill:none;stroke:var(--live);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* The sign-in panel's note, when the platform answers rather than the page. */
.pt-note.pending{color:var(--fg-dim)}