/* THE WAITING CARD (static/cards/card-below.js, which links this file once).
   THE TAP IS INSTANT (Steven 2026-10-18: "When a person taps a button
   things should be instant. It shouldn't wait on this site. It's too
   confusing if you're waiting for something."): a card opened below goes
   into the deck on the tap itself, and until its page lands its slide holds
   this quiet card, the size every card on the deck is (home-cards.css
   .hc-slide > .tb-card: the screen under 900px, 9:16 from 900px), in the
   card's corner and the night the opened cards wear (the Agents card, a
   workspace and an agent's card are all dark: a light wait flashed light
   then black), breathing softly like the ready sheet's wait
   (css/pages/visitor-deck.css .ready-sheet__wait). No spinner, no words. Its
   one control is Back, top left, where the card's own Back will be. */
.hc-slide > .card-below-wait {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-hero);
    background: var(--color-dark-900);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
@media (min-width: 900px) {
    .hc-slide > .card-below-wait { width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
}
.card-below-wait__back {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--space-8) + var(--space-1));
    height: calc(var(--space-8) + var(--space-1));
    padding: 0;
    border: 2px solid currentColor;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-inverse);
    font-size: var(--text-xl);
    cursor: pointer;
}
.card-below-wait__back:focus-visible { outline: var(--space-1) solid var(--highlight-yellow); outline-offset: var(--space-1); }
.card-below-wait > span {
    display: block;
    flex: none;
    height: var(--space-4);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
    animation: card-below-wait 0.9s ease-in-out infinite alternate;
}
.card-below-wait > span:first-of-type {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: var(--space-2);
    border-radius: var(--radius-lg);
}
.card-below-wait > span:last-of-type { width: 60%; }
@keyframes card-below-wait { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
    .card-below-wait > span { animation: none; }
}