/**
 * agentsclub V2 - /login, /register
 *
 * No v2-docs mockup covers auth - built from the established V2 component
 * vocabulary: layout.css's .panel for the card shell, settings.css's .field
 * idiom for inputs (same border/radius/focus-ring treatment, ported here
 * rather than shared since each V2 page keeps its own stylesheet per
 * base.css's "differences are deliberate" convention).
 */

/* Przełącznik motywu stoi przy prawej krawędzi, ale pcha go tam
   `margin-right:auto` na logu (layout.css), wspólne dla wszystkich pasków.
   Własny `margin-left:auto` był tu, dopóki tamtej reguły nie było; teraz
   dwa automatyczne marginesy podzieliłyby wolną przestrzeń między siebie
   i przycisk wylądowałby pośrodku paska. */

.auth-shell{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
}

.auth-card{width:100%;max-width:420px;margin-top:0}
.auth-card h1{font-size:24px;text-align:center;margin-bottom:24px}

.field{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.field:first-child{margin-top:0}
.field label{font-size:13px;font-weight:600;color:var(--sub)}
.field label .hint{font-weight:400;text-transform:none;letter-spacing:0}
.field input{
  font:inherit;font-size:var(--fs-body);color:var(--ink);
  background:var(--bg);border:1px solid var(--hair);border-radius:12px;
  padding:12px 16px;
  transition:border-color .15s ease-out,box-shadow .15s ease-out,background-color .2s ease-out;
}
.field input:focus{
  outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent);
}

/* "Zapamiętaj mnie" - jedyne pole w tym formularzu, gdzie etykieta stoi obok
   kontrolki, a nie nad nią, więc łamie kolumnowy układ .field zamiast go
   dziedziczyć. Waga i kolor jak w zwykłej etykiecie: to nadal podpis pola,
   tylko czytany poziomo. */
.field-check{flex-direction:row;align-items:center;gap:10px;margin-top:16px}
.field-check input[type=checkbox]{
  width:16px;height:16px;margin:0;flex:none;
  accent-color:var(--acc);cursor:pointer;
}
.field-check label{cursor:pointer;user-select:none}

.field-msg{
  margin-top:20px;background:var(--bg);border:1px solid var(--hair);border-radius:12px;
  padding:13px 16px;font-size:var(--fs-small);
}
.field-msg-error{color:var(--ink)}
/* Confirmation notices (address verified, link re-sent).
   Deliberately NOT tinted with --acc: this palette has exactly one accent
   and it's the warm orange used for errors and emphasis, so an accent-tinted
   "success" box reads as a failure. The ✅ glyph carries the semantics; the
   box only needs to be a touch more solid than the error one. */
.field-msg-success{
  color:var(--ink);
  border-color:color-mix(in srgb,var(--ink) 22%,transparent);
}

/* Secondary action under the primary button (resend confirmation link).
   .btn-ghost isn't defined in the V2 base sheet - this borrows the
   .oauth-btn treatment, which is already this design's "secondary button". */
.btn-ghost{
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--hair);
}
.btn-ghost:hover{background:color-mix(in srgb,var(--ink) 4%,var(--bg))}

/* Post-registration "check your inbox" panel replaces the form in place. */
#register-done h2{margin:0 0 12px;font-size:22px}

.btn-block{width:100%;justify-content:center;margin-top:24px}

.oauth-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border:1px solid var(--hair);border-radius:12px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:var(--fs-small);font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:background-color .15s ease-out,border-color .15s ease-out;
}
@media(hover:hover){.oauth-btn:hover{background:var(--pill);border-color:var(--acc)}}

.auth-sep{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:13px;color:var(--sub)}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--hair)}

.auth-switch{text-align:center;font-size:var(--fs-small);color:var(--sub);margin-top:24px}
.auth-switch a{color:var(--acc);font-weight:600;text-decoration:none}
@media(hover:hover){.auth-switch a:hover{text-decoration:underline}}