/* ============================================
   BLOCKSMITH — Login / Register page
   Additive styles — reuses tokens & components
   from style.css (pixel-panel, pixel-btn, chip,
   pay-label, pay-text-input, pay-status, etc.)
   ============================================ */

.auth-header-nav{ display:flex; }

.auth-hero{
  min-height:calc(100vh - 66px);
  padding:60px 20px;
  align-items:center;
}

.auth-wrap{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  justify-content:center;
}

.auth-card{
  width:100%;
  max-width:420px;
  padding:36px 30px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ===================== SIGNATURE: FLICKERING TORCH ===================== */
.auth-torch{
  position:relative;
  width:24px;
  height:40px;
  margin-bottom:6px;
}
.torch-stick{
  position:absolute;
  left:9px;
  top:16px;
  width:6px;
  height:24px;
  background:var(--wood-dark);
  box-shadow: inset -2px 0 0 rgba(0,0,0,.3);
}
.torch-flame{
  position:absolute;
  left:2px;
  top:0;
  width:20px;
  height:20px;
}
.torch-flame::before{
  content:"";
  position:absolute;
  width:2px;
  height:2px;
  box-shadow:var(--px);
}
.flame-a::before{
  --px:
    8px 0 var(--ember-light),
    6px 2px var(--ember-light), 8px 2px var(--ember-light), 10px 2px var(--ember-light),
    4px 4px var(--ember), 6px 4px var(--ember-light), 8px 4px var(--cream), 10px 4px var(--ember-light), 12px 4px var(--ember),
    4px 6px var(--ember), 6px 6px var(--ember-light), 8px 6px var(--ember-light), 10px 6px var(--ember-light), 12px 6px var(--ember),
    4px 8px var(--ember), 6px 8px var(--ember), 8px 8px var(--ember-light), 10px 8px var(--ember), 12px 8px var(--ember);
  animation: flame-flicker 900ms steps(1) infinite;
}
.flame-b::before{
  --px:
    8px 2px var(--ember-light),
    6px 4px var(--ember-light), 8px 4px var(--cream), 10px 4px var(--ember-light),
    4px 6px var(--ember), 6px 6px var(--ember-light), 8px 6px var(--ember-light), 10px 6px var(--ember-light), 12px 6px var(--ember),
    6px 8px var(--ember), 8px 8px var(--ember-light), 10px 8px var(--ember);
  animation: flame-flicker 900ms steps(1) infinite reverse;
}
@keyframes flame-flicker{
  0%, 40%{ opacity:1; }
  50%, 90%{ opacity:.45; }
  100%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .torch-flame{ animation:none !important; opacity:1 !important; }
}

.auth-eyebrow{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  color:var(--ember-light);
  letter-spacing:.5px;
  margin-bottom:22px;
}

/* ===================== TABS ===================== */
.auth-tabs{
  display:flex;
  width:100%;
  gap:8px;
  margin-bottom:24px;
}
.auth-tab{
  flex:1;
}

/* ===================== FORM ===================== */
.auth-form{
  width:100%;
  display:flex;
  flex-direction:column;
  text-align:left;
}
.auth-form .pay-text-input{ width:100%; }

.auth-password-wrap{
  position:relative;
  display:flex;
}
.auth-password-wrap .pay-text-input{
  flex:1;
  padding-right:44px;
}
.auth-eye-toggle{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  color:var(--text-dim);
  cursor:pointer;
}
.auth-eye-toggle:hover{ color:var(--cream); }
.auth-eye-toggle[aria-pressed="true"]{ color:var(--grass-light); }

/* Eye icon (open) */
.icon-eye-open::before{
  --px:
    4px 0 currentColor, 6px 0 currentColor,
    2px 2px currentColor, 8px 2px currentColor,
    0px 4px currentColor, 4px 4px currentColor, 6px 4px currentColor, 10px 4px currentColor,
    2px 6px currentColor, 8px 6px currentColor,
    4px 8px currentColor, 6px 8px currentColor;
}
/* Eye icon (closed / slashed) */
.icon-eye-closed::before{
  --px:
    0px 6px currentColor, 2px 4px currentColor, 4px 6px currentColor,
    6px 6px currentColor, 8px 4px currentColor, 10px 6px currentColor,
    0px 0px currentColor, 2px 2px currentColor, 4px 4px currentColor,
    6px 6px currentColor, 8px 8px currentColor, 10px 10px currentColor;
}

.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 18px;
  flex-wrap:wrap;
}

.auth-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text-dim);
  cursor:pointer;
  user-select:none;
}
.auth-checkbox input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.auth-checkbox-box{
  width:20px;
  height:20px;
  flex-shrink:0;
  background:var(--bg-deep);
  border:2px solid var(--stone);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-check-mark{ opacity:0; transform:scale(1.1); }
.auth-checkbox input:checked ~ .auth-checkbox-box{ border-color:var(--grass-light); }
.auth-checkbox input:checked ~ .auth-checkbox-box .auth-check-mark{ opacity:1; }
.auth-checkbox input:focus-visible ~ .auth-checkbox-box{ outline:2px solid var(--ember); outline-offset:2px; }

.auth-link{
  font-size:13px;
  color:var(--ember-light);
  text-decoration:none;
}
.auth-link:hover{ text-decoration:underline; }

.auth-submit{ width:100%; margin-top:4px; }

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:var(--text-dim);
  font-size:12px;
}
.auth-divider::before, .auth-divider::after{
  content:"";
  flex:1;
  height:2px;
  background:var(--stone);
}

.auth-fineprint{
  margin-top:22px;
  font-size:12px;
  color:var(--text-dim);
  text-align:center;
}
.auth-fineprint a{
  color:var(--ember-light);
  text-decoration:none;
  margin-left:3px;
}
.auth-fineprint a:hover{ text-decoration:underline; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:480px){
  .auth-hero{ padding:36px 14px; }
  .auth-card{ padding:28px 20px 20px; }
}