/* THE HUMAN CHECK ON SIGN-IN (Cloudflare Turnstile). Drawn only when /api/signin asks for it - see
 * signin.js - so on an ordinary visit none of this matches anything.
 *
 * IN ITS OWN FILE, NOT app.css. Three pages load app.css and every change to it means bumping ?v= on
 * all three; only the sign-in page needs these few rules.
 */

/* [hidden] LOSES TO ANY RULE THAT SETS display. That is what left an OFF booking's progress rail on
 * screen (.timeline{display:flex} beat the attribute), so it is restated here instead of trusted:
 * without this line the box would sit on the page, empty, the moment it was given a display. */
.human[hidden] { display: none; }

/* THE WIDGET IS 300px WIDE. The card leaves 310px of content at a 390px screen and 280px at 360px, so
 * the box reaches 12px into the card's 24px side padding on each side. Below 300px signin.js asks for
 * Cloudflare's compact widget (150px) instead, rather than one that pokes out of the card and scrolls
 * the page sideways. */
.human { margin: 18px -12px 0; }

/* Room for the widget before it has drawn, so the button does not jump when it does. */
.human-box {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* The box is a place for focus to LAND (tabindex -1), so it shows the ring for a keyboard user and
 * stays plain for a mouse. The gold is the same one the inputs use. */
.human-box:focus { outline: none; }
.human-box:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }