/**
 * TRProfileCreatedSection Styles
 *
 * "Profilo creato!" screen, reached from Player Summary's own CONFERMA
 * E CONTINUA. Reuses the shared .tr-question-section/.tr-question-
 * content/.tr-question-bottom-action shell (tr-question.css), the
 * shared intro typography, TROptionButton's own filled .tr-primary-
 * action for ENTRA IN TENNISROOTS, and TRButton's existing outline
 * variant for INDIETRO.
 *
 * THE PLAYER CARD IS NOT A SEPARATE IMPLEMENTATION. Its avatar/name/
 * role/CIRCOLO/separator portion is Player Summary's OWN calibrated
 * card, genuinely reused: tr-profile-created-section.js's own
 * buildPlayerCard()/buildAvatarWrap() render that portion using Player
 * Summary's own classes directly -- .tr-player-summary-card,
 * -avatar-wrap, -avatar, -avatar-initials, -identity-content, -name,
 * -role, -separator, -row-text, -row-label, -row-value (all defined in
 * tr-player-summary.css, not redeclared here). Every size/padding/gap/
 * font value for that portion lives ONLY in tr-player-summary.css; this
 * file adds zero geometry of its own for it. The only things genuinely
 * new here are:
 * - A TRUE 2-column grid (avatar | name+role+CIRCOLO content, no
 *   third/right column -- the confirmed check that used to occupy an
 *   "auto" third column has been removed; the content column simply
 *   expands into that recovered width via 1fr) and a handful of grid-
 *   PLACEMENT-only classes (.tr-profile-created-grid-* below) that tell
 *   those reused elements where to sit in THIS screen's own, shorter
 *   grid (identity/CIRCOLO/stats -- Player Summary's own 4-row DOB/
 *   CIRCOLO/TELEFONO/3-column grid doesn't apply here).
 *   The grid itself still uses Player Summary's own column template and
 *   row-height tokens directly (--tr-player-summary-avatar-size/
 *   -avatar-to-content-gap/-identity-row-min-height/-row-min-height),
 *   never new calibrated values, and its separators follow Player
 *   Summary's own established rule (skip the avatar column right after
 *   the identity row, full width before any row with no avatar).
 * - .tr-profile-created-avatar-accent, which overrides ONLY the
 *   avatar's border-color/initials color to this screen's own lime
 *   "confirmed" accent -- every other avatar property (size, border
 *   width, radius, the no-photo dark overlay, initials font/position)
 *   stays Player Summary's own, untouched.
 * - The stats row (0 Partite/Highlights/Follower) -- genuinely new,
 *   Player Summary has no equivalent to reuse.
 * - The second ("Inizia a registrare") card, unchanged from before.
 *
 * Player Summary's own CSS/JS are completely untouched by this file --
 * its rendering is unaffected.
 */
:root {
    /* Stats row -- genuinely new, nothing to reuse from Player Summary. */
    --tr-profile-created-stat-value-to-label-gap: 0px;
    --tr-profile-created-stats-divider-height: 32px;

    /* ─── Record ("REGISTRA UNA PARTITA") card -- --card-radius aliases
       the same shared primitive the player card's own border-radius
       (via .tr-player-summary-card) already uses, kept here since this
       card doesn't reuse that class itself. ─── */
    --tr-profile-created-card-radius: var(--tr-radius-lg);
    --tr-profile-created-card-to-record-gap: 12px;
    --tr-profile-created-record-card-padding-x: var(--tr-space-lg);
    --tr-profile-created-record-card-padding-y: 16px;
    /* Icon size aliases the SAME token the right arrow already uses
       (--tr-auth-completed-check-icon-size, see .tr-profile-created-
       record-arrow below) -- not a separately picked value, so the two
       are guaranteed the same size, per the reference. */
    --tr-profile-created-record-icon-size: var(--tr-auth-completed-check-icon-size);
    --tr-profile-created-record-icon-to-separator-gap: 14px;
    --tr-profile-created-record-separator-width: 1px;
    --tr-profile-created-record-separator-height: 24px;
    --tr-profile-created-record-separator-to-label-gap: 14px;
    --tr-profile-created-record-label-to-arrow-gap: 12px;
    --tr-profile-created-record-arrow-size: var(--tr-auth-completed-check-icon-size);

    /* Record card -> ENTRA IN TENNISROOTS, the same established 12px
       "belongs directly to the card/content group" local-override
       pattern Player Summary's own CONFERMA E CONTINUA and Phone
       Verification's own confirmed CONTINUA already use. */
    --tr-profile-created-record-to-primary-gap: 12px;
}

