/* chudware-web sign-in / sign-up / recovery — the first page a customer sees.
 *
 * Token layer mirrors portal.css (same names, same values) so a customer who
 * signs in and lands on the portal sees one visual system, not two. This page
 * is anonymous, so the typefaces come from the public /brand-assets route —
 * /portal-assets requires a session and /auth-assets only serves login.* files.
 */

@font-face {
  font-family: "Chudware Sans";
  src: url("/brand-assets/Rubik-VF.247dbaa0aa4a.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Chudware Mono";
  src: url("/brand-assets/JetBrainsMono-Regular.8f0f0cc0353e.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #090d12;
  --panel: #111821;
  --panel-2: #151e29;
  --edge: #273342;
  --edge-soft: rgba(255, 255, 255, .075);
  --text: #eef4f8;
  --muted: #8d9aaa;
  --faint: #6c7b8c;
  --teal: #42ecce;
  --teal-2: #1ab89f;
  --teal-wash: rgba(66, 236, 206, .09);
  --blue: #6d98ff;
  --danger: #ff7185;
  --danger-text: #ffb0bc;
  --hover: rgba(255, 255, 255, .045);
  --ring: 0 0 0 3px rgba(66, 236, 206, .18);
  --shadow: 0 22px 60px rgba(0, 0, 0, .3);

  /* Type and space scale: mirrors portal.css token layer — keep in sync. */
  --sans: "Chudware Sans", "Arial Narrow", sans-serif;
  --mono: "Chudware Mono", ui-monospace, Consolas, monospace;
  --step--2: .7rem;
  --step--1: clamp(.78rem, .75rem + .1vw, .86rem);
  --step-0: clamp(1rem, .96rem + .18vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --step-2: clamp(1.55rem, 1.35rem + .8vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.65rem + 1.8vw, 3.25rem);
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --radius-sm: .25rem;
  --radius: .625rem;
  --radius-lg: 1rem;
  --touch: 2.75rem;
  --control: 3rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* icon sizing: mirrors portal.css .icon — keep in sync */
.icon { width: 1.15em; height: 1.15em; flex: none; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(900px 640px at 12% 28%, var(--teal-wash), transparent 65%),
    radial-gradient(700px 500px at 88% 92%, rgba(109, 152, 255, .06), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ------------------------------------------------------------- brand panel */

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  padding: clamp(var(--s6), 8vw, var(--s8));
  overflow: hidden;
}
.brand-panel::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -230px;
  bottom: -230px;
  border: 1px solid rgba(66, 236, 206, .1);
  transform: rotate(45deg);
  pointer-events: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.brand-lockup svg {
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--teal);
}
.brand-lockup span {
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-panel .eyebrow { margin: 0; }
.brand-panel h1 {
  margin: 0;
  max-width: 15ch;
  font-size: var(--step-3);
  font-weight: 680;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.brand-panel .brand-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
}

.brand-points {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s3);
}
.brand-points li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  color: var(--muted);
  font-size: var(--step--1);
}
.brand-points .icon {
  color: var(--teal);
  transform: translateY(.18em);
}

.eyebrow {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 600;
}

/* --------------------------------------------------------------- auth card */

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  justify-content: center;
  padding: clamp(var(--s5), 5vw, var(--s7));
  background: var(--panel);
  border-left: 1px solid var(--edge-soft);
  box-shadow: var(--shadow);
}

.wordmark {
  display: none;
  align-items: center;
  gap: var(--s2);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--step--1);
}
.wordmark svg { width: 26px; height: 26px; color: var(--teal); }

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--bg);
}
.tabs a {
  display: grid;
  place-items: center;
  min-height: calc(var(--touch) - .5rem);
  border-radius: calc(var(--radius) - .2rem);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.tabs a:hover { color: var(--text); background: var(--hover); }
.tabs a:focus-visible { outline: 0; box-shadow: var(--ring); }
.tabs a.active { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--edge); }

.auth-form { display: grid; gap: var(--s4); }
.auth-form > div:first-child { display: grid; gap: var(--s1); }
.auth-form .eyebrow { margin: 0; }
.auth-form h2 {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.15;
}
.auth-form .form-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.auth-form label { display: grid; gap: var(--s2); }
.auth-form label > span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
}
.auth-form input {
  width: 100%;
  min-height: var(--touch);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--step--1);
  outline: 0;
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.auth-form input:hover { border-color: var(--teal-2); }
.auth-form input:focus-visible { border-color: var(--teal); box-shadow: var(--ring); }
.auth-form input:user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 113, 133, .14);
}
.auth-form .field-hint {
  margin: 0;
  color: var(--faint);
  font-size: var(--step--2);
}
.auth-form input:user-invalid ~ .field-hint { color: var(--danger-text); }

button.primary {
  min-height: var(--touch);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal);
  color: #06110f;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 7px 22px rgba(66, 236, 206, .15);
  transition: background .12s ease-out, border-color .12s ease-out;
}
button.primary:hover { background: #5df3d9; border-color: #5df3d9; }
button.primary:focus-visible { outline: 0; box-shadow: var(--ring); }
button.primary:disabled { opacity: .6; cursor: wait; }

.text-button {
  justify-self: start;
  color: var(--muted);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.text-button:hover { color: var(--text); text-decoration: underline; }
.text-button:focus-visible { outline: 0; box-shadow: var(--ring); }

/* ------------------------------------------------------------------- oauth */

.divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--faint);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--edge-soft);
}

.oauth {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
}
.oauth a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: var(--touch);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s ease-out, background .12s ease-out;
}
.oauth a:hover { border-color: var(--teal-2); background: var(--hover); }
.oauth a:focus-visible { outline: 0; border-color: var(--teal); box-shadow: var(--ring); }
.oauth .icon { color: var(--text); }

/* ------------------------------------------------------------------ status */

.status {
  margin: 0;
  min-height: 1.4em;
  color: var(--teal);
  font-size: var(--step--1);
}
.status.error { color: var(--danger-text); }

.legal {
  margin: 0;
  color: var(--faint);
  font-size: var(--step--2);
}
.legal a { color: var(--muted); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .auth-card {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    justify-content: flex-start;
    padding-top: var(--s6);
    border-left: 0;
    background: transparent;
    box-shadow: none;
  }
  .wordmark { display: inline-flex; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}