/*
 * Electronic-waiver signing SPA (players/waiver_sign_react).
 * Class prefix: wv-*. Root font-size is 10px, so 1rem = 10px.
 * Colors come from style.css variables.
 */

.wv-page {
    max-width: 78rem;
    margin: 0 auto;
    padding: 3rem 1.6rem 6rem;
    color: var(--charcoal);
    font-size: 1.5rem;
    line-height: 1.5;
}

.wv-card {
    background: #fff;
    border: 1px solid hsla(220, 20%, 90%, 1);
    border-radius: 1rem;
    padding: 2.4rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px hsla(219, 22%, 26%, 0.06);
}

.wv-card-narrow {
    max-width: 48rem;
    margin: 6rem auto 0;
}

.wv-event {
    color: var(--cinnamon-satin);
    font-weight: 600;
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
}

/* Tournament name — headlines the whole signing page. */
.wv-event-header {
    color: var(--cinnamon-satin);
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1.2;
    margin: 0 0 2rem;
}

/*
 * Identity strip under the event name: who is about to sign, plus the way out.
 * Quiet by design — it must be readable before the form is filled in, without
 * competing with the waiver itself for attention.
 */
.wv-signer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.8rem 1.2rem;
    margin: -1rem 0 2rem;
    font-size: 1.4rem;
    color: var(--charcoal);
}

.wv-signer-who {
    opacity: 0.85;
}

/* A link, not a button: switching signer is an escape hatch, not an action the
   page is inviting. */
.wv-signer-switch {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--cinnamon-satin);
    text-decoration: underline;
    cursor: pointer;
}

.wv-signer-switch:disabled {
    cursor: default;
    opacity: 0.6;
}

/* The second identity line, beside the signature. Same shape as the top strip
   so the "Not you?" link sits on the same baseline as the sentence, wrapping to
   its own line on narrow screens rather than being pushed off the edge. */
.wv-signer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.2rem;
}

/* The opt-out checkbox for the optional secondary waiver. */
.wv-optional-consent {
    margin-top: 1.6rem;
}

.wv-title {
    font-size: 2.6rem;
    margin: 0 0 1.6rem;
    color: var(--charcoal);
}

.wv-card h2 {
    font-size: 1.9rem;
    margin: 0 0 1.6rem;
}

.wv-body {
    border: 1px solid hsla(220, 20%, 92%, 1);
    background: var(--cultured);
    border-radius: 0.8rem;
    padding: 1.6rem;
    max-height: 42rem;
    overflow-y: auto;
}

.wv-muted {
    color: #6b7280;
    font-size: 1.4rem;
}

/* The data-handling note above the consent box — what Universal does with what
   is submitted, plus the link to the full privacy policy. */
.wv-disclosure {
    font-size: 1.4rem;
    color: #374151;
    background: var(--cultured);
    border-radius: 0.6rem;
    padding: 0.8rem 1.2rem;
    margin: 1.2rem 0 0.4rem;
}

/* --- child blocks --- */
.wv-child {
    border: 1px solid hsla(220, 20%, 92%, 1);
    border-radius: 0.8rem;
    padding: 1.6rem;
    margin-bottom: 1.6rem;
}

.wv-child-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.wv-child-head h3 {
    margin: 0;
    font-size: 1.6rem;
}

.wv-field {
    margin-bottom: 1.4rem;
    flex: 1;
}

.wv-field-row {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.wv-label {
    display: block;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    /* Keep the label text and its trailing required "*" on one line so the
       asterisk never orphans onto a second row and misaligns the input. */
    white-space: nowrap;
}

.wv-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.9rem 1.1rem;
    font-size: 1.5rem;
    border: 1px solid hsla(220, 14%, 80%, 1);
    border-radius: 0.6rem;
    background: #fff;
}

.wv-input:focus {
    outline: none;
    border-color: var(--cinnamon-satin);
}

/* The inputs we actively contradict: a date of birth that doesn't fit the
   chosen team's age group, and an incomplete signer name (see
   .wv-match-blocking for the explanation shown beneath them). */
.wv-input-error,
.wv-input-error:focus {
    border-color: hsla(0, 60%, 60%, 1);
}

.wv-notice {
    background: hsla(40, 90%, 96%, 1);
    border: 1px solid hsla(40, 80%, 80%, 1);
    border-radius: 0.6rem;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.4rem;
    font-size: 1.4rem;
}