/* min-height: 0 (responsive pass) lets this group shrink below its
   natural content height when the screen is short, passing that
   constraint down to .tr-profile-created-player-scroll below -- the
   exact same min-height:0 pass-through pattern Player Summary's own
   .tr-player-summary-group already uses. */
.tr-profile-created-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

/* The ONE flexible/scrollable middle region on this screen (responsive
   pass) -- the PLAYER CARD ONLY, the exact same mechanism Player
   Summary's own card already uses (flex: 1 1 auto + min-height: 0 +
   overflow-y: auto). REGISTRA UNA PARTITA and ENTRA IN TENNISROOTS are
   BOTH outside/after this wrapper (plain siblings within
   .tr-profile-created-group, each flex-shrink: 0 -- see
   .tr-profile-created-record-card/-primary below) -- the fixed lower
   area, never inside the scroll, never pushed off-screen by it. On a
   tall screen there is no shortage, so this has no visible effect --
   the card renders at its normal height and position exactly as
   before. */
.tr-profile-created-player-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tr-profile-created-player-scroll::-webkit-scrollbar {
    display: none;
}

/* ─── Player card ───
   .tr-player-summary-card is reused DIRECTLY as this element's own
   class (see tr-profile-created-section.js) -- box geometry (border/
   radius/padding/background) comes entirely from tr-player-summary.css,
   zero duplication here. This compound rule only switches its layout
   from Player Summary's own flex-column (which wraps ITS OWN 4-row
   grid) to a grid directly on this element, sized for this screen's
   own 3-row content (identity/CIRCOLO/stats) -- but using Player
   Summary's own row-height tokens, not new values. A TRUE 2-column
   grid (avatar | name+role+CIRCOLO content, no third/right column --
   the confirmed check that used to occupy an "auto" third column has
   been removed, and the content column now simply expands into that
   recovered width via 1fr, same as every other 2-column row already
   does). Compounded with .tr-player-summary-card for higher
   specificity, so it reliably overrides that class's own display:flex
   regardless of link order (same technique as .tr-player-summary-
   modify.tr-player-summary-identity-action elsewhere in this app). */
.tr-player-summary-card.tr-profile-created-player-card {
    display: grid;
    /* Responsive pass: this card is now the sole flex item of
       .tr-profile-created-player-scroll above -- flex-shrink: 0 keeps it
       at its own real height (the lesson from Authorizations: without
       this, flexbox would silently squash it instead of leaving it at
       full size and letting the wrapper's own overflow-y: auto handle
       any shortage by scrolling). */
    flex-shrink: 0;
    align-items: center;
    column-gap: var(--tr-player-summary-avatar-to-content-gap);
    grid-template-columns: var(--tr-player-summary-avatar-size) 1fr;
    grid-template-rows:
        minmax(var(--tr-player-summary-identity-row-min-height), auto)
        auto
        minmax(var(--tr-player-summary-row-min-height), auto)
        auto
        auto;
    grid-template-areas:
        "avatar     name"
        ".          sep-top"
        ".          circolo"
        "sep-bottom sep-bottom"
        "stats      stats";
    /* This screen's own lime "confirmed" color treatment -- overrides
       ONLY the card's border color (Player Summary's own white, via
       .tr-player-summary-card, is untouched). Same var(--tr-color-
       accent) as everywhere else in this app, never a second lime
       value. */
    border-color: var(--tr-color-accent);
}

