/* ============================================================
   AUTH PAGES  —  shared by login.html and signup.html.

   Structure taken from elevenlabs.io/app/sign-in: one centred 360px
   column on white, wordmark, heading, stacked provider buttons, a rule,
   then the email field and a full-width primary button. Their measured
   values: column 360, controls 46px tall at radius 12 with a 0.8px
   rgba(0,0,0,.1) hairline, labels and button text 14/20 weight 500,
   heading 24/30 weight 600. Their 46px height and 12px radius are what
   this site's buttons already use, so the two systems meet cleanly —
   only the palette is ours (#0b5cff, #00053d, #67768b).

   No passwords anywhere: Google, or a one-time code by email.

   NO BACKEND EXISTS. Nothing is sent, checked or stored — see the
   handlers in auth.js and the notice each page shows.

   Tokens are copied from index.html's :root, not imported; there is no
   build step. Change one, change both.
   ============================================================ */
:root{
  --navy:      #00053d;
  --blue:      #0b5cff;
  --blue-deep: #0059b3;
  --pale-blue: #f3f8ff;
  --ink:       #00031f;
  --muted:     #67768b;
  --line:      rgba(0,5,61,.12);
  --wash:      #f7f7f8;
  --red:       #c9372c;

  --r:  12px;
  --col: 360px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--sans);
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; }
svg{ display:block; }
.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;
}

/* ---------- frame ---------- */
.auth{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 20px 40px;
}
.auth__col{ width:100%; max-width:var(--col); }
.auth__brand{
  display:block;
  margin-bottom:26px;
  font-size:24px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  text-align:center;
  color:var(--navy);
}
.auth__title{
  margin:0 0 6px;
  font-size:24px;
  font-weight:600;
  line-height:30px;
  letter-spacing:-.02em;
  text-align:center;
  color:var(--ink);
}
.auth__sub{
  margin:0 0 28px;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  text-align:center;
  color:var(--muted);
}

/* ---------- provider button ---------- */
.sso{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:46px;
  border:.8px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  color:var(--navy);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}
.sso:hover{ background:var(--pale-blue); border-color:rgba(11,92,255,.35); }
.sso:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* the mark sits at the left edge while the label stays optically centred
   in the whole button, which is how the reference does it */
.sso__mark{
  position:absolute;
  left:16px; top:50%;
  width:18px; height:18px;
  margin-top:-9px;
}

/* ---------- or-rule ---------- */
.rule{
  display:flex;
  align-items:center;
  gap:14px;
  margin:22px 0;
  font-size:12px;
  line-height:16px;
  color:var(--muted);
}
.rule::before,
.rule::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

/* ---------- fields ---------- */
.field label{
  display:block;
  margin-bottom:7px;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  color:var(--navy);
}
.field input{
  width:100%;
  height:46px;
  padding:4px 16px;
  border:.8px solid var(--line);
  border-radius:var(--r);
  background:transparent;
  font:400 14px/38px var(--sans);
  color:var(--ink);
}
.field input::placeholder{ color:#8993a4; }
.field input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(11,92,255,.16);
}
.field input[aria-invalid="true"]{ border-color:var(--red); }
.field__error{
  margin:7px 0 0;
  font-size:13px;
  line-height:18px;
  color:var(--red);
}
.field__error:empty{ display:none; }

/* ---------- primary ---------- */
.auth__submit{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:46px;
  margin-top:16px;
  border-radius:var(--r);
  background:var(--blue);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:20px;
  cursor:pointer;
  transition:background-color .18s ease;
}
.auth__submit:hover{ background:var(--blue-deep); }
.auth__submit:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.auth__alt{
  margin:22px 0 0;
  font-size:14px;
  line-height:20px;
  text-align:center;
  color:var(--muted);
}
.auth__alt a{ color:var(--navy); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.auth__alt a:hover{ color:var(--blue); }

.auth__terms{
  margin:22px 0 0;
  font-size:12px;
  line-height:18px;
  text-align:center;
  color:var(--muted);
}
/* spans, not links — there is no terms or privacy page on this site yet */
.auth__terms span{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }

/* ---------- step 2: the code ---------- */
.step[hidden]{ display:none; }
.otp{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.otp input{
  width:100%;
  height:52px;
  padding:0;
  border:.8px solid var(--line);
  border-radius:var(--r);
  background:transparent;
  font:600 20px/52px var(--sans);
  text-align:center;
  color:var(--ink);
}
.otp input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(11,92,255,.16);
}
.otp input[aria-invalid="true"]{ border-color:var(--red); }
.otp-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  font-size:13px;
  line-height:18px;
  color:var(--muted);
}
.otp-actions button{
  font-size:13px;
  font-weight:500;
  color:var(--blue);
  cursor:pointer;
}
.otp-actions button:hover{ text-decoration:underline; }
.otp-actions button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
.sent-to{
  margin:0 0 20px;
  font-size:14px;
  line-height:20px;
  text-align:center;
  color:var(--muted);
}
.sent-to b{ color:var(--navy); font-weight:600; }

/* ---------- the honest bit ----------
   The only outcome either page can truthfully produce. role="status" so
   it is announced when it appears. */
.auth__status{
  display:none;
  margin-top:20px;
  padding:13px 15px;
  border:1px solid #ffd9a8;
  border-radius:var(--r);
  background:#fff8ee;
  font-size:13px;
  line-height:19px;
  color:#5f4200;
}
.auth__status.is-shown{ display:block; }
.auth__status b{ font-weight:600; }

.auth__foot{
  margin:0;
  padding:0 20px 32px;
  font-size:13px;
  line-height:18px;
  text-align:center;
  color:var(--muted);
}
.auth__foot a:hover{ text-decoration:underline; }

@media (max-width:420px){
  .auth{ padding:32px 16px; }
  .otp{ gap:6px; }
  .otp input{ height:48px; font-size:18px; line-height:48px; }
}