/* Auth pages (login + register) — self-contained Signal-style stylesheet.
   Warm-ember dark, grain overlay, glass surfaces. Pure CSS, no remote @import.
   CSP-safe: every rule below is a class; no inline styles live in the HTML. */

:root{
  --ink:#0b0908; --panel:rgba(255,244,230,.035); --panel-2:rgba(255,244,230,.07);
  --line:rgba(255,234,210,.10); --line-2:rgba(255,234,210,.18);
  --text:#f6eddf; --dim:#a99f8e; --faint:#6f685d;
  --ember:#ff8a4c; --ember-2:#ffb27a; --gold:#ffd8a6;
  --ice:#74c8de; --ice-2:#a7e0ef; --live:#ff5347; --ok:#5fd07a;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}

body.auth-page{
  font-family:var(--body); color:var(--text); -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:
    radial-gradient(120% 80% at 50% -10%, #1a140d 0%, transparent 55%),
    radial-gradient(90% 70% at 110% 110%, #140f0a 0%, transparent 50%),
    var(--ink);
}

/* Film grain — fixed overlay, never intercepts clicks. */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Soft ember glow behind the card. */
.auth-wrap{position:relative; z-index:1; width:100%; max-width:440px}
.auth-glow{
  position:absolute; inset:-18% -14% auto -14%; height:130%; z-index:0;
  filter:blur(64px) saturate(1.3); opacity:.5; border-radius:40px; pointer-events:none;
  background:
    radial-gradient(45% 60% at 30% 32%, #b25a2e 0%, transparent 70%),
    radial-gradient(40% 55% at 74% 60%, #2b5f86 0%, transparent 70%);
  animation:breathe 9s ease-in-out infinite;
}

/* Glass card. */
.auth-card{
  position:relative; z-index:1;
  background:var(--panel); border:1px solid var(--line-2); border-radius:22px;
  padding:clamp(24px,4vw,34px) clamp(22px,4vw,32px) clamp(22px,4vw,30px);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.85);
  backdrop-filter:blur(18px);
  opacity:0; animation:rise .7s .05s cubic-bezier(.2,.7,.2,1) forwards;
}

/* Brand row. */
.auth-brand{display:flex; align-items:center; gap:13px; margin-bottom:22px}
.mark{
  width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:23px; color:#1c1208;
  background:linear-gradient(145deg,var(--ember-2),var(--ember));
  box-shadow:0 6px 22px -6px rgba(255,138,76,.6);
}
.wordmark{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; line-height:1; display:block}
.brand-sub{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:block; margin-top:3px}

/* Heading. */
.auth-eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-2); margin-bottom:7px}
.auth-title{font-family:var(--display); font-weight:700; font-size:clamp(24px,4vw,30px); letter-spacing:-.025em; line-height:1.04}
.auth-lede{margin-top:9px; color:var(--dim); font-size:14px; line-height:1.5}

/* Form. */
.auth-form{display:flex; flex-direction:column; gap:15px; margin-top:24px}
.auth-form[hidden]{display:none}
.field{display:flex; flex-direction:column; gap:7px}
/* the [hidden] attr must beat .field's display so reset sub-fields stay hidden */
.field[hidden]{display:none}
.field > label{font-size:13px; font-weight:600; color:var(--text); letter-spacing:.01em}
.field-hint{font-size:12px; color:var(--faint); line-height:1.4}

.input{
  height:46px; width:100%; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.25); color:var(--text); padding:0 14px;
  font-family:var(--body); font-size:15px; outline:none; transition:.18s;
}
.input::placeholder{color:var(--faint)}
.input:hover{border-color:var(--line-2)}
.input:focus{border-color:rgba(255,138,76,.5); background:rgba(0,0,0,.35)}
.input.code{font-family:var(--mono); font-size:18px; letter-spacing:.4em; text-align:center}

/* Checkbox row. */
.check-row{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.check-row input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:19px; height:19px; border-radius:6px; border:1px solid var(--line-2);
  background:rgba(0,0,0,.25); cursor:pointer; transition:.16s; position:relative;
}
.check-row input:hover{border-color:rgba(255,138,76,.5)}
.check-row input:checked{
  background:linear-gradient(145deg,var(--ember-2),var(--ember)); border-color:transparent;
}
.check-row input:checked::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #1c1208; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.check-row input:focus-visible{outline:2px solid rgba(255,138,76,.5); outline-offset:2px}
.check-row span{font-size:14px; color:var(--dim)}

/* Buttons. */
.btn-primary{
  height:48px; width:100%; border:0; border-radius:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.01em;
  color:#1c1208; background:linear-gradient(145deg,var(--ember-2),var(--ember));
  box-shadow:0 10px 28px -10px rgba(255,138,76,.7); transition:.18s;
}
.btn-primary:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6; cursor:default; transform:none; filter:none}
.btn-primary:focus-visible{outline:2px solid var(--ember-2); outline-offset:3px}