/* The rest of the lime treatment below targets Player Summary's own
   reused text/separator classes, but scoped under .tr-profile-created-
   player-card specifically -- Player Summary's own identical DOM never
   carries that class, so none of this reaches it; its own white text/
   separators are untouched. Geometry/typography/spacing are not
   touched by any of these -- color/background-color only. */
.tr-profile-created-player-card .tr-player-summary-name,
.tr-profile-created-player-card .tr-player-summary-role,
.tr-profile-created-player-card .tr-player-summary-row-label,
.tr-profile-created-player-card .tr-player-summary-row-value {
    color: var(--tr-color-accent);
}

.tr-profile-created-player-card .tr-player-summary-separator {
    background: var(--tr-color-accent);
}

.tr-profile-created-grid-avatar {
    grid-area: avatar;
}

.tr-profile-created-grid-name {
    grid-area: name;
}

/* Identity -> CIRCOLO separator: starts at the same X as the content
   column, never runs underneath the avatar -- same rule .tr-player-
   summary-separator--top follows in Player Summary's own grid. */
.tr-profile-created-grid-sep-top {
    grid-area: sep-top;
}

.tr-profile-created-grid-circolo {
    grid-area: circolo;
}

/* CIRCOLO -> stats separator: full internal card width, edge to edge --
   same rule .tr-player-summary-separator--mid/--bottom follow (no
   avatar-column content on either adjacent row). */
.tr-profile-created-grid-sep-bottom {
    grid-area: sep-bottom;
}

.tr-profile-created-grid-stats {
    grid-area: stats;
}

/* This screen's own lime "confirmed" accent -- overrides ONLY the
   avatar's border-color/initials color. Compounded with Player
   Summary's own .tr-player-summary-avatar/-avatar-initials for higher
   specificity (reliably overrides their own border-color: #ffffff /
   color: --tr-color-text-dim regardless of link order); every other
   property (size, border-width, radius, background handling, the
   no-photo dark overlay, initials font/size/position) stays exactly
   Player Summary's own, untouched. */
.tr-player-summary-avatar.tr-profile-created-avatar-accent {
    border-color: var(--tr-color-accent);
}

.tr-player-summary-avatar-initials.tr-profile-created-avatar-accent {
    color: var(--tr-color-accent);
}

/* ─── Stats row (0 Partite / 0 Highlights / 0 Follower) ─── */
.tr-profile-created-stats-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.tr-profile-created-stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Registration-responsive-pass: no shared "stat number" token exists
   elsewhere in this app (genuinely unique to this row) -- same
   idiom(B) clamp-ramp used throughout this pass, 320px floor ramping
   back up to the original flat 24px by ~374px. */
.tr-profile-created-stat-value {
    margin: 0;
    font-family: var(--tr-font-franklin-book);
    font-size: calc(20.5px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.065008);
    color: var(--tr-color-accent);
}

.tr-profile-created-stat-label {
    margin: var(--tr-profile-created-stat-value-to-label-gap) 0 0;
    font-family: var(--tr-font-franklin-demi);
    /* Same idiom(B) treatment, 320px floor ramping back up to the
       original flat 13px by ~374px. */
    font-size: calc(11.5px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.027863);
    color: var(--tr-color-accent);
}

.tr-profile-created-stats-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 40px;
    background: var(--tr-color-accent);
    opacity: var(--tr-club-result-separator-opacity);
}

/* ─── Record ("REGISTRA UNA PARTITA") card -- icon | separator | one-
   line label | trailing lime arrow, per the reference. Card outer
   border/background are unchanged from before (white border, the same
   translucent/black card fill every card in this app uses). ─── */
.tr-profile-created-record-card {
    display: flex;
    /* Responsive pass: this card is a FIXED sibling of
       .tr-profile-created-player-scroll (outside/after it, within
       .tr-profile-created-group), never inside the scrollable region --
       flex-shrink: 0 keeps it at its own real height regardless of how
       much the player card above it shrinks. */
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--tr-profile-created-card-to-record-gap);
    padding: var(--tr-profile-created-record-card-padding-y) var(--tr-profile-created-record-card-padding-x);
    border: 1px solid #ffffff;
    border-radius: var(--tr-profile-created-card-radius);
    background: var(--tr-club-search-background);
}

