/**
 * TRPhoneVerificationSection Styles
 *
 * The Phone Verification / waiting screen, reached from the Phone
 * Number screen's own CONTINUA. Reuses the shared .tr-question-
 * section/.tr-question-content/.tr-question-bottom-action shell (tr-
 * question.css), the shared intro typography, and TRButton's own
 * .tr-button--outline variant for INDIETRO.
 *
 * CARD geometry is NOT a new box style: --tr-phone-verification-card-*
 * below alias the exact same shared primitives Club Confirmation's own
 * card (tr-club-confirmation.css) and Club Selection's own boxes (tr-
 * club-selection.css) already use -- 1px solid white border,
 * --tr-radius-lg, --tr-club-search-background, --tr-club-results-
 * content-inset-x -- never re-picked values, under this screen's own
 * class names (the same "new class per screen, alias the shared
 * primitive" pattern every other screen's own CSS file already
 * follows).
 *
 * PHONE NUMBER typography reads --tr-identity-field-value-* directly --
 * the EXACT same tokens the Phone Number screen's own input uses (tr-
 * phone-number.css) -- not a new type style. MESSAGE and the waiting
 * text reuse Club Confirmation's own .tr-club-confirmation-value class
 * directly (compound class, set in tr-phone-verification-section.js)
 * -- not a new font style. The RESEND line aliases the exact same
 * tokens tr-registration.css's own "Hai già un profilo? Accedi" line
 * uses (--tr-registration-account-font-family/-font-size, --tr-hero-
 * cta-description-color, --tr-registration-login-font-family/-color) --
 * under this screen's own class names, never tr-registration-card.js's
 * own classes directly.
 *
 * The SPINNER is the one genuinely new visual element in this app (no
 * existing loader to alias) -- pure CSS, no JS animation.
 *
 * Visual calibration (fine spacing/sizing) is intentionally NOT tuned
 * yet -- every value below is either an alias of an existing token or a
 * plain structural default, matching this task's own "do not fine-tune
 * spacing yet" instruction.
 */