.btn-ghost{
  height:44px; width:100%; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  font-family:var(--body); font-weight:600; font-size:14px;
  color:var(--text); background:transparent; border:1px solid var(--line);
  transition:.18s;
}
.btn-ghost:hover{border-color:var(--line-2); background:var(--panel)}
.btn-ghost:focus-visible{outline:2px solid rgba(255,138,76,.5); outline-offset:2px}

/* Inline link styled as a quiet text button. */
.link-quiet{
  background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--body); font-size:13px; color:var(--ember-2);
  text-decoration:none; transition:.15s;
}
.link-quiet:hover{color:var(--gold); text-decoration:underline}
.link-quiet:focus-visible{outline:2px solid rgba(255,138,76,.5); outline-offset:2px; border-radius:4px}

/* Passkey sign-in row (revealed by JS when WebAuthn is supported). */
.passkey-row{margin-top:14px}
.passkey-row[hidden]{display:none}

/* Secondary action row under the form. */
.auth-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; flex-wrap:wrap}
.auth-actions[hidden]{display:none}

/* Status / error / success message. */
.auth-msg{
  margin-top:16px; font-size:13.5px; line-height:1.5; border-radius:12px;
  padding:11px 13px; display:flex; align-items:flex-start; gap:9px;
}
.auth-msg[hidden]{display:none}
.auth-msg .msg-dot{width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none}
.auth-msg.error{background:rgba(255,83,71,.10); border:1px solid rgba(255,83,71,.35); color:#ffc7c0}
.auth-msg.error .msg-dot{background:var(--live); box-shadow:0 0 10px var(--live)}
.auth-msg.success{background:rgba(95,208,122,.10); border:1px solid rgba(95,208,122,.32); color:#bdecc9}
.auth-msg.success .msg-dot{background:var(--ok); box-shadow:0 0 10px var(--ok)}
.auth-msg.info{background:var(--panel-2); border:1px solid var(--line); color:var(--dim)}
.auth-msg.info .msg-dot{background:var(--ember-2)}
.auth-msg a{color:var(--gold); text-decoration:underline}

/* A staged sub-section that reveals (2FA code, reset fields). */
.auth-stage[hidden]{display:none}
.auth-stage{
  display:flex; flex-direction:column; gap:15px;
  border-top:1px solid var(--line); margin-top:4px; padding-top:18px;
  animation:rise .4s cubic-bezier(.2,.7,.2,1);
}
.stage-note{font-size:13px; color:var(--dim); line-height:1.5}
.stage-note strong{color:var(--text); font-weight:600}

.auth-copyright{position:relative; z-index:1; text-align:center; margin-top:12px; font-size:11px; color:var(--faint)}

/* Footer note under the card. */
.auth-foot{
  position:relative; z-index:1; text-align:center; margin-top:18px;
  font-size:13px; color:var(--faint); line-height:1.5;
  opacity:0; animation:rise .7s .2s cubic-bezier(.2,.7,.2,1) forwards;
}
.auth-foot a{color:var(--ember-2); text-decoration:none}
.auth-foot a:hover{color:var(--gold); text-decoration:underline}

@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes breathe{
  0%,100%{opacity:.42; transform:scale(1)}
  50%{opacity:.6; transform:scale(1.05)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .auth-card,.auth-foot{opacity:1}
}

@media (max-width:480px){
  .auth-wrap{max-width:100%}
}