/* Sign-in pages — the user login and the Super Admin login.
   Same tokens as the designer (public/designer/ui.js), so signing in feels like the start of
   the same product rather than a separate site. */

:root {
  --bg: oklch(13.5% 0.012 240);
  --bg-deep: oklch(11% 0.012 240);
  --card: oklch(18% 0.014 240);
  --well: oklch(15% 0.012 240);
  --input: oklch(21% 0.015 240);
  --line: oklch(25% 0.018 240);
  --line-soft: oklch(23% 0.016 240);
  --line-strong: oklch(30% 0.02 240);
  --text: oklch(92% 0.006 240);
  --text-bright: oklch(97% 0.004 240);
  --text-dim: oklch(64% 0.012 240);
  --text-mute: oklch(52% 0.014 240);
  --accent: oklch(72% 0.13 195);
  --accent-soft: oklch(66% 0.11 195);
  --accent-bright: oklch(84% 0.12 195);
  --warn: oklch(84% 0.12 75);
  --danger: oklch(78% 0.14 25);
  --sans: Manrope, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg-deep);
  color: var(--text);
  font: 500 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── layout ─────────────────────────────────────────────────────────── */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 480px) 1fr;
}
.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 44px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  z-index: 1;
}
.auth-form-wrap { flex: 1; display: flex; align-items: center; }
.auth-form { width: 100%; max-width: 360px; }

/* ── brand ──────────────────────────────────────────────────────────── */

.brand { display: flex; align-items: center; gap: 11px; }
.brand svg { flex: none; }
.brand-name { font: 800 16px/1.15 var(--sans); color: var(--text-bright); letter-spacing: -0.01em; }
.brand-sub { font: 600 8.5px/1 var(--mono); color: var(--accent-soft); letter-spacing: 0.18em; margin-top: 4px; }

/* ── form ───────────────────────────────────────────────────────────── */

.eyebrow { font: 700 9.5px var(--mono); letter-spacing: 0.18em; color: var(--accent-soft); }
.auth h1 { font: 800 28px/1.15 var(--sans); color: var(--text-bright); margin: 8px 0 6px; letter-spacing: -0.02em; }
.lede { font: 500 13px/1.55 var(--sans); color: var(--text-dim); margin: 0 0 26px; }

.field { margin-bottom: 15px; }
.field label { display: block; font: 600 11.5px var(--sans); color: var(--text-dim); margin-bottom: 6px; }
.input-wrap { position: relative; }
.field input {
  width: 100%;
  background: var(--input);
  border: 1px solid var(--line-strong);
  color: var(--text-bright);
  border-radius: 9px;
  padding: 12px 14px;
  font: 500 14px var(--mono);
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: oklch(44% 0.012 240); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(72% 0.13 195 / 0.18);
}
.input-wrap input { padding-right: 44px; }
.reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 7px; background: transparent;
  color: var(--text-mute); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.reveal:hover, .reveal:focus-visible { color: var(--text); background: oklch(26% 0.016 240); outline: none; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
.check { display: flex; align-items: center; gap: 9px; font: 500 12.5px var(--sans); color: var(--text-dim); cursor: pointer; user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

.submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 9px;
  background: var(--accent); color: oklch(15% 0.02 240);
  font: 800 13.5px var(--sans); letter-spacing: 0.01em;
  padding: 13px 18px; cursor: pointer;
  transition: filter .15s, transform .05s;
}
.submit:hover { filter: brightness(1.08); }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.submit:disabled { opacity: .6; cursor: progress; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid oklch(15% 0.02 240 / 0.35); border-top-color: oklch(15% 0.02 240);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.alert {
  border-radius: 9px; padding: 10px 13px; margin-bottom: 16px;
  font: 600 12.5px/1.5 var(--sans);
  background: oklch(24% 0.06 25); border: 1px solid oklch(60% 0.16 25 / 0.45); color: oklch(90% 0.05 25);
}
.alert.ok { background: oklch(23% 0.04 150); border-color: oklch(60% 0.12 150 / 0.45); color: oklch(90% 0.06 150); }
.hint { font: 500 12px/1.5 var(--sans); color: var(--text-mute); margin: 18px 0 0; }
.hint a { color: var(--accent-bright); text-decoration: none; }
.hint a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

.rules { list-style: none; padding: 0; margin: -4px 0 18px; display: grid; gap: 5px; }
.rules li { font: 500 11.5px var(--sans); color: var(--text-mute); display: flex; gap: 8px; align-items: center; }
.rules li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: oklch(34% 0.014 240); flex: none; }
.rules li.met { color: oklch(82% 0.1 150); }
.rules li.met::before { background: oklch(72% 0.16 150); }

.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 11px var(--sans); color: var(--text-mute); }
.madeby { display: flex; align-items: center; gap: 8px; }
/* the signature is dark ink, so it sits on a light chip as it always has */
.madeby img { height: 22px; width: auto; display: block; background: oklch(96% 0.005 240); padding: 3px 8px; border-radius: 6px; }

