/*
 * 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);
}

/* --- 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;
}

.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;
}