/**
 * TRIdentityCard Component Styles
 *
 * Identity-confirmation screen (provider row, NOME/EMAIL fields, MODIFICA,
 * SÌ SONO IO), reached from a registration-entry screen's provider tap.
 * Reuses the question/registration screens' zone shell verbatim
 * (.tr-hero-question-scroll / .tr-hero-question-content / .tr-question-
 * section / .tr-question-content / .tr-question-bottom-action /
 * .tr-question-skip, all in tr-question.css) -- nothing in this file
 * re-implements positioning, scrolling or the INDIETRO button. This file
 * styles only what is genuinely new: the identity card's own content.
 *
 * Typography/geometry is, by design, entirely reused where a reasonable
 * match exists:
 * - MODIFICA is .tr-registration-secondary.tr-button (NON ORA's own
 *   permanent-outline button, see tr-registration.css) -- unchanged.
 * - SÌ, SONO IO is the shared lime-filled TROptionButton (.tr-option-
 *   button, see tr-question.css) -- the exact button the registration
 *   card's own primary CTA already uses.
 * - "Dati ricevuti da:" and "Google" (the provider row's label and
 *   value) are both Franklin Demi (non-condensed) at the SAME manually-
 *   tunable master, --tr-identity-source-font-size, so they always
 *   resize together.
 * - The provider icon reuses the existing provider-icon white filter
 *   (--tr-registration-provider-icon-filter, see tr-registration.css);
 *   its size and position are its own explicit controls.
 *
 * The NOME/EMAIL data area below the provider row (labels, values,
 * dividers, vertical spacing) has its own dedicated designer-control
 * block -- see the :root section below -- so it can be calibrated
 * independently of everything above it.
 */