:root {
    /* The checkphone-icon.svg's own displayed width -- height: auto
       preserves its own real aspect ratio (never stretched/cropped),
       same "-width controls size, height stays auto" pattern the club
       logo already uses. The SVG file itself is never modified/masked. */
    --tr-phone-verification-check-icon-size: 48px;

    /* Card geometry -- aliases the same shared primitives every other
       boxed element (Club Confirmation's card, Club Selection's search/
       results boxes) already uses. */
    --tr-phone-verification-card-radius: var(--tr-radius-lg);
    --tr-phone-verification-card-inset-x: var(--tr-club-results-content-inset-x);
    --tr-phone-verification-card-padding-top: var(--tr-space-lg);

    /* Per-relationship vertical gaps inside the card -- each its own
       token (never a single uniform gap), all starting at the same
       12px snapshot Club Confirmation's own internal gaps started at. */
    --tr-phone-verification-icon-to-number-gap: 12px;
    --tr-phone-verification-number-to-separator-gap: 12px;
    --tr-phone-verification-separator-to-message-gap: 18px;
    --tr-phone-verification-message-to-status-gap: 12px;
    --tr-phone-verification-status-text-to-spinner-gap: 8px;
    --tr-phone-verification-card-bottom-gap: 18px;

    /* Card -> resend line, below it. */
    --tr-phone-verification-card-to-resend-gap: 18px;

    /* Same solid-white treatment every other separator in this app
       already uses -- opacity aliases the shared token, not a new
       value. */
    --tr-phone-verification-separator-opacity: var(--tr-club-result-separator-opacity);

    /* ─── Spinner (genuinely new -- no existing loader to alias) ───
       -size/-stroke-width are the only two controls exposed, per this
       task's own "expose size and stroke width only if necessary"
       instruction. Color is lime (--tr-color-accent, the same lime
       token used throughout this app) on a dim ring -- not a new color
       value, just a reduced-opacity white for the ring itself. */
    --tr-phone-verification-spinner-size: 28px;
    --tr-phone-verification-spinner-stroke-width: 3px;
    --tr-phone-verification-spinner-ring-color: rgba(255, 255, 255, 0.15);
    --tr-phone-verification-spinner-duration: 0.9s;

    /* Resend line's own body/link typography -- aliases the exact same
       tokens tr-registration.css's own "Hai già un profilo? Accedi"
       line uses (see this file's own header note); typography itself
       is unchanged by the two-line restructure below. */
    --tr-phone-verification-resend-font-family: var(--tr-registration-account-font-family);
    --tr-phone-verification-resend-font-size: var(--tr-registration-account-font-size);
    --tr-phone-verification-resend-link-font-family: var(--tr-registration-login-font-family);
    --tr-phone-verification-resend-link-color: var(--tr-registration-login-color);
    /* Real margin between the two now-separate centered lines ("Non hai
       ricevuto il messaggio?" / "Invia di nuovo") -- replaces the old
       --tr-phone-verification-resend-gap (an inline margin-right, only
       meaningful when both sat on one line; retired now that the
       structure is always two stacked block lines instead). Starts at
       4px, a snapshot close to the old inline gap's own ~0.3em. */
    --tr-phone-verification-resend-lines-gap: 0px;

    /* "In attesa di conferma..." own independent controls. font-family
       is deliberately NOT one of these -- it keeps reading from the
       compounded .tr-club-confirmation-value class (tr-club-
       confirmation.css), unchanged. Values below are a snapshot of
       that class's own current font-size/color/letter-spacing (18px /
       --tr-club-address-color / 0px), so switching to these dedicated
       tokens changes nothing visually yet -- calibrate here without
       touching .tr-club-confirmation-value or the instruction message
       above, which still reads that class directly and is untouched
       by these. */
    /* Registration-responsive-pass: same idiom(B) clamp-ramp used
       throughout this pass, 320px floor ramping back up to the
       original flat 15px by ~374px. */
    --tr-phone-verification-status-font-size: calc(13px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.037151);
    --tr-phone-verification-status-color: #cedd44;
    --tr-phone-verification-status-letter-spacing: 0px;

    /* ─── CONFIRMED layout (setStatus('confirmed')) ───
       A different body entirely from WAITING (see renderBody() in
       tr-phone-verification-section.js) -- never touches anything the
       WAITING state (above) reads. Only the sizes/gaps genuinely new to
       this layout are exposed below; typography/colors/card language
       all reuse existing tokens directly in the rules themselves.
       (The large standalone checkoutline-icon.svg check that used to
       sit above the phone card -- and its own size/to-card-gap tokens --
       has been removed; the small lime check inside the phone card,
       below, is the only confirmation check this layout shows now.) */

    /* The compact phone card's OUTER geometry is not this screen's own
       -- it aliases the existing Authorization card's own geometry
       directly (tr-authorizations.css: --tr-auth-card-height,
       --tr-auth-card-radius, --tr-auth-card-padding-x, --tr-auth-card-
       background, plus its own 1px solid #ffffff border and
       align-items: center vertical alignment), the exact same outer box
       "Privacy"/"Dati di registrazione"/"Pubblicazione"/"Partite" (and
       their completed states) already render with -- see
       .tr-phone-verification-confirmed-phone-card below, no separate
       height/padding/radius/background tokens of this screen's own. The
       Authorization cards themselves are never touched by this.
       --tr-phone-verification-confirmed-phone-card-padding-y (a compact
       auto-height padding value) is retired -- genuinely redundant now
       that the card's height comes from --tr-auth-card-height directly. */

    /* Phone icon -> center content column. Independent of the content
       -> right-check relationship below (--columns-gap) -- real margin
       on the icon itself (see .tr-phone-verification-confirmed-phone-
       card-icon), not a flex `gap` shorthand (which cannot hold two
       different values across a 3-item row). Snapshot of the previous
       uniform 12px gap, so switching to this dedicated token changes
       nothing visually yet. */
    --tr-phone-verification-confirmed-phone-icon-to-content-gap: 16px;
    /* Center content column -> right lime check. Kept as the existing
       token (not renamed) -- same 12px snapshot as before. */
    --tr-phone-verification-confirmed-phone-card-columns-gap: 12px;

    /* Card's own internal left/right padding -- independent controls,
       both snapshot the SAME current value the shared --tr-auth-card-
       padding-x alias produced (18px), so switching to these dedicated
       tokens changes nothing visually yet. The Authorization card's own
       padding-x token itself is untouched/unaliased-from now -- this
       screen's own card no longer reads it directly. No top/bottom
       padding token: the Authorization card's own geometry already
       fully fixes vertical positioning here (a real fixed height,
       --tr-auth-card-height, plus align-items: center -- the
       Authorization card itself uses zero vertical padding too), so
       adding one would be a dead, do-nothing control. */
    --tr-phone-verification-confirmed-phone-card-padding-left: 18px;
    --tr-phone-verification-confirmed-phone-card-padding-right: 18px;

    /* Label -> value, stacked inside the center column. Unchanged --
       already existed, reused as-is. */
    --tr-phone-verification-confirmed-phone-card-label-gap: 8px;

    /* Optional whole-column vertical nudge (transform, on top of the
       row's own already-correct align-items: center centering, never a
       replacement for it) -- 0px, no visual change; here only for later
       fine optical calibration if the label/value column ever needs to
       sit slightly off the row's own mathematical center. */
    --tr-phone-verification-confirmed-phone-content-offset-y: 4px;

    /* The left phone icon's own displayed width -- independent of its
       new white mask color (see .tr-phone-verification-confirmed-
       phone-card-icon below). Unchanged. */
    --tr-phone-verification-confirmed-phone-icon-size: 32px;

    /* Same 12px "belongs directly to the card/content group" relationship
       Club Confirmation's own CONFERMA (--tr-club-confirmation-card-to-
       confirm-gap) and Phone Number's own CONTINUA (--tr-phone-box-to-
       continue-gap) already use -- see .tr-phone-verification-confirmed-
       continue's own override rule below. */
    --tr-phone-verification-confirmed-to-continue-gap: 12px;
}

