/* Sign-in page.
 *
 * Its own stylesheet and its own palette, deliberately separate from app.css.
 * The application's tokens describe a dense working surface -- warm paper,
 * IBM Plex, a teal that means "checked" -- and this page has one job before
 * any of that exists. It follows the sign-in design supplied for it: a cool
 * blue-cyan field, Manrope and Space Grotesk, a single card on a drifting
 * knowledge graph.
 *
 * Light only, with no dark variant, for the same reason: one screen, one
 * composition, and a card whose whole effect is a pale field lifting away from
 * a paler one.
 */

:root {
  --background: oklch(0.982 0.008 220);
  --foreground: oklch(0.205 0.035 246);
  --muted-fg: oklch(0.505 0.035 245);
  --surface: oklch(0.974 0.012 215);
  --surface-raised: oklch(1 0 0);
  --border: oklch(0.888 0.018 220);
  --input-border: oklch(0.885 0.02 220);
  --brand: oklch(0.45 0.12 210);
  --brand-strong: oklch(0.35 0.1 228);
  --brand-soft: oklch(0.92 0.045 196);
  --accent: oklch(0.94 0.035 190);
  --graph: oklch(0.56 0.09 205);
  --success: oklch(0.52 0.12 165);
  --destructive: oklch(0.57 0.19 25);
  --ring: oklch(0.62 0.12 205);

  --shadow-login:
    0 22px 70px -34px oklch(0.26 0.08 240 / 0.32),
    0 2px 8px oklch(0.25 0.06 240 / 0.05);
  --gradient-page: linear-gradient(
    128deg,
    oklch(0.982 0.008 220) 0%,
    oklch(0.98 0.012 198) 52%,
    oklch(0.956 0.026 188) 100%
  );

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

/* --- canvas ------------------------------------------------------------ */

.login-canvas {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  /* dvh, not vh: on mobile Safari the toolbar makes 100vh taller than the
     visible area, which pushes a vertically centred card off centre. */
  min-height: 100dvh;
  overflow: hidden;
  padding: 2.5rem 1.25rem;
  background-image: var(--gradient-page);
}
@media (min-width: 640px) {
  .login-canvas { padding-inline: 2rem; }
}

.login-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.login-graph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 125%;
  transform: translate(-50%, -50%);
  color: var(--graph);
  opacity: .13;
  animation: login-graph-drift 24s ease-in-out infinite alternate;
}
@media (min-width: 640px) {
  .login-graph { width: 120%; height: 115%; }
}
.login-graph-edges line { stroke: currentColor; stroke-width: 1; }
.login-graph-nodes circle { fill: currentColor; }
.login-graph-nodes .halo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .4;
}
.login-graph-nodes .is-pulse { animation: login-node-pulse 4.5s ease-in-out infinite; }

/* Two soft lights, one warm-side, one cool-side, so the field is not flat. */
.login-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(48px);
}
.login-glow-brand {
  left: 8%;
  top: 18%;
  width: 10rem;
  height: 10rem;
  background: color-mix(in oklab, var(--brand-soft) 35%, transparent);
}
.login-glow-accent {
  right: 7%;
  bottom: 14%;
  width: 12rem;
  height: 12rem;
  background: color-mix(in oklab, var(--accent) 30%, transparent);
}

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

.login-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  animation: login-card-enter 700ms cubic-bezier(.22, 1, .36, 1) both;
}

.login-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin: 0 0 1.75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-strong) 70%, transparent);
}
.login-eyebrow span {
  width: 1.75rem;
  height: 1px;
  background: color-mix(in oklab, var(--brand) 25%, transparent);
}

.login-card {
  padding: 1.75rem;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 22px;
  background: color-mix(in oklab, var(--surface-raised) 90%, transparent);
  box-shadow: var(--shadow-login);
  backdrop-filter: blur(16px);
}
@media (min-width: 640px) {
  .login-card { padding: 2.25rem; }
}

