/* ============================================================
   AWGCOR — passwordless sign-in UI
   Uses the tokens already defined in awgcor.css.
   ========================================================= */

.auth-card{
  max-width:520px;margin:0 auto;background:var(--paper);
  border:1px solid var(--paper-line);border-radius:var(--r-lg);
  padding:clamp(26px,5vw,44px);box-shadow:var(--sh-1);
}

.auth-step{display:none}
.auth-step.is-active{display:block;animation:auth-in .32s cubic-bezier(.22,.8,.3,1) both}
@keyframes auth-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .auth-step.is-active{animation:none}
}

.auth-card h2{
  font-size:clamp(24px,3.4vw,32px);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 10px;color:var(--t-ink-hi);
}
.auth-card .auth-sub{
  margin:0 0 26px;color:var(--t-ink-mid);font-size:16px;line-height:1.6;
}
.auth-card .auth-sub b{color:var(--t-ink-hi);font-weight:600;word-break:break-word}

.auth-field{margin-bottom:18px}
.auth-field label{
  display:block;font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--t-ink-hi);margin-bottom:7px;
}
.auth-field .auth-hint{
  display:block;margin-top:7px;font-size:13px;color:var(--t-ink-low);line-height:1.5;
}

.auth-input{
  width:100%;box-sizing:border-box;padding:14px 16px;font:inherit;font-size:16px;
  color:var(--t-ink-hi);background:var(--paper-soft);
  border:1px solid var(--paper-line);border-radius:var(--r-sm);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auth-input::placeholder{color:var(--t-ink-low)}
.auth-input:focus{
  outline:none;background:var(--paper);border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(47,95,255,.14);
}
.auth-input:disabled{opacity:.55;cursor:not-allowed}

/* The code box: monospaced and widely tracked so a 6-digit
   code is easy to read back off a phone. */
.auth-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px;font-weight:700;text-align:center;
  letter-spacing:.42em;text-indent:.42em;padding:16px;
}

.auth-btn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 22px;font:inherit;font-size:16px;font-weight:600;
  color:#fff;background:var(--blue);border:0;border-radius:var(--r-sm);
  cursor:pointer;transition:background .18s ease,transform .12s ease,opacity .18s ease;
}
.auth-btn:hover:not(:disabled){background:var(--blue-deep)}
.auth-btn:active:not(:disabled){transform:translateY(1px)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed}

.auth-btn-ghost{
  width:100%;margin-top:10px;padding:13px 22px;font:inherit;font-size:15px;font-weight:500;
  color:var(--t-ink-mid);background:none;border:1px solid var(--paper-line);
  border-radius:var(--r-sm);cursor:pointer;transition:border-color .18s,color .18s;
}
.auth-btn-ghost:hover:not(:disabled){border-color:var(--line-l2);color:var(--t-ink-hi)}
.auth-btn-ghost:disabled{opacity:.5;cursor:not-allowed}

/* Spinner shown while a request is in flight. */
.auth-spin{
  width:17px;height:17px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:auth-spin .6s linear infinite;display:none;
}
.auth-btn.is-busy .auth-spin{display:block}
.auth-btn.is-busy .auth-btn-text{opacity:.75}
@keyframes auth-spin{to{transform:rotate(360deg)}}

.auth-msg{
  display:none;margin:0 0 20px;padding:13px 16px;border-radius:var(--r-sm);
  font-size:14.5px;line-height:1.55;
}
.auth-msg.is-shown{display:block}
.auth-msg.is-error{background:rgba(229,72,77,.09);color:#A3242A;border:1px solid rgba(229,72,77,.26)}
.auth-msg.is-ok{background:rgba(34,229,167,.10);color:#0B6B4D;border:1px solid rgba(34,229,167,.30)}

.auth-foot{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--paper-line);
  font-size:14px;color:var(--t-ink-low);text-align:center;line-height:1.6;
}
.auth-foot a,.auth-link{
  color:var(--blue);text-decoration:none;font-weight:600;
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
}
.auth-foot a:hover,.auth-link:hover{text-decoration:underline}
.auth-link:disabled{color:var(--t-ink-low);cursor:not-allowed;text-decoration:none}

.auth-legal{
  margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--t-ink-low);text-align:center;
}
.auth-legal a{color:var(--t-ink-mid);text-decoration:underline}

/* "or" rule between the sign-in form and the sign-up button. */
.auth-divider{
  display:flex;align-items:center;gap:14px;margin:24px 0 18px;
  color:var(--t-ink-low);font-size:13px;font-weight:500;
}
.auth-divider::before,.auth-divider::after{
  content:"";flex:1;height:1px;background:var(--paper-line);
}

/* Secondary call to action — clearly a route out of this page,
   not a second way to submit the form above it. */
.auth-btn-alt{
  display:flex;align-items:center;justify-content:center;
  width:100%;box-sizing:border-box;padding:14px 22px;
  font-size:15.5px;font-weight:600;text-decoration:none;
  color:var(--t-ink-hi);background:var(--paper-soft);
  border:1px solid var(--paper-line);border-radius:var(--r-sm);
  transition:background .18s ease,border-color .18s ease;
}
.auth-btn-alt:hover{background:var(--paper-warm);border-color:var(--line-l2)}

/* Section label inside the longer sign-up form. */
.auth-legend{
  margin:26px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--paper-line);
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--t-ink-low);
}
.auth-legend:first-child{margin-top:0}

/* Two fields side by side, stacking on narrow screens. */
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){
  .auth-row{grid-template-columns:1fr;gap:0}
}

/* Native select needs the arrow room and matching type colour. */
select.auth-input{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767F92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}
select.auth-input:invalid{color:var(--t-ink-low)}