.tr-phone-verification-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tr-phone-verification-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: var(--tr-phone-verification-card-padding-top);
    padding-left: var(--tr-phone-verification-card-inset-x);
    padding-right: var(--tr-phone-verification-card-inset-x);
    padding-bottom: var(--tr-phone-verification-card-bottom-gap);
    border: 1px solid #ffffff;
    border-radius: var(--tr-phone-verification-card-radius);
    background: var(--tr-club-search-background);
}

/* The real, unmodified SVG asset -- width from the one exposed size
   token, height: auto keeps its own real aspect ratio. Centered via
   real layout (the card's own align-items: center), not a transform. */
.tr-phone-verification-icon {
    display: block;
    width: var(--tr-phone-verification-check-icon-size);
    height: auto;
}

/* Reads the EXACT same tokens the Phone Number screen's own input uses
   (tr-phone-number.css's own .tr-phone-input) -- not a new type style. */
.tr-phone-verification-number {
    margin: var(--tr-phone-verification-icon-to-number-gap) 0 0;
    text-align: center;
    font-family: var(--tr-identity-field-value-font-family);
    font-size: var(--tr-identity-field-value-font-size);
    letter-spacing: var(--tr-identity-field-value-letter-spacing);
    color: var(--tr-color-text-dim);
}

.tr-phone-verification-separator {
    width: 100%;
    height: 1px;
    margin-top: var(--tr-phone-verification-number-to-separator-gap);
    background: #ffffff;
    opacity: var(--tr-phone-verification-separator-opacity);
}

/* Typography itself comes entirely from the compounded .tr-club-
   confirmation-value class (see tr-phone-verification-section.js's own
   buildMessage() note) -- only this element's own spacing is declared
   here. */
.tr-phone-verification-message {
    margin-top: var(--tr-phone-verification-separator-to-message-gap);
}

.tr-phone-verification-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: var(--tr-phone-verification-message-to-status-gap);
}

