/* Sign-in gate — the full-screen overlay shown until there is a session. */

/* `hidden` sets display:none in the UA sheet, which any author `display` beats.
   Both of these carry one (.app is a grid, .auth-gate a flex), so without this the
   gate and the app would render on top of each other. */
.auth-gate[hidden],
.app[hidden]{display:none !important;}

.auth-gate{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(1100px 600px at 15% -10%, var(--wash-a) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, var(--wash-b) 0%, transparent 55%),
    var(--paper);
}

.auth-card{
  width:100%;
  max-width:380px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:32px 30px 26px;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:26px;
}
/* The icon is drawn on an app-icon canvas, so the wallet fills only the middle
   ~60% of it. Drawn at 52px and pulled in by the margin, the wallet itself fills
   the 34px the row lays out for, rather than shrinking to 20px inside it. */
.auth-mark{
  width:52px;
  height:52px;
  margin:-9px;
  flex-shrink:0;
}
/* Caps and 0.05em tracking, per the brand sheet. */
.auth-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.05em;
}

.auth-title{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 6px;
}
.auth-sub{
  font-size:12.5px;
  line-height:1.55;
  color:var(--text-dim);
  margin:0 0 22px;
}

.auth-form{display:flex; flex-direction:column;}

/* A label and its input, wrapped so a mode can hide the pair — a reset asks for
   no password, and a recovery for no email. A column, like the form, so the
   label keeps the bottom margin an inline label would drop. */
.auth-field{display:flex; flex-direction:column;}
.auth-field[hidden]{display:none;}

/* Under the password, pulled up into the field's bottom margin so the gap above
   it is smaller than the gap below — it belongs to the field, not to the error box
   or the button that follow. Hidden, it takes nothing, and the field's usual
   spacing is back. The same --teal on --card as the switch link below it: 5.22:1
   light, 7.29:1 dark. */
.auth-forgot{
  align-self:flex-end;
  margin:-8px 0 16px;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:11.5px;
  font-weight:600;
  color:var(--teal);
  cursor:pointer;
}
.auth-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:6px;
}
.auth-input{
  width:100%;
  padding:10px 13px;
  border:1px solid var(--line-input);
  border-radius:9px;
  font-size:13.5px;
  font-family:inherit;
  background:var(--card);
  color:var(--text);
  margin-bottom:16px;
}
.auth-input:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft);
}

/* Password field with its reveal toggle. The margin moves to the wrapper so the
   button positions against the input alone. */
.auth-password{
  position:relative;
  margin-bottom:16px;
}
.auth-password .auth-input{
  margin-bottom:0;
  padding-right:42px;          /* clear of the button */
}
.auth-reveal{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:none;
  border-radius:7px;
  background:transparent;
  color:var(--text-faint);
  cursor:pointer;
}
.auth-reveal:hover{color:var(--text-dim); background:var(--line-soft);}
.auth-reveal:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
.auth-reveal svg[hidden]{display:none;}

.auth-error{
  background:var(--rust-soft);
  color:var(--rust);
  font-size:12.5px;
  line-height:1.5;
  padding:10px 12px;
  border-radius:9px;
  margin:0 0 14px;
}

/* The pending step, shown in place of the form while a confirmation link sits
   unclicked. Teal, not the error box's rust: an account that was created
   successfully has no business arriving in the colour of a failure.
   4.57:1 in light and 6.00:1 in dark, so it clears 4.5:1 on both grounds. */
.auth-notice{
  background:var(--teal-soft);
  color:var(--teal);
  font-size:12.5px;
  line-height:1.5;
  padding:10px 12px;
  border-radius:9px;
  margin:0 0 14px;
}

/* The address, on its own line and in the mono face. Set apart like this a
   mistyped domain is legible at a glance, which is the entire reason this step
   echoes it back — in the form field above it, it was invisible.
   --text rather than --teal: 15.8:1 light, 11.3:1 dark. */
.auth-address{
  font-family:var(--font-mono);
  font-size:13px;
  text-align:center;
  background:var(--teal-soft);
  color:var(--text);
  border-radius:9px;
  padding:11px 12px;
  margin:0 0 16px;
  word-break:break-all;
}

.auth-submit{
  justify-content:center;
  padding:11px 15px;
  font-size:13.5px;
}
/* 0.6, not the 0.35 that .btn:disabled gives every other button. Intended, and
   left alone deliberately: equal specificity, and auth.css loads after
   components.css, so this wins — it is not an accident of the cascade that
   wants correcting. The gate is a card with one control on it, and at 0.35 the
   only thing on screen reads as broken rather than busy. "Creating…" has to
   stay legible while it is the only thing happening. */
.auth-submit:disabled{opacity:0.6; cursor:default;}

.auth-switch{
  margin:18px 0 0;
  text-align:center;
  font-size:12.5px;
  color:var(--text-dim);
}
.auth-switch button{
  background:none;
  border:none;
  padding:0 0 0 4px;
  font-size:12.5px;
  font-weight:600;
  color:var(--teal);
  cursor:pointer;
}

/* Visually hidden but available to screen readers — used on the actions column header. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}