/* LEFT: the real, unmodified record-icon.svg asset (assets/icons/
   mobile/ -- already a complete circle-outline + inner square glyph),
   rendered as a white CSS mask, same size as the right arrow (see
   --tr-profile-created-record-icon-size above). */
.tr-profile-created-record-icon {
    flex: 0 0 auto;
    display: block;
    width: var(--tr-profile-created-record-icon-size);
    height: var(--tr-profile-created-record-icon-size);
    margin-right: var(--tr-profile-created-record-icon-to-separator-gap);
    background-color: var(--tr-color-text-dim);
    -webkit-mask-image: url('../../assets/icons/mobile/record-icon.svg');
    mask-image: url('../../assets/icons/mobile/record-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;
}

/* Vertical white separator between the icon and the label -- same
   solid-white treatment every other separator in this app uses (full
   opacity here, a short fixed height rather than width:100%, since it
   sits inline in a row, not spanning a card). */
.tr-profile-created-record-separator {
    flex: 0 0 auto;
    width: var(--tr-profile-created-record-separator-width);
    height: var(--tr-profile-created-record-separator-height);
    margin-right: var(--tr-profile-created-record-separator-to-label-gap);
    background: #ffffff;
}

/* CENTER: one line, ALL CAPS, Franklin Demi -- reads --tr-primary-
   action-letter-spacing directly, the exact same tracking ENTRA IN
   TENNISROOTS/CONFERMA E CONTINUA already use for their own ALL-CAPS
   Franklin Demi labels, not a new type style. Vertically centered via
   the card's own align-items: center. font-size is intentionally NOT
   set here at all -- see this selector's own rule below for why. */
.tr-profile-created-record-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    margin-right: var(--tr-profile-created-record-label-to-arrow-gap);
    text-align: left;
    /* One line, never wrapped -- no ellipsis/truncation mechanism: the
       reused primary-action typography below (the exact same family/
       size/weight/letter-spacing/responsive curve ENTRA IN TENNISROOTS
       and CONFERMA E CONTINUA use) is what keeps this comfortably
       inside the card at every width, not a text-overflow fallback. */
    white-space: nowrap;
    font-family: var(--tr-primary-action-font-family);
    /* No font-size set here -- it must come ONLY from tr-question.css's
       five @media blocks, which already target this selector directly
       alongside .tr-option-button (see their own note) and together
       cover every viewport width with no gap. A local, unconditional
       font-size here would have the SAME specificity (one class) as
       those @media rules, and tr-profile-created.css loads AFTER
       tr-question.css in index.html, so by cascade order it would
       always win and silently cancel the responsive scaling -- which
       is exactly why this label previously stayed flat while ENTRA IN
       TENNISROOTS correctly shrank. */
    font-weight: var(--tr-primary-action-font-weight);
    letter-spacing: var(--tr-primary-action-letter-spacing);
    color: var(--tr-color-text-dim);
    transform: translateY(2px);
}

/* RIGHT: the real, unmodified continue-icon.svg asset (already a
   complete arrow-in-circle glyph, the same asset Club Selection's own
   result-row arrow uses), rendered as a lime CSS mask. */
.tr-profile-created-record-arrow {
    flex: 0 0 auto;
    display: block;
    width: var(--tr-profile-created-record-arrow-size);
    height: var(--tr-profile-created-record-arrow-size);
    background-color: var(--tr-color-accent);
    -webkit-mask-image: url('../../assets/icons/mobile/continue-icon.svg');
    mask-image: url('../../assets/icons/mobile/continue-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-player-summary-continue elsewhere in this app. */
.tr-option-button.tr-primary-action.tr-profile-created-primary {
    margin-top: var(--tr-profile-created-record-to-primary-gap);
    /* Responsive pass: never compressed/scrolled by the flex-shrink
       cascade that now lets .tr-profile-created-player-scroll above it
       shrink+scroll on a short screen -- this button (like the record
       card right above it) is a fixed sibling of that wrapper, outside
       it, and must always stay visible. */
    flex-shrink: 0;
}