:root {
    /* ─── Provider ─── */
    /* One explicit, registration-specific value: this icon's role (small,
       inline, beside a text label) has no equivalent elsewhere in the
       app, unlike font sizes/colors below, which all reuse existing
       tokens. No responsive curve -- consistent with the provider badge
       size in tr-registration.css, which also holds one flat value. */
    --tr-identity-provider-icon-size: 34px;

    /* Manual visual nudge for the provider icon only -- a transform, not a
       layout property, so it never affects the provider row's own layout,
       Google text position, gaps or the divider below it (see
       .tr-identity-provider-icon below). 0px/0px is the current position;
       negative x = left, positive x = right, negative y = up, positive
       y = down. Generic to whichever provider icon is showing (Google
       today; Apple/Facebook will use the exact same two tokens later). */
    --tr-identity-provider-icon-x: 0px;
    --tr-identity-provider-icon-y: -4px;

    /* "Dati ricevuti da:" / "Google" -- one designer-facing size, shared
       by both, manually tunable (e.g. 14px / 16px / 18px) with no other
       selector to touch. 13px is this text's own current rendered size
       (its own fluid token, --tr-hero-cta-description-font-size, reaches
       exactly 13px at ~375px and holds flat above it -- measured, not
       guessed), so this value is a fixed snapshot of "approximately
       where it is now", not an alias of that token going forward. */
    --tr-identity-source-font-size: 13px;

    /* ─── Identity field labels (NOME / EMAIL) ─── */
    /* Values below are fixed snapshots of what each field currently
       renders at 375px (measured, not guessed) -- see .tr-identity-
       field-label below for where each is consumed. Family is aliased
       (var(...)), not copied, so switching to a different existing
       TennisRoots face needs only this one line, no selector edits. */
    --tr-identity-field-label-font-family: var(--tr-font-franklin-demi);
    --tr-identity-field-label-font-size: 10px;
    --tr-identity-field-label-letter-spacing: 0.18em;
    --tr-identity-field-label-opacity: 1;

    /* ─── Identity field values (Sasha Gorup / sgorup@burgheria.it) ─── */
    --tr-identity-field-value-font-family: var(--tr-font-franklin-book);
    --tr-identity-field-value-font-size: 21px;
    --tr-identity-field-value-letter-spacing: normal;
    --tr-identity-field-value-opacity: 1;

    /* ─── Dividers (both horizontal lines in this card) ─── */
    /* Color and opacity are deliberately separate controls, not one rgba
       value -- so either can be tuned without touching the other. #ffffff
       + 0.3 together reproduce the card's own current border color
       exactly (rgba(255, 255, 255, 0.3), see --tr-question-card-border-
       color in tr-question.css) without hard-coding that rgba here. */
    --tr-identity-divider-color: #ffffff;
    --tr-identity-divider-opacity: 1;
    --tr-identity-divider-height: 1px;
    --tr-identity-divider-width: 100%;
    /* Visual-only horizontal nudge (transform, same technique as the
       provider icon's own -x/-y above) -- never affects surrounding
       layout. Negative = left, positive = right. */
    --tr-identity-divider-x: 0px;

    /* ─── Vertical spacing in the data area ───
       Each token is the CURRENT rendered distance for that exact
       relationship (measured at 375px, all effectively 8px today --
       they previously all came from one shared flex gap on the card,
       see .tr-identity-card below for why that was replaced with these
       six explicit, independently-tunable margins). The two
       relationships this task does not name -- provider row -> first
       divider, and MODIFICA -> SÌ SONO IO -- are intentionally left
       reading the card's own existing --tr-space-md token, unchanged,
       rather than exposed here: neither belongs to the NOME/EMAIL data
       area this task calibrates. */
    --tr-identity-divider-to-name-label-gap: 8px;
    --tr-identity-name-label-to-value-gap: 8px;
    --tr-identity-name-value-to-divider-gap: 8px;
    --tr-identity-divider-to-email-label-gap: 8px;
    --tr-identity-email-label-to-value-gap: 8px;
    --tr-identity-email-value-to-actions-gap: 20px;

    /* ─── Confirmation action ───
       edit-to-confirm-gap is 8px, this task's own measured current
       distance between MODIFICA and SÌ SONO IO (previously the card's
       shared --tr-space-md, which also computes to 8px at 375px -- this
       token now owns that one relationship independently, so it no
       longer moves if --tr-space-md is retuned elsewhere in the app).
       confirm-letter-spacing is 'normal', SÌ SONO IO's own current
       tracking (.tr-option-button, its shared base class, declares no
       letter-spacing at all) -- scoped to .tr-identity-confirm only, so
       it never touches MODIFICA, INDIETRO, the header buttons, or any
       other TROptionButton (questionnaire options, "Registrati con
       Email o Telefono", ...). */
    --tr-identity-edit-to-confirm-gap: 28px;
    --tr-identity-confirm-letter-spacing: 1.5px;

    /* ─── "Usa un altro account" (top-left action) ───
       Now a real action (see .tr-identity-switch-account below), not an
       informational label sharing --tr-identity-source-font-size with
       "Google" anymore -- an action and a paired data label don't need
       to move together. Every value below is this text's own CURRENT
       rendered equivalent (same family, same 13px, same tracking it had
       as "Dati ricevuti da:", opacity 1) so swapping the text/action in
       changes as little else as possible; x/y are new, 0px/0px (no
       offset yet), same visual-transform technique as the provider
       icon's own -x/-y above. */
    --tr-identity-switch-account-font-family: var(--tr-font-franklin-demi);
    --tr-identity-switch-account-font-size: 13px;
    --tr-identity-switch-account-letter-spacing: 0.01em;
    --tr-identity-switch-account-opacity: 1;
    --tr-identity-switch-account-x: 0px;
    --tr-identity-switch-account-y: 0px;

    /* ─── Edit-mode inputs (NOME) -- UNUSED, kept for reference only ───
       These seven tokens gave the first edit-mode pass its own separate
       "form box" typography/border/height system. The edit state has
       since been redesigned to look like plain text, reusing the
       NORMAL display value's own tokens instead (--tr-identity-field-
       value-font-family/-font-size/-letter-spacing/-opacity, see
       .tr-identity-edit-input below) -- so nothing in this file
       currently reads any of the seven tokens below. Left defined,
       unused, rather than deleted, per this task's own instruction; a
       future visual direction could still reintroduce a boxed style by
       wiring .tr-identity-edit-input back to these. */
    --tr-identity-edit-input-font-family: var(--tr-font-franklin-book-condensed);
    --tr-identity-edit-input-font-size: 14px;
    --tr-identity-edit-input-letter-spacing: normal;
    --tr-identity-edit-input-color: var(--tr-color-text-dim);
    --tr-identity-edit-input-border-color: #ffffff;
    --tr-identity-edit-input-border-opacity: 0.5;
    --tr-identity-edit-input-height: 32px;

    /* ─── Edit-mode focus indication ───
       The only visual cue that a name is being edited now that the
       boxed input appearance is gone: a thin underline, shown only on
       :focus (see .tr-identity-edit-input:focus below). Reserved at
       this same height even when unfocused (transparent) so focusing
       never shifts layout. Color is the existing lime accent
       (--tr-color-green, not a new token -- not requested) at this
       opacity. */
    --tr-identity-edit-focus-line-height: 1px;
    --tr-identity-edit-focus-line-opacity: 0.7;
}

