/* =========================================================================
   Pailon — Auth pages (sign in / sign up)
   Two-pane: branded loop panel + form. Uses console.css + theme-dark.css.
   ========================================================================= */

.auth { display:grid; grid-template-columns:1.05fr 0.95fr; min-height:100vh; }

/* ---- Brand panel ---------------------------------------------------- */
.auth__brand {
  position:relative; overflow-y:auto;
  background:var(--cream-50);
  border-right:1px solid var(--rule);
  padding:54px 56px;
  display:flex; flex-direction:column;
}
.auth__brand::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 360px at 12% -8%, rgba(47,217,138,0.16), transparent 60%),
    radial-gradient(500px 380px at 96% 108%, rgba(47,217,138,0.07), transparent 60%);
  pointer-events:none;
}
.auth__brand > * { position:relative; z-index:1; }

.auth__logo { display:flex; align-items:center; gap:11px; margin-bottom:34px; }
.auth__logo .brandmark { width:30px; height:30px; filter:drop-shadow(0 0 12px rgba(47,217,138,0.4)); }
.auth__logo .brandword { font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:-0.02em; color:var(--ink-900); }
.auth__logo .brandtag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-3); margin-top:2px; }

.auth__head { font-family:var(--font-display); font-size:30px; line-height:1.12; letter-spacing:-0.03em; font-weight:500; color:var(--ink-900); max-width:15ch; }
.auth__sub { font-size:14px; color:var(--fg-2); margin-top:12px; max-width:44ch; line-height:1.55; }

/* ---- Universal loop ------------------------------------------------- */
.loop { position:relative; margin-top:30px; }
.loop__spine { position:absolute; left:13px; top:8px; bottom:42px; width:1.5px;
  background:linear-gradient(var(--folio-green-700), var(--folio-green-500) 55%, var(--rule)); }
.loop__phase { position:relative; padding-left:40px; margin:14px 0 8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-4); }
.loop__phase:first-child { margin-top:0; }
.loop__item { position:relative; padding:3px 0 3px 40px; min-height:30px; display:flex; flex-direction:column; justify-content:center; }
.loop__node { position:absolute; left:0; top:1px; width:27px; height:27px; border-radius:50%;
  background:var(--cream-100); border:1.5px solid var(--folio-green-700);
  display:flex; align-items:center; justify-content:center; z-index:2; }
.loop__node [data-lucide] { width:13px; height:13px; color:var(--folio-green-700); }
.loop__title { font-family:var(--font-display); font-size:13.5px; font-weight:500; color:var(--ink-900); line-height:1.2; }
.loop__cap { font-size:11.5px; color:var(--fg-3); margin-top:1px; }
.loop__return { position:relative; padding-left:40px; margin-top:10px;
  font-family:var(--font-mono); font-size:11px; color:var(--folio-green-900); display:flex; align-items:center; gap:7px; }
.loop__return [data-lucide] { width:14px; height:14px; color:var(--folio-green-700); }

.auth__trust { margin-top:auto; padding-top:28px; display:flex; gap:14px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
.auth__trust span { display:flex; align-items:center; gap:6px; }
.auth__trust [data-lucide] { width:13px; height:13px; color:var(--folio-green-700); }

/* ---- Form pane ------------------------------------------------------ */
.auth__form { display:flex; align-items:center; justify-content:center; padding:40px; }
.authcard { width:100%; max-width:392px; }
.authcard__title { font-family:var(--font-display); font-size:24px; font-weight:500; letter-spacing:-0.02em; color:var(--ink-900); }
.authcard__sub { font-size:13.5px; color:var(--fg-2); margin:8px 0 26px; }

.field { margin-bottom:16px; }
.field__row { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.field label { font-family:var(--font-ui); font-size:12.5px; font-weight:500; color:var(--fg-2); }
.field a { font-size:12px; }
.authinput {
  width:100%; font-family:var(--font-ui); font-size:14px;
  padding:10px 13px; border:1px solid var(--rule); border-radius:var(--radius-md);
  background:var(--cream-100); color:var(--ink-900);
  transition:border-color var(--dur-hover) var(--ease);
}
.authinput::placeholder { color:var(--fg-4); }
.authinput:focus { outline:none; border-color:var(--folio-green-700); box-shadow:0 0 0 3px rgba(47,217,138,0.14); }

.authbtn { width:100%; justify-content:center; padding:11px 16px; font-size:14px; margin-top:4px; }

.authdiv { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--fg-4); font-size:12px; font-family:var(--font-mono); }
.authdiv::before, .authdiv::after { content:""; flex:1; height:1px; background:var(--rule-subtle); }

.authfoot { margin-top:24px; padding-top:18px; border-top:1px solid var(--rule-subtle); font-size:13px; color:var(--fg-2); text-align:center; }

.authnote { display:flex; align-items:flex-start; gap:8px; margin-top:18px; font-size:12px; color:var(--fg-3); line-height:1.5; }
.authnote [data-lucide] { width:14px; height:14px; color:var(--folio-green-700); flex:0 0 auto; margin-top:1px; }

@media (max-width:880px) {
  .auth { grid-template-columns:1fr; }
  .auth__brand { display:none; }
}