/*
    Functional CSS: the rules here make the wizard WORK, not look a particular way.
    Restyle freely in site.css, but keep these selectors doing what they do.
    Loaded after site.css so a design rule can't accidentally switch one off.
*/

/* Modals. Hidden until a Datastar signal (wizard-dialog) or a CSS rule below shows them. */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Carbon fibre warning: open while "Yes" is checked and "OK" is not. Pure CSS on purpose —
   see the comment in Pages/Wizard/Questions.cshtml. */
.carbon-fibre-warning {
    display: none;
}

.questions-form:has(#carbon-fibre-yes:checked):not(:has(#carbon-fibre-ack:checked)) .carbon-fibre-warning {
    display: flex;
}

/* Signature pad. Without touch-action: none, a finger drawing on a phone scrolls the page
   instead of signing. The canvas needs a real size for signature_pad to draw into. */
[data-signature] canvas {
    display: block;
    width: 100%;
    height: 10rem;
    touch-action: none;
}