/* font-family still comes from the compounded .tr-club-confirmation-
   value class (unchanged); font-size/color/letter-spacing are this
   element's own independent controls (see their own note in :root
   above), overriding that class's same-named properties -- higher
   specificity isn't needed since this rule is declared later in the
   cascade than .tr-club-confirmation-value's own (tr-club-
   confirmation.css is linked before tr-phone-verification.css in
   index.html). The instruction message above is a separate element
   (.tr-phone-verification-message) and is completely unaffected. */
.tr-phone-verification-waiting-text {
    margin-top: 0;
    font-size: var(--tr-phone-verification-status-font-size);
    color: var(--tr-phone-verification-status-color);
    letter-spacing: var(--tr-phone-verification-status-letter-spacing);
}

/* Classic two-tone rotating ring: the base ring is a dim, mostly-
   transparent white circle; the top edge alone is lime, so rotating the
   whole element reads as a single lime arc sweeping continuously. No
   JS -- purely the animation below. */
.tr-phone-verification-spinner {
    width: var(--tr-phone-verification-spinner-size);
    height: var(--tr-phone-verification-spinner-size);
    margin-top: var(--tr-phone-verification-status-text-to-spinner-gap);
    border: var(--tr-phone-verification-spinner-stroke-width) solid var(--tr-phone-verification-spinner-ring-color);
    border-top-color: var(--tr-color-accent);
    border-radius: 50%;
    animation: tr-phone-verification-spin var(--tr-phone-verification-spinner-duration) linear infinite;
}

@keyframes tr-phone-verification-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ─── Resend area (below the card) ───
   Forced to always be two separate centered block lines -- "Non hai
   ricevuto il messaggio?" then "Invia di nuovo" -- never one inline-
   wrapping paragraph, so the relationship holds at any viewport width.
   Typography (family/size/line-height/letter-spacing/color) is
   unchanged from before; only the structure (two elements + a real
   margin-top between them) is new. */
.tr-phone-verification-resend {
    margin: var(--tr-phone-verification-card-to-resend-gap) 0 0 0;
    text-align: center;
    font-family: var(--tr-phone-verification-resend-font-family);
    font-size: var(--tr-phone-verification-resend-font-size);
    line-height: var(--tr-hero-cta-description-leading);
    letter-spacing: var(--tr-hero-cta-description-tracking);
    color: var(--tr-hero-cta-description-color);
}

.tr-phone-verification-resend-question {
    display: block;
}

.tr-phone-verification-resend-link-line {
    display: block;
    margin-top: var(--tr-phone-verification-resend-lines-gap);
}

.tr-phone-verification-resend-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: inherit;
    font-family: var(--tr-phone-verification-resend-link-font-family);
    color: var(--tr-phone-verification-resend-link-color);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── CONFIRMED layout ───
   Built by renderBody() only when status === 'confirmed' (tr-phone-
   verification-section.js) -- a completely separate body from WAITING
   above, never nested inside it, never both present at once. */

.tr-phone-verification-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The compact phone card's OUTER geometry aliases the existing
   Authorization card's own geometry directly (tr-authorizations.css)
   -- not a new box style, not guessed pixel values: height, padding,
   border-radius, background and vertical alignment (align-items:
   center) are all the SAME tokens/rules "Privacy"/"Dati di
   registrazione"/"Pubblicazione"/"Partite" (and their completed states)
   already render with. The Authorization cards themselves are
   untouched by this. Only the 3-column content layout inside is this
   screen's own concern. */
.tr-phone-verification-confirmed-phone-card {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--tr-auth-card-height);
    /* No margin-top of its own: now the first element in
       .tr-phone-verification-body (the large check above it was
       removed), it sits in the normal content position -- the existing
       intro-to-content gap (.tr-hero-question-content's own shared
       flex gap, tr-question.css) already spaces it correctly below the
       headline/highlight, same as every other screen's own first
       content element. */
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--tr-phone-verification-confirmed-phone-card-padding-left);
    padding-right: var(--tr-phone-verification-confirmed-phone-card-padding-right);
    border: 1px solid #ffffff;
    border-radius: var(--tr-auth-card-radius);
    background: var(--tr-auth-card-background);
}

