/**
 * Impronta — Auth (login, register, forgot, reset, profile, verify)
 * Dipende da tokens.css, base.css, components.css
 */

/* ============================================================
   SHARED AUTH PAGE WRAPPER
   ============================================================ */
.auth-page {
  padding: 64px 0 80px;
}
.auth-page--narrow { max-width: 440px; }
.auth-page--mid    { max-width: 520px; }

/* ── Auth header ──────────────────────────────────────────── */
.auth-header {
  text-align:    center;
  margin-bottom: var(--sp-8);
}
.auth-header__eyebrow {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .20em;
  color:          var(--gold);
  opacity:        .7;
  margin-bottom:  var(--sp-3);
  display:        block;
}
.auth-header__h1 {
  font-size:      28px;
  font-weight:    var(--fw-light);
  color:          var(--ink);
  letter-spacing: -.02em;
  margin-bottom:  0;
}
.auth-header__sub {
  font-size:    14px;
  color:        var(--ink55);
  margin-top:   var(--sp-2);
  line-height:  var(--lh-base);
  font-weight:  var(--fw-light);
}

/* UUID-linked badge */
.auth-uuid-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  margin-top:    var(--sp-3);
  padding:       7px 16px;
  background:    var(--sage-bg);
  border:        0.5px solid var(--sage-ln);
  border-radius: var(--rFull);
}
.auth-uuid-badge__icon  { color: var(--sage); font-size: 13px; }
.auth-uuid-badge__label { font-family: var(--mono); font-size: 11px; color: var(--sage); letter-spacing: .04em; }
.auth-uuid-badge__uuid  { font-family: var(--mono); font-size: 9px; color: var(--ink30); }

/* Footer link below card */
.auth-footer-link {
  text-align:  center;
  margin-top:  var(--sp-5);
  font-size:   13px;
  color:       var(--ink30);
}
.auth-footer-link a { color: var(--gold); }

/* ── Google button gap ──────────────────────────────────── */
.auth-google-wrap { margin-bottom: var(--sp-4); }
.auth-google-note {
  font-size:   11px;
  color:       var(--ink30);
  text-align:  center;
  margin:      -4px 0 var(--sp-3);
  line-height: var(--lh-snug);
}
.auth-google-note a { color: var(--ink40); }

/* ── Password field with toggle ──────────────────────────── */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 44px; }

.pw-toggle {
  position:         absolute;
  right:            12px;
  top:              50%;
  transform:        translateY(-50%);
  background:       none;
  border:           none;
  cursor:           pointer;
  padding:          4px;
  color:            var(--ink30);
  display:          flex;
  align-items:      center;
  transition:       color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover       { color: var(--ink55); }
.pw-toggle.is-visible  { color: var(--gold); }

/* ── Lang selector (register) ────────────────────────────── */
.lang-selector {
  display:   flex;
  gap:       7px;
  flex-wrap: wrap;
}
.lang-selector__btn {
  flex:            1;
  min-width:       68px;
  padding:         9px 6px;
  border-radius:   var(--r);
  font-size:       12px;
  font-weight:     var(--fw-medium);
  cursor:          pointer;
  transition:      all var(--t-fast);
  font-family:     var(--font);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  border:          0.5px solid var(--ln2);
  background:      transparent;
  color:           var(--ink55);
}
.lang-selector__btn:hover  { border-color: var(--ln3); color: var(--ink70); }
.lang-selector__btn.active { background: var(--gold-bg); border-color: var(--gold-ln); color: var(--gold); }

/* ── UUID optional field box ─────────────────────────────── */
.auth-uuid-box {
  padding:       14px 16px;
  background:    var(--ink06);
  border-radius: var(--r);
  border:        0.5px solid var(--ln2);
  margin-bottom: var(--sp-4);
}

/* ── Terms checkbox ─────────────────────────────────────── */
.auth-terms-label {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
  font-size:   13px;
  color:       var(--ink55);
  line-height: var(--lh-snug);
  cursor:      pointer;
}
.auth-terms-label input[type="checkbox"] {
  margin-top:   3px;
  accent-color: var(--gold);
  flex-shrink:  0;
}
.auth-terms-label a { color: var(--gold); }

/* ============================================================
   VERIFY PENDING PAGE
   ============================================================ */
.verify-page {
  padding-top:    64px;
  padding-bottom: 80px;
  max-width:      540px;
  text-align:     center;
}
.verify-page__icon {
  width:           60px;
  height:          60px;
  border-radius:   var(--rFull);
  margin:          0 auto var(--sp-6);
  background:      var(--gold-bg);
  border:          0.5px solid var(--gold-ln);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       24px;
  opacity:         .7;
}
.verify-page__h1 {
  font-size:      22px;
  font-weight:    var(--fw-light);
  letter-spacing: -.02em;
  margin-bottom:  var(--sp-3);
}
.verify-page__body {
  font-size:    14px;
  color:        var(--ink55);
  line-height:  var(--lh-loose);
  margin-bottom: var(--sp-2);
  font-weight:  var(--fw-light);
}
.verify-page__email-label {
  font-size:    13px;
  color:        var(--ink40);
  margin-bottom: var(--sp-1);
  font-weight:  var(--fw-light);
}
.verify-page__email {
  font-size:      14px;
  font-weight:    var(--fw-medium);
  margin-bottom:  var(--sp-5);
  word-break:     break-all;
  color:          var(--ink);
}
.verify-page__spam {
  font-size:    12px;
  color:        var(--ink30);
  line-height:  var(--lh-base);
  margin-bottom: var(--sp-6);
  font-weight:  var(--fw-light);
}
.verify-page__actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  align-items:    center;
}
.verify-page__actions .btn { width: 100%; max-width: 320px; }