.wv-notice p {
    margin: 0 0 0.8rem;
}

/* --- match prompts --- */
.wv-match {
    margin: 0.4rem 0 1rem;
    padding: 1rem 1.2rem;
    border-radius: 0.6rem;
    font-size: 1.4rem;
}

.wv-match-checking { color: #6b7280; }

.wv-match-ok {
    background: hsla(140, 50%, 95%, 1);
    color: hsla(150, 45%, 28%, 1);
}

.wv-match-confirm,
.wv-match-verify {
    background: var(--cultured);
    border: 1px solid hsla(220, 20%, 88%, 1);
}

/* The overridable-but-blocking prompts: a date of birth that doesn't fit the
   chosen team, and a signer name that doesn't read as a full legal name. Louder
   than the roster prompts above, because unlike them these hold up the submit —
   same palette as .wv-error so "this is a problem" reads immediately. */
.wv-match-blocking {
    background: hsla(0, 70%, 96%, 1);
    border: 1px solid hsla(0, 60%, 85%, 1);
    color: hsla(0, 60%, 35%, 1);
}

.wv-match-actions {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.8rem;
}

/* --- buttons / links --- */
.wv-btn {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    font-weight: 600;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    text-decoration: none;
}

.wv-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wv-btn-primary {
    background: var(--cinnamon-satin);
    color: #fff;
    margin-top: 1.2rem;
}

.wv-btn-secondary {
    background: var(--cultured);
    color: var(--charcoal);
    border: 1px solid hsla(220, 14%, 80%, 1);
}

.wv-btn-tiny {
    padding: 0.6rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    background: var(--cinnamon-satin);
    color: #fff;
}

.wv-btn-tiny-ghost {
    background: #fff;
    color: var(--charcoal);
    border: 1px solid hsla(220, 14%, 80%, 1);
}

.wv-link {
    display: inline-block;
    background: none;
    border: none;
    padding: 0.4rem 0;
    color: var(--cinnamon-satin);
    font-size: 1.35rem;
    cursor: pointer;
    text-decoration: underline;
}

.wv-link-muted { color: #6b7280; }
.wv-link-danger { color: hsla(0, 60%, 50%, 1); }

.wv-consent {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 1.6rem 0;
    font-size: 1.45rem;
}

/* Keep the checkbox at a real, larger size (explicit width/height, not a
   transform that leaves a phantom layout box) and let the consent text take the
   remaining width so it no longer over-wraps beside a small control. */
.wv-consent input {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    accent-color: var(--cinnamon-satin);
    cursor: pointer;
}

.wv-consent span {
    flex: 1 1 auto;
}

/* Required-field asterisk, inline after the label text. */
.wv-req {
    color: hsla(0, 60%, 50%, 1);
}

.wv-textarea {
    resize: vertical;
    min-height: 4.4rem;
    font-family: inherit;
}

/* --- "same team as a sibling" shortcut --- */
.wv-sibling-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.wv-sibling-label {
    color: #6b7280;
    font-size: 1.3rem;
}

.wv-chip {
    padding: 0.5rem 1.1rem;
    font-size: 1.35rem;
    border: 1px solid var(--cinnamon-satin);
    border-radius: 999px;
    background: #fff;
    color: var(--cinnamon-satin);
    cursor: pointer;
}

/* --- "can't find your team" suggestions ---
   Not wv-chip: a chip is a one-line pill, and each suggestion carries a team
   name AND a coach line, so it needs a full-width two-line target. */
.wv-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1.2rem 0;
}

.wv-suggestion {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0.9rem 1.2rem;
    border: 1px solid hsla(220, 14%, 80%, 1);
    border-radius: 0.6rem;
    background: #fff;
    cursor: pointer;
}

.wv-suggestion:hover,
.wv-suggestion:focus-visible {
    border-color: var(--cinnamon-satin);
}

/* The "none of these" option: same row shape so it reads as part of the same
   question, dashed + muted so it doesn't compete with the real candidates. */
.wv-suggestion--none {
    border-style: dashed;
    background: transparent;
}

.wv-suggestion--none .wv-suggestion-name {
    font-weight: 500;
    color: #6b7280;
}

.wv-suggestion-name {
    font-size: 1.4rem;
    font-weight: 600;
}

.wv-suggestion-meta {
    font-size: 1.25rem;
    color: #6b7280;
}

.wv-suggestions-empty {
    margin: 1.2rem 0;
    font-size: 1.3rem;
    color: #6b7280;
}

.wv-selected-team {
    margin-bottom: 0.8rem;
    font-size: 1.35rem;
    color: hsla(150, 45%, 32%, 1);
}

/* "This team came from the link you followed." Sits under the selected-team
   summary when a per-team link filled the picker in.

   Deliberately NOT .wv-muted grey: its whole job is to be read by a parent who
   came here to skim, because a coach sending the wrong team's link produces a
   signature that looks perfectly correct to the host. Equally not .wv-match-
   blocking red, since nothing is wrong yet and alarming somebody mid-signature
   is its own cost. Informational blue on a tinted ground, at body size. */
.wv-prefill-note {
    margin: 0 0 0.8rem;
    padding: 0.7rem 1rem;
    border-left: 3px solid #6b8fb5;
    border-radius: 0 4px 4px 0;
    background: #f2f6fa;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.45;
    color: #3d4554;
}

/* --- team picker: collapse-on-select transition --- */
/* Picking a team animates the picker's height + opacity out (grid rows 1fr->0fr
   needs an overflow-hidden inner wrapper) before it swaps to the summary, so the
   user can follow that their checkbox click drove the change. */
.wv-picker {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.wv-picker-inner {
    overflow: hidden;
    min-height: 0;
}

.wv-picker--collapsing {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;   /* freeze the list mid-animation */
}

/* Summary settles into place — applied only on a fresh pick (see --settling). */
@keyframes wv-team-settle {
    from { opacity: 0; transform: translateY(-0.6rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.wv-selected-team--settling {
    animation: wv-team-settle 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .wv-picker { transition: none; }
    .wv-selected-team--settling { animation: none; }
}

/* Inline "Change team" link sitting after the selected-team summary. */
.wv-change-team {
    margin-left: 1.2rem;
    padding: 0;
    vertical-align: baseline;
}

/* Why "I Agree & Sign" is greyed out, sitting directly under the button.

   Deliberately NOT .wv-error red: nothing has gone wrong, the form is simply
   not finished, and a red box at the end of a waiver reads as a rejection. It
   is equally not plain .wv-muted grey, which is what it used to be: the whole
   point is that a signer staring at a dead button notices it, so it gets a
   tinted ground and an amber rule at body weight. */
.wv-blocked-reason {
    margin: 0.8rem 0 0;
    padding: 0.8rem 1.2rem;
    border-left: 3px solid hsla(35, 80%, 55%, 1);
    border-radius: 0 4px 4px 0;
    background: hsla(40, 90%, 96%, 1);
    color: hsla(30, 40%, 28%, 1);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.45;
}

.wv-error {
    background: hsla(0, 70%, 96%, 1);
    color: hsla(0, 60%, 40%, 1);
    border: 1px solid hsla(0, 60%, 85%, 1);
    border-radius: 0.6rem;
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
    font-size: 1.4rem;
}

/* --- confirmation --- */
.wv-confirm { text-align: center; }

.wv-confirm-check {
    width: 6rem;
    height: 6rem;
    line-height: 6rem;
    margin: 0 auto 1.6rem;
    border-radius: 50%;
    background: hsla(140, 50%, 92%, 1);
    color: hsla(150, 45%, 32%, 1);
    font-size: 3rem;
}

.wv-confirm-actions {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    margin-top: 2rem;
}

/* --- draw-your-signature pad (components/SignaturePad.tsx) ---
   Shown only when the event sets require_drawn_signature. */
.wv-signpad {
    margin: 1.6rem 0;
}

.wv-signpad-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
}

/* touch-action: none is load-bearing, not decoration — without it a finger drag
   scrolls the page instead of drawing, and the pad reads as broken on a phone.
   The width is fluid with a ceiling so the box stays a signature-shaped strip on
   a laptop and still fills a narrow phone; the inline aspect-ratio keeps the
   drawing surface proportional to the 600x180 backing store at any width. */
.wv-signpad-canvas {
    display: block;
    width: 100%;
    max-width: 48rem;
    touch-action: none;
    background: #ffffff;
    border: 1px solid hsla(220, 14%, 80%, 1);
    border-radius: 0.6rem;
    cursor: crosshair;
}

.wv-signpad-hint {
    margin-top: 0.6rem;
    font-size: 1.3rem;
}