/* ── the hero: the shed's framing, drawn ───────────────────────────── */

.auth-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 48px 56px;
  background:
    radial-gradient(1200px 600px at 70% 30%, oklch(72% 0.13 195 / 0.10), transparent 60%),
    var(--bg-deep);
}
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(oklch(30% 0.02 240 / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, oklch(30% 0.02 240 / 0.35) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
}
.hero-art { position: absolute; inset: 6% 4% 30% 6%; display: flex; align-items: center; justify-content: center; }
.hero-art svg { width: 100%; height: 100%; max-width: 820px; }
.hero-art .frame { stroke: oklch(72% 0.13 195 / 0.85); }
.hero-art .purlin { stroke: oklch(72% 0.16 150 / 0.55); }
.hero-art .girt { stroke: oklch(70% 0.1 240 / 0.55); }
.hero-art .pole { stroke: oklch(84% 0.12 195); }
.hero-art .ground { stroke: oklch(40% 0.02 240 / 0.8); }
.hero-art .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-art .draw { animation: none; stroke-dashoffset: 0; } }

.hero-copy { position: relative; max-width: 560px; }
.hero-copy h2 { font: 800 34px/1.12 var(--sans); color: var(--text-bright); margin: 10px 0 12px; letter-spacing: -0.02em; }
.hero-copy p { font: 500 14px/1.6 var(--sans); color: var(--text-dim); margin: 0 0 20px; }
.modules { display: flex; flex-wrap: wrap; gap: 6px; }
.module {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 99px;
  background: oklch(18% 0.014 240 / 0.85); border: 1px solid var(--line);
  font: 600 11px var(--sans); color: var(--text-dim);
  backdrop-filter: blur(6px);
}
.module b { font: 700 9.5px var(--mono); color: var(--accent-bright); }

/* ── Super Admin variant ───────────────────────────────────────────── */

.auth-admin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; }
.auth-admin .grid-bg { mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 70%); }
.admin-card {
  position: relative; width: 420px; max-width: 100%;
  background: oklch(17% 0.014 240 / 0.96);
  border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 30px 80px oklch(0% 0 0 / 0.55), 0 0 0 1px oklch(80% 0.12 75 / 0.06) inset;
  padding: 34px 34px 28px;
}
.restricted {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 22px 0 4px; padding: 5px 10px; border-radius: 99px;
  background: oklch(80% 0.12 75 / 0.12); border: 1px solid oklch(80% 0.12 75 / 0.35);
  font: 700 9.5px var(--mono); letter-spacing: 0.14em; color: var(--warn);
}
.admin-card h1 { font-size: 24px; }
.admin-card .foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* ── small screens: the hero steps aside ───────────────────────────── */

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-side { border-right: none; padding: 24px 16px; }
  .auth-form { max-width: 420px; margin: 0 auto; }
}