.login-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}
.login-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, var(--brand-soft) 65%, transparent);
  color: var(--brand-strong);
  box-shadow: 0 1px 2px oklch(0.25 0.06 240 / .06);
}
.login-mark svg { width: 1.75rem; height: 1.75rem; }
.login-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
.login-head p {
  margin: .5rem 0 0;
  font-size: .875rem;
  color: var(--muted-fg);
}

/* --- form -------------------------------------------------------------- */

.login-form { display: grid; gap: 1.25rem; }
.login-field { display: grid; gap: .5rem; }
.login-field label {
  font-size: .875rem;
  font-weight: 600;
}

/* The border and focus ring live on the wrapper, not the input: the icon and
   the reveal button sit inside the same box, and a ring drawn on the input
   alone would cut through both. */
.login-input {
  display: flex;
  align-items: center;
  height: 3rem;
  padding-inline: .875rem;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.login-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 10%, transparent);
}
.login-input.is-invalid {
  border-color: color-mix(in oklab, var(--destructive) 70%, transparent);
}
.login-input-icon {
  width: 18px;
  height: 18px;
  margin-right: .75rem;
  flex: 0 0 auto;
  color: var(--muted-fg);
  transition: color 150ms ease;
}
.login-input:focus-within .login-input-icon { color: var(--brand); }
.login-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  color: var(--foreground);
}
.login-input input:focus { outline: none; }
.login-input input::placeholder {
  color: color-mix(in oklab, var(--muted-fg) 70%, transparent);
}

.login-reveal {
  display: grid;
  place-items: center;
  padding: .375rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-fg);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.login-reveal:hover {
  background: var(--accent);
  color: var(--brand-strong);
}
.login-reveal svg { width: 17px; height: 17px; }
/* The UA's `[hidden] { display: none }` rule is scoped to the HTML namespace,
   so an SVG carrying the attribute still paints -- which stacked the eye and
   the crossed-out eye on top of each other. */
.login-reveal svg[hidden] { display: none; }

.login-error {
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  color: var(--destructive);
}

.login-forgot { display: flex; justify-content: flex-end; }
.login-forgot button {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand-strong);
  cursor: pointer;
  text-underline-offset: 4px;
}
.login-forgot button:hover { color: var(--brand); text-decoration: underline; }

.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 3rem;
  border: 0;
  border-radius: 12px;
  background: var(--brand-strong);
  color: oklch(0.985 0.008 220);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px oklch(0.25 0.06 240 / .08);
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.login-submit svg { width: 1rem; height: 1rem; }
.login-submit:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--brand-strong) 90%, transparent);
  box-shadow: 0 4px 12px oklch(0.25 0.06 240 / .12);
}
.login-submit:active { transform: none; }

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 0;
  padding: .75rem .875rem;
  border: 1px solid color-mix(in oklab, var(--destructive) 20%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--destructive) 5%, transparent);
  font-size: .75rem;
  line-height: 1.45;
  color: var(--destructive);
}
.login-alert svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .1rem; }

.login-note {
  margin: 0;
  padding: .75rem .875rem;
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--brand-soft) 45%, transparent);
  font-size: .75rem;
  line-height: 1.45;
  color: var(--brand-strong);
}

.login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1.75rem 0 0;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--muted-fg) 80%, transparent);
}
.login-dot {
  width: .375rem;
  height: .375rem;
  border-radius: 999px;
  background: var(--success);
}

.login-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1.5rem 0 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted-fg);
}
.login-trust svg { width: .875rem; height: .875rem; color: var(--success); }

/* --- motion ------------------------------------------------------------ */

@keyframes login-graph-drift {
  from { transform: translate(-50%, -50%) translate3d(-1.5%, -1%, 0) scale(1.01); }
  to   { transform: translate(-50%, -50%) translate3d(1.5%, 1%, 0) scale(1.04); }
}
@keyframes login-node-pulse {
  0%, 100% { opacity: .34; transform: scale(.92); }
  50%      { opacity: .78; transform: scale(1.12); }
}
@keyframes login-card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}