/* =========================================================================
   City Rivals — account screen (js/screen-auth.js)

   Everything here is scoped under .auth, the one root that module owns.
   Only tokens from styles.css are used: no new colour, no new radius, no
   shadow, no gradient. The components (.panel .tabs .field .input .btn
   .notice .switch .deed-stats .act) all come from styles.css — what is left
   below is the column itself and the two things that genuinely did not
   exist: the recovery-code well and the acknowledgement row.
   ========================================================================= */

/* One centred column, same measure as the home screen, so arriving here does
   not feel like arriving somewhere else. */
.auth{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;justify-content:center;
  padding:var(--s5) var(--s4);
}
.auth .auth-col{
  width:100%;max-width:420px;margin:auto;
  display:flex;flex-direction:column;gap:var(--s4);
}

.auth .auth-top{display:flex}
.auth .auth-back .ic{transform:rotate(180deg)}

.auth .auth-head{display:flex;flex-direction:column;gap:var(--s2);text-align:center}
.auth .auth-head h1{
  font-family:var(--font-display);font-size:var(--t-2xl);font-weight:700;
  letter-spacing:-.02em;line-height:1.15;
}
.auth .auth-head p{
  color:var(--ink-2);font-size:var(--t-sm);text-wrap:pretty;
  max-width:42ch;margin:0 auto;
}

/* the panel body stacks; the hairline and the space do the dividing */
.auth .panel-body{display:flex;flex-direction:column;gap:var(--s3)}
.auth .panel-head{gap:var(--s3)}

/* "(optional)" is an aside inside an uppercase label, not part of the label */
.auth .field > label .dim{text-transform:none;letter-spacing:0;font-weight:500}
.auth .auth-lede{font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}

.auth .auth-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);flex-wrap:wrap;
}
.auth .auth-foot .hint{min-width:0}

/* ---- the recovery code -------------------------------------------------
   A flat well on --surface-2, not a second card: no border, no shadow. The
   code itself is the largest thing on the screen because it is the only
   thing on the screen that cannot be got back. */
.auth .auth-code{
  display:flex;flex-direction:column;align-items:center;gap:var(--s1);
  padding:var(--s4) var(--s3);
  background:var(--surface-2);
  border-radius:var(--r);
  text-align:center;
}
.auth .auth-code strong{
  font-size:var(--t-2xl);font-weight:700;line-height:1.2;
  letter-spacing:.1em;
  overflow-wrap:anywhere;
  cursor:text;
  -webkit-user-select:all;user-select:all;
}
.auth .btn.is-copied{color:var(--positive);border-color:var(--positive)}

/* the acknowledgement sits on the same well tone as the code, so the two
   read as one step rather than a control that happens to be nearby */
.auth .auth-ack{
  padding:var(--s2) var(--s3);
  background:var(--surface-2);
  border-radius:var(--r);
}
.auth .auth-ack > span > b{font-weight:700}

/* a copy sink for browsers without the async clipboard — never visible */
.auth .auth-copy-sink{position:absolute;left:-9999px;top:0;opacity:0;width:1px;height:1px}

/* ---- redeeming a code --------------------------------------------------- */
.auth .auth-code-input{
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
}
.auth .auth-code-input::placeholder{letter-spacing:.14em;font-weight:600}

/* ---- signed in ---------------------------------------------------------- */
.auth .auth-id{gap:0;line-height:1.25;padding-bottom:var(--s3)}
.auth .auth-id strong{
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:700;
  letter-spacing:-.01em;overflow-wrap:anywhere;
}
.auth .auth-id span{font-size:var(--t-sm)}

/* the divided facts run edge to edge, so they need no padding of their own */
.auth .deed-stats{border-left:0;border-right:0}

/* ---- narrow ------------------------------------------------------------- */
@media (max-width:420px){
  .auth{padding:var(--s4) var(--s3)}
  .auth .auth-col{gap:var(--s3)}
  .auth .auth-code strong{font-size:var(--t-xl);letter-spacing:.08em}
}

/* Long words in a display name must never push the panel wider than the
   viewport at the smallest size we support. */
@media (max-width:360px){
  .auth .auth-id strong{font-size:var(--t-lg)}
}