/* Sign in / sign up / password reset, in the landing's idiom.
   Layered on landing.css, which supplies the mono font, palette and link colours via
   body.lp. This file only adds the auth screens' own components. */

.au{ display:flex; min-height:100vh; background:var(--lp-bg); }

/* ---------- left panel ---------- */
/* The dot grid from the landing hero, so the first screen after the marketing site feels
   like the same product. Hidden below 1000px, where the form takes the whole width. */
.au-side{
  position:relative; isolation:isolate; display:none;
  width:460px; flex-shrink:0; flex-direction:column; justify-content:space-between;
  padding:40px 44px; border-right:1px solid var(--lp-bright); background:var(--lp-panel);
}
.au-side::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* background (the dot grid) comes from the shared rule in landing.css */
  -webkit-mask-image:radial-gradient(92% 70% at 20% 12%, #000 14%, transparent 84%);
          mask-image:radial-gradient(92% 70% at 20% 12%, #000 14%, transparent 84%);
}
@media(min-width:1000px){ .au-side{ display:flex; } }

.au-side-brand img{ height:30px; width:auto; display:block; }

.au-side-mid{ display:flex; flex-direction:column; }
.au-side h2{
  font-family:var(--lp-mono); font-weight:500; font-size:26px; line-height:1.2;
  letter-spacing:-.03em; color:var(--lp-bright);
}
.au-side p{ margin-top:14px; max-width:34ch; font-size:14px; line-height:1.6; color:var(--lp-dim); }
.au-feats{ margin-top:28px; display:flex; flex-direction:column; gap:11px; }
.au-feat{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--lp-text); }
.au-feat span:first-child{ color:var(--lp-accent); }

/* The terminal line at the foot of the panel. */
.au-term{
  display:flex; align-items:center; gap:9px; padding:10px 12px;
  border:1px solid var(--lp-rule-soft); background:var(--lp-bg); font-size:12px;
}
.au-term b{ color:var(--lp-accent); font-weight:400; }
.au-term span{ color:var(--lp-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- form column ---------- */
.au-main{ display:flex; flex:1; align-items:center; justify-content:center; padding:32px 20px; }
.au-form{ width:380px; max-width:100%; }
.au-brand{ display:block; margin-bottom:28px; }
.au-brand img{ height:30px; width:auto; display:block; }
@media(min-width:1000px){ .au-brand{ display:none; } }

.au-head{ margin-bottom:26px; }
.au-head h1{
  font-family:var(--lp-mono); font-weight:700; font-size:19px; color:var(--lp-bright);
  text-transform:uppercase; letter-spacing:.06em;
}
.au-head p{ margin-top:10px; font-size:14px; color:var(--lp-dim); }

/* ---------- disabled social buttons + divider ---------- */
.au-oauth{ display:flex; gap:10px; margin-bottom:18px; }
.au-oauth button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px; height:42px;
  border:1px solid var(--lp-rule-soft); background:var(--lp-panel); color:var(--lp-dim);
  font-family:var(--lp-mono); font-size:13px; cursor:not-allowed; opacity:.55;
}
.au-or{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.au-or i{ flex:1; border-top:1px dotted var(--lp-rule); }
.au-or span{ font-size:11.5px; color:var(--lp-faint); }

/* ---------- fields ---------- */
.au-fields{ display:flex; flex-direction:column; gap:16px; }
.au-label{ display:block; }
.au-label-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.au-label-t{
  display:block; margin-bottom:7px; font-size:11px; font-weight:700; color:var(--lp-faint);
  text-transform:uppercase; letter-spacing:.1em;
}
.au-label-row .au-label-t{ margin-bottom:0; }

/* Square, bordered, black — the same treatment as the landing's <pre> blocks. */
.au-input{
  display:flex; align-items:center; gap:9px; height:44px; padding:0 12px;
  border:1px solid var(--lp-rule-soft); background:var(--lp-bg);
  transition:border-color .15s ease;
}
.au-input:focus-within{ border-color:var(--lp-accent); }
.au-input > span{ display:flex; flex-shrink:0; color:var(--lp-faint); }
.au-input input{
  flex:1; width:100%; height:100%; border:0; background:none; outline:none;
  font-family:var(--lp-mono); font-size:14px; color:var(--lp-bright);
}
.au-input input::placeholder{ color:var(--lp-fainter); }
.au-input input[type="password"]{ letter-spacing:.1em; }
.au-input input[type="password"]::placeholder{ letter-spacing:normal; }

/* ---------- submit ---------- */
/* Same printed-button treatment as the landing CTAs, full width. */
.au .au-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:46px; margin-top:6px;
  border:1px solid var(--lp-accent); background:var(--lp-accent); color:#000;
  box-shadow:5px 5px 0 var(--lp-bright);
  font-family:var(--lp-mono); font-size:15px; font-weight:700; cursor:pointer;
  text-decoration:none; transition:background-color .15s ease, border-color .15s ease;
}
.au .au-btn:hover{ background:#ff8f3d; border-color:#ff8f3d; color:#000; }

.au-alt{ margin-top:24px; text-align:center; font-size:13px; color:var(--lp-dim); }
.au-forgot{ font-size:12px; }

/* ---------- validation errors ---------- */
.au-errors{
  border:1px solid var(--lp-accent); background:rgba(255,122,26,.08);
  padding:12px 14px; margin-bottom:4px; font-size:13px; color:var(--lp-text);
}
.au-errors h2{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--lp-accent); margin-bottom:6px; }
.au-errors ul{ list-style:none; margin:0; padding:0; }
.au-errors li{ margin-top:3px; }
.au-errors li::before{ content:"! "; color:var(--lp-accent); }

@media (prefers-reduced-motion: reduce){
  .au-input, .au .au-btn{ transition:none; }
}

.au-fine{ font-size:11.5px; color:var(--lp-faint); line-height:1.55; }