/* LEFT: the real, unmodified phone-icon.svg asset, rendered as a white
   CSS mask (same mask technique the small lime check on the right of
   this card below also uses) so it displays pure white (--tr-color-
   text) rather than its own native fill. Width from the one exposed
   size token; height
   derived from the asset's own real viewBox ratio (23.77 x 38.25) so
   it is never stretched/cropped. */
.tr-phone-verification-confirmed-phone-card-icon {
    flex: 0 0 auto;
    display: block;
    width: var(--tr-phone-verification-confirmed-phone-icon-size);
    height: calc(var(--tr-phone-verification-confirmed-phone-icon-size) * 38.25 / 23.77);
    margin-right: var(--tr-phone-verification-confirmed-phone-icon-to-content-gap);
    background-color: var(--tr-color-text);
    -webkit-mask-image: url('../../assets/icons/mobile/phone-icon.svg');
    mask-image: url('../../assets/icons/mobile/phone-icon.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* CENTER: label + value, stacked, taking the remaining row width. */
.tr-phone-verification-confirmed-phone-card-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-right: var(--tr-phone-verification-confirmed-phone-card-columns-gap);
    transform: translateY(var(--tr-phone-verification-confirmed-phone-content-offset-y));
}

/* "NUMERO DI TELEFONO" -- reuses the exact same field-label typography
   tokens the Phone Number screen's own .tr-phone-label already reads
   (--tr-font-franklin-demi/--tr-header-button-text-size/--tr-font-
   weight-bold/--tr-header-button-tracking/--tr-club-section-label-
   color) -- not a new type style. */
.tr-phone-verification-confirmed-phone-card-label {
    display: block;
    text-align: left;
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-header-button-text-size);
    font-weight: var(--tr-font-weight-bold);
    letter-spacing: var(--tr-header-button-tracking);
    color: var(--tr-club-section-label-color);
}

/* "+39 <confirmed number>" -- MUST read the exact same typography
   tokens as both the Phone Number screen's own input (tr-phone-
   number.css's own .tr-phone-input) and this screen's own WAITING-
   state number (.tr-phone-verification-number, above) --
   --tr-identity-field-value-* -- never a duplicated value. */
.tr-phone-verification-confirmed-phone-card-value {
    margin: var(--tr-phone-verification-confirmed-phone-card-label-gap) 0 0;
    text-align: left;
    font-family: var(--tr-identity-field-value-font-family);
    font-size: var(--tr-identity-field-value-font-size);
    letter-spacing: var(--tr-identity-field-value-letter-spacing);
    color: var(--tr-color-text-dim);
}

/* RIGHT: lime circular confirmation check -- reuses the real
   check-icon.svg asset as a lime CSS mask, the EXACT same technique
   AND asset Authorizations' own completed-card status circle already
   uses (tr-authorizations.css's own .tr-auth-card-status-check) --
   size aliases the same --tr-auth-completed-check-icon-size token
   directly, not a new value; not an invented or modified SVG. */
.tr-phone-verification-confirmed-phone-card-check {
    flex: 0 0 auto;
    display: block;
    width: var(--tr-auth-completed-check-icon-size);
    height: var(--tr-auth-completed-check-icon-size);
    background: var(--tr-color-accent);
    -webkit-mask-image: url('../../assets/icons/mobile/check-icon.svg');
    mask-image: url('../../assets/icons/mobile/check-icon.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Overrides the shared .tr-option-button.tr-primary-action rule's own
   margin-top (28px, --tr-primary-action-gap-above) for this CONTINUA
   only -- same local-override pattern as .tr-club-confirmation-confirm/
   .tr-phone-continue elsewhere in this app; the shared rule and its own
   token are otherwise untouched. Sits directly after the phone card (a
   sibling of it in .tr-phone-verification-body, see renderBody() in
   tr-phone-verification-section.js), belonging directly to the card/
   content group. */
.tr-option-button.tr-primary-action.tr-phone-verification-confirmed-continue {
    margin-top: var(--tr-phone-verification-confirmed-to-continue-gap);
}