/* Login page. Same edge-* tokens and visual language as the rest of the
   app -- this used to be the one page still running the old static/css/*
   system (theme.css, base.css, login.css), which made a user's first
   screen a visually different product from the one behind it. Retired;
   see INTERFACE_SYSTEM.md §2. */

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--edge-space-6);
}

.edge-login {
  width: 100%;
  max-width: 26rem;
  padding: var(--edge-space-8) var(--edge-space-6);
}

.edge-login__brand {
  display: flex;
  align-items: baseline;
  gap: var(--edge-space-2);
  margin-bottom: var(--edge-space-8);
}
.edge-login__brand strong { font-family: var(--edge-font-display); font-size: var(--edge-text-xl); font-weight: var(--edge-weight-heading); letter-spacing: -.02em; }
.edge-login__brand span { color: var(--edge-color-text-muted); font-size: .625rem; font-weight: var(--edge-weight-heading); letter-spacing: .18em; }

.edge-login__field { position: relative; margin-top: var(--edge-space-5); }
.edge-login__field:first-of-type { margin-top: 0; }
.edge-login__field input {
  width: 100%;
  height: 3.25rem;
  border: 1px solid var(--edge-color-border);
  border-radius: var(--edge-radius-md);
  background: var(--edge-color-surface);
  color: var(--edge-color-text);
  padding: var(--edge-space-5) var(--edge-space-4) 0;
  font: inherit;
  font-size: var(--edge-text-sm);
  outline: none;
  transition: border-color var(--edge-duration-fast) var(--edge-ease-standard);
}
.edge-login__field input:focus { border-color: var(--edge-color-accent); }
.edge-login__field label {
  position: absolute;
  left: var(--edge-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--edge-color-text-muted);
  font-size: var(--edge-text-sm);
  pointer-events: none;
  transition: top var(--edge-duration-fast) var(--edge-ease-standard), font-size var(--edge-duration-fast) var(--edge-ease-standard), color var(--edge-duration-fast) var(--edge-ease-standard);
}
.edge-login__field input:focus ~ label,
.edge-login__field input:not(:placeholder-shown) ~ label {
  top: var(--edge-space-4);
  transform: none;
  color: var(--edge-color-text-muted);
  font-size: .6875rem;
  letter-spacing: .03em;
}
.edge-login__field input:focus ~ label { color: var(--edge-color-accent); }

.edge-login__error { display: none; margin-top: var(--edge-space-4); color: var(--edge-color-negative); font-size: var(--edge-text-sm); }
.edge-login__error.is-visible { display: block; }

.edge-login__submit { width: 100%; margin-top: var(--edge-space-6); justify-content: center; }