.btn--text-link {
  background:      none;
  border:          none;
  color:           var(--ink40);
  text-decoration: underline;
  font-size:       12px;
  cursor:          pointer;
  font-family:     var(--font);
  transition:      color var(--t-fast);
}
.btn--text-link:hover { color: var(--ink55); }

/* ============================================================
   PROFILE / SETTINGS PAGE
   ============================================================ */
.profile-page {
  padding: 48px 0 80px;
  max-width: 520px;
}

.profile-page__header  { margin-bottom: var(--sp-6); }
.profile-page__eyebrow {
  font-family:    var(--mono);
  font-size:      9px;
  letter-spacing: .20em;
  color:          var(--gold);
  opacity:        .65;
  text-transform: uppercase;
  margin-bottom:  var(--sp-1);
  display:        block;
}
.profile-page__h1 {
  font-size:      22px;
  font-weight:    var(--fw-regular);
  color:          var(--ink);
  margin-bottom:  5px;
  letter-spacing: -.02em;
}
.profile-page__sub { font-size: 12px; color: var(--ink40); font-weight: var(--fw-light); }

/* Card section label */
.profile-section-label {
  font-family:    var(--mono);
  font-size:      9px;
  font-weight:    var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--ink30);
  margin-bottom:  var(--sp-3);
  display:        block;
}

/* Bodygraph linked row */
.profile-bg-row {
  display:     flex;
  align-items: center;
  gap:         12px;
}
.profile-bg-icon {
  width:           38px;
  height:          38px;
  border-radius:   var(--rFull);
  background:      var(--sage-bg);
  border:          0.5px solid var(--sage-ln);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       16px;
  color:           var(--sage);
  flex-shrink:     0;
}
.profile-bg-linked   { font-size: 13px; color: var(--sage); font-weight: var(--fw-medium); }
.profile-bg-uuid     { font-family: var(--mono); font-size: 10px; color: var(--ink30); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-bg-link     { font-size: 12px; color: var(--gold); flex-shrink: 0; }

/* Stack of cards with spacing */
.profile-card-stack .card + .card { margin-top: var(--sp-3); }

/* Danger zone */
.profile-danger-zone {
  padding:       18px 20px;
  border:        0.5px solid var(--terra-ln);
  border-radius: var(--rL);
  background:    var(--terra-bg);
  margin-top:    var(--sp-8);
}
.profile-danger-zone__title {
  font-family:    var(--mono);
  font-size:      9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--terra);
  opacity:        .8;
  margin-bottom:  var(--sp-3);
  display:        block;
}
.profile-danger-zone__text {
  font-size:    12px;
  color:        var(--ink40);
  margin-bottom: var(--sp-3);
  line-height:  var(--lh-base);
  font-weight:  var(--fw-light);
}

/* Google-only note */
.profile-google-only {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  background:    var(--ink06);
  border-radius: var(--r);
  border:        0.5px solid var(--ln2);
  font-size:     12px;
  color:         var(--ink40);
  line-height:   var(--lh-snug);
}
.profile-google-only svg { flex-shrink: 0; }

/* ── Campo con prefisso (@handle) ──────────────────────────────────────────
   La chiocciola e' parte dell'indirizzo ma non del valore: mostrarla dentro il
   campo evita che qualcuno la scriva a mano e si veda rifiutare l'handle da un
   pattern che non la ammette. */
.form-prefix { position: relative; display: block; }
.form-prefix__at {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink30); font-size: 15px; pointer-events: none;
}
.form-input--prefixed { padding-left: 30px; }