/* The whole card is the link, thus the anchor carries the card class itself.
   Bulma paints an anchor blue and underlines it on hover; the card has to keep
   the text colour of the page. */
.card-link {
    display: block;
    color: inherit;
    transition:
        transform 120ms ease-out,
        box-shadow 120ms ease-out;
}

.card-link:hover {
    transform: scale(1.02);
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.2);
}

.card-link:hover .card-header-title {
    color: inherit;
}

/* The cards grow on hover, thus they need room between them or a card would
   reach under the one below it. */
.card-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* A person who asked the system for less movement gets the shadow alone. */
@media (prefers-reduced-motion: reduce) {
    .card-link {
        transition: none;
    }

    .card-link:hover {
        transform: none;
    }
}

/* The progression cell is a list of choices and not a sentence, thus each box
   takes a line of its own. */
.skill-table .checkbox {
    display: block;
}

.skill-table .skill-name {
    width: 22%;
}

.skill-table .skill-levels {
    width: 40%;
}

/* The frame of a document that a client signs. It is the frame that DocuSeal
   draws on their own page for an embedded form: a box of its own, with the
   document scrolling inside it, and not a block that grows with the document
   and takes the foot of the page.

   The height follows the window and stops at 800px. A form that stood at its
   own height would push the payment out of sight on a long document, and one
   at a fixed height would leave a band of empty page on a short one. */
docuseal-form.document-frame {
    display: block;
    height: calc(100vh - 150px);
    overflow: auto;
    border: 1px solid #dbdbdb;
    border-radius: 6px;
    background-color: #fff;
}

/* The frame that takes the card. :ui_mode is "embedded_page", thus Stripe
   draws a whole checkout page in here and not the compact card form; the older
   "embedded" spelling is refused on the API version that this application
   pins. A page needs the room of one.

   display: block is the line that matters. A custom element that no rule names
   is inline, thus the box took no width and no height of its own and the
   mounted frame sat in a line box, with the gap of a baseline under it.

   No height. Stripe sizes the frame to the page inside it and writes that
   height itself; min-height holds the room before it mounts, so that the block
   does not jump when the frame lands, as the calendar does above. */
stripe-checkout {
    display: block;
    width: 100%;
    min-height: 45rem;
}

/* Bulma paints a checkbox inline. The equipment question offers 37 boxes and
   the conditions question 20, and a paragraph of them can not be read; each
   takes a line of its own, in as many columns as the page has room for. */
.question-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.25rem 1.5rem;
}

/* The calendar that a client books their next session in. cal.com sizes the
   month view itself once it lands; the height here holds the room for it, so
   that the panel of the tab does not jump when the embed arrives. */
cal-booking.booking-frame {
    display: block;
    min-height: 40rem;
}

/* A question of the intake form opens the field below it: "If other, please
   specify" under a list of boxes, and "If yes, ..." under a yes or no. The
   field is closed until one of the options that opens it is picked, and the
   browser does the whole of it.

   The pair is a field and the field beside it, thus one rule answers for every
   such pair and none of them names the other. */
.question-reveal {
    display: none;
}

.field:has(.question-trigger:checked) + .question-reveal {
    display: block;
}

/* One option of a question can open a field of its own: each body part that a
   client ticks asks them about that injury. The field stands in the cell of
   its own box, thus the rule reaches down into the cell and a box opens the
   field that it holds and no other one.

   Such a question takes one column. The boxes of it are few, and the field
   that a box opens needs the width of the form to hold the prose. */
.question-options.has-details {
    grid-template-columns: 1fr;
}

.question-option:has(.question-trigger:checked) > .question-reveal {
    display: block;
}

.question-option > .question-reveal {
    margin: 0.25rem 0 0.75rem 1.75rem;
}

/* A client types their goals and their injuries into a textarea, in as many
   lines as they want. The studio reads those answers back as prose, and a
   paragraph would put every line of them on one. */
.given-answer {
    white-space: pre-wrap;
}

.audience-reveal {
    display: none;
}

.audience-field:has(input[value="clients"]:checked) ~ .audience-clients {
    display: block;
}

.audience-field:has(input[value="programs"]:checked) ~ .audience-programs {
    display: block;
}

video-player.video-frame {
    display: block;
    width: 100%;
    background: #000;
}

video-player.video-frame video {
    display: block;
    width: 100%;
    max-height: 32rem;
}

iframe.file-frame {
    display: block;
    width: 100%;
    height: 40rem;
    border: 0;
    background: #fff;
}

.typed-lines {
    white-space: pre-wrap;
}

.sale-popover {
    width: min(40rem, 90vw);
    background-color: #fff;
    max-height: 90vh;
    overflow: auto;
    border: none;
    border-radius: 6px;
    box-shadow: 0 0.5rem 1.5rem rgba(10, 10, 10, 0.2);
    padding: 1.5rem;
}

.sale-popover::backdrop {
    background: rgba(10, 10, 10, 0.5);
}