.tr-identity-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--tr-question-card-bg);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid var(--tr-question-card-border-color);
    border-radius: var(--tr-question-card-radius);
    padding: var(--tr-question-card-padding);
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* No flex `gap` here (deliberately removed): the data area below
       needs six independently-tunable vertical distances (see the
       :root block above), which a single uniform gap can't provide --
       every child below now carries its own explicit margin-top
       instead, each reading its own token or, for the two relationships
       outside this task's scope, the same --tr-space-md the card used
       before. */
}

/* ─── "Dati ricevuti da: Google [icon]" ───
   Left label / right value, matching the row layout used elsewhere for a
   label-and-value pairing (e.g. .tr-registration-existing's own text
   flow), reused here as a two-ended flex row since this pairing needs an
   icon on the value side too. */
.tr-identity-provider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-sm);
}

/* "Usa un altro account" -- a real <button>, not a div: reset the
   default button chrome, keep it visually inline with the row, and make
   it read as tappable (underline + pointer cursor). Independent
   typography controls -- see :root above. */
.tr-identity-switch-account {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: var(--tr-identity-switch-account-font-family);
    font-size: var(--tr-identity-switch-account-font-size);
    letter-spacing: var(--tr-identity-switch-account-letter-spacing);
    opacity: var(--tr-identity-switch-account-opacity);
    color: var(--tr-hero-cta-description-color);
    transform: translate(var(--tr-identity-switch-account-x), var(--tr-identity-switch-account-y));
}

.tr-identity-switch-account:active {
    opacity: 0.7;
}

.tr-identity-provider-value {
    display: flex;
    align-items: center;
    gap: var(--tr-space-xs);
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-identity-source-font-size);
    color: var(--tr-color-text-dim);
}

.tr-identity-provider-icon {
    width: var(--tr-identity-provider-icon-size);
    height: var(--tr-identity-provider-icon-size);
    display: block;
    filter: var(--tr-registration-provider-icon-filter);
    /* Purely visual -- transform is taken out of normal flow, so this
       never shifts the row's layout, the Google text, gaps or the
       divider. See --tr-identity-provider-icon-x/-y above. */
    transform: translate(var(--tr-identity-provider-icon-x), var(--tr-identity-provider-icon-y));
}

/* ─── Dividers ───
   Both horizontal lines in this card share the same color/opacity/
   height/width/x controls (see :root above); only their own vertical
   position differs, set below via each one's own structural selector
   (never a class added to the divider itself, since which relationship
   a given divider belongs to is already unambiguous from its DOM
   neighbor). height/width are now real, explicit properties (previously
   1px/100% only implicitly, via a fixed height and flex stretch) so
   they are genuine controls, not just a description of the accidental
   default. */
.tr-identity-divider {
    height: var(--tr-identity-divider-height);
    width: var(--tr-identity-divider-width);
    background-color: var(--tr-identity-divider-color);
    opacity: var(--tr-identity-divider-opacity);
    transform: translateX(var(--tr-identity-divider-x));
}

/* Provider row -> first divider: not part of this task's data-area
   calibration (the provider row itself is out of scope) -- kept reading
   the card's own original --tr-space-md, unchanged. */
.tr-identity-provider-row + .tr-identity-divider {
    margin-top: var(--tr-space-md);
}

/* NOME value -> second divider. */
.tr-identity-field--name + .tr-identity-divider {
    margin-top: var(--tr-identity-name-value-to-divider-gap);
}

/* ─── NOME / EMAIL fields ───
   Each field is a full-width flex column (stretched to the card's own
   content width by the card's default flex cross-axis behavior, not by
   any manual width/margin), with its label above its value, both
   center-aligned -- see #1 below. .tr-identity-field--name/--email exist
   only so the two fields' internal gap (and the gap leading into each)
   can differ -- see the :root tokens above. */
.tr-identity-field {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.tr-identity-field--name {
    margin-top: var(--tr-identity-divider-to-name-label-gap);
    gap: var(--tr-identity-name-label-to-value-gap);
}

.tr-identity-field--email {
    margin-top: var(--tr-identity-divider-to-email-label-gap);
    gap: var(--tr-identity-email-label-to-value-gap);
}

.tr-identity-field-label {
    font-family: var(--tr-identity-field-label-font-family);
    font-size: var(--tr-identity-field-label-font-size);
    letter-spacing: var(--tr-identity-field-label-letter-spacing);
    opacity: var(--tr-identity-field-label-opacity);
    text-transform: uppercase;
    color: var(--tr-color-green);
}

.tr-identity-field-value {
    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);
    opacity: var(--tr-identity-field-value-opacity);
    color: var(--tr-color-text-dim);
}

/* ─── Edit-mode name row ───
   Holds the two name inputs side by side ("Sasha" "Gorup"), centered as
   ONE group so together they read as the same centered full name the
   normal display mode shows. flex-wrap is the overflow safeguard for
   unusually long names (see .tr-identity-edit-input's own max-width
   too) -- an unbroken pair that doesn't fit wraps to two lines rather
   than overflowing the card; the card's own width is never touched. */
.tr-identity-edit-name-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--tr-space-xs);
    max-width: 100%;
}

/* ─── Edit-mode inputs (NOME) ───
   Deliberately plain text, not a form box: no border/background/radius,
   sized to its own content (see autosizeInput() in tr-identity-card.js
   -- the native `size` attribute, recalculated on input, not a polling
   loop) instead of a fixed width, and reusing the SAME typography the
   normal "Sasha Gorup" display value already uses -- --tr-identity-
   field-value-font-family/-font-size/-letter-spacing/-opacity, the
   user's own calibrated tokens -- so edit mode is visually almost
   indistinguishable from normal mode, per this task. The only reserved
   visual affordance is a 1px transparent bottom border, which turns
   lime only on :focus (see below) -- reserved at that height even when
   unfocused so focusing never shifts the line beneath it. max-width +
   overflow:hidden/ellipsis is the last-resort safeguard for a single
   very long unbroken word the row's own flex-wrap can't help with. */
.tr-identity-edit-input {
    display: inline-block;
    max-width: 100%;
    box-sizing: content-box;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: var(--tr-identity-edit-focus-line-height) solid transparent;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    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);
    opacity: var(--tr-identity-field-value-opacity);
    color: var(--tr-color-text-dim);
    text-align: center;
}

.tr-identity-edit-input:focus {
    border-bottom-color: color-mix(in srgb, var(--tr-color-green) calc(var(--tr-identity-edit-focus-line-opacity) * 100%), transparent);
}

/* Inline validation message ("Nome e cognome sono obbligatori.") --
   plain, minimal: no modal/toast/alert. Not visually calibrated yet,
   same as the inputs above. */
.tr-identity-validation {
    margin: 0;
    font-family: var(--tr-identity-field-label-font-family);
    font-size: var(--tr-header-button-text-size);
    color: var(--tr-color-live);
}

/* ─── MODIFICA / SÌ, SONO IO ───
   Color/typography for both buttons still comes entirely from the
   classes added in TRIdentityCard (.tr-registration-secondary.tr-button
   for MODIFICA, .tr-option-button--selected for SÌ, SONO IO) --
   untouched by this file, except SÌ SONO IO's own scoped tracking below.
   MODIFICA's WIDTH is the one geometry override here (see below). */
.tr-identity-modifica {
    /* EMAIL value -> MODIFICA: the last of the six data-area tokens. */
    margin-top: var(--tr-identity-email-value-to-actions-gap);
    /* Same width/height as INDIETRO -- .tr-question-skip.tr-button in
       tr-question.css already sets both from these exact two global
       tokens (--tr-header-button-width/-height, the same pair REGISTRATI
       /ACCEDI/SALTA share), so reusing them here (rather than inventing
       a new --tr-identity-small-action-* pair) keeps MODIFICA and
       INDIETRO's sizes structurally tied -- retuning either global token
       moves both buttons together, they can never drift apart. Height
       was already this value via .tr-registration-secondary.tr-button;
       only width needed setting -- without it this button stretched to
       the card's own width (this class's parent is a column flex
       container, so an unset/auto cross-size stretches to fill it).
       align-self:center re-centers it now that its width is fixed
       instead of auto-stretched -- see #1's note in the task history for
       why align-items:stretch alone would otherwise pin it to the left
       once width stops being auto. */
    width: var(--tr-header-button-width);
    align-self: center;
}

.tr-identity-confirm {
    /* MODIFICA -> SÌ SONO IO: its own token now, decoupled from
       --tr-space-md (see --tr-identity-edit-to-confirm-gap above). */
    margin-top: var(--tr-identity-edit-to-confirm-gap);
    /* Scoped to this one button only -- see --tr-identity-confirm-
       letter-spacing above for why. */
    letter-spacing: var(--tr-identity-confirm-letter-spacing);
}