/* ==========================================================================
   logowanie-2026.css – strony logowania w głównej powłoce (BDS etap 8,
   wdrożenie 3; wzorzec Logowanie-03): /logowanie.html, /rejestracja.html,
   /reset-password.html, /konto/ustawienia.html. Szablony: templates/auth/.

   Sam układ strony. Pola (.fld, .chk), przyciski (.btn), zakładki (.tabs),
   nota (.note), szpalta (.rail, .rail-grp), okruszki i odnośnik ze strzałką
   (.sec-more) to części wspólne z components.css i components-content.css –
   tu nie ma ich kopii. <main> bez .shell: szerokość niosą sekcje .w-read.
   ========================================================================== */

/* ---------- Okładka: ciemne pasmo z okruszkami, tytułem i jednym zdaniem ---------- */
.auth-cover{ background:var(--surface); border-bottom:1px solid var(--line); }
.auth-cover__in{ padding-block:1.625rem 2.75rem; }
.auth-cover nav.breadcrumbs{ margin:0; }
.auth-cover__copy{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:40rem; margin-top:1.75rem; }
.auth-cover h1{ margin:0; font-size:var(--fs-title); line-height:var(--lh-title); font-weight:700; letter-spacing:-.02em;
  text-wrap:balance; color:var(--ink); }
.auth-cover__lead{ margin:0; font-size:var(--fs-lead); line-height:var(--lh-lead); letter-spacing:-.01em; color:var(--text); }
.auth-cover__lead strong{ font-weight:600; color:var(--ink); }

/* ---------- Układ: formularz najwyżej 40rem, szpalta 23rem przy prawej krawędzi osi ---------- */
.auth-main{ padding-block:var(--sp-6) var(--sp-8); }
.auth-split{ display:grid; grid-template-columns:minmax(0,40rem) 23rem; justify-content:space-between; column-gap:var(--sp-7);
  align-items:start; }
.auth--solo .auth-split{ grid-template-columns:minmax(0,40rem); justify-content:start; }
.auth-form, .auth-fields{ display:flex; flex-direction:column; gap:1.25rem; min-width:0; }
/* Odnośnik w zdaniu (nota, zgoda, błąd pola): pole dotyku 44 px niesie pseudoelement – jak w .sec-more. */
.auth-form .note a, .auth-fields .chk-l a, .auth-fields .fld-err a{ position:relative; font-weight:600; white-space:nowrap; }
.auth-form .note a::after, .auth-fields .chk-l a::after, .auth-fields .fld-err a::after{ content:""; position:absolute;
  inset:50% 0 auto; height:2.75rem; transform:translateY(-50%); }
.auth-fields .fld-err a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
/* „Wróć do ogłoszenia”: osobny wiersz 44 px, żeby pole nie nachodziło na „Załóż je”. */
.auth-form .note a.auth-back{ display:flex; align-items:center; width:fit-content; min-height:2.75rem; }
.auth-form .note a.auth-back::after{ content:none; }
.auth-mail{ overflow-wrap:anywhere; }

/* ---------- Google i Facebook: dwa przyciski obok siebie, rozdzielnik pod nimi ---------- */
.auth-oauth{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2); }
.auth-oauth--one{ grid-template-columns:minmax(0,1fr); }
.auth-oauth__mark{ flex:none; }
.auth-or{ display:flex; align-items:center; gap:var(--sp-3); margin:0; font-size:var(--fs-small); line-height:var(--lh-small);
  color:var(--meta); }
.auth-or::before, .auth-or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- Pole hasła z przyciskiem „Pokaż” (odsłania go auth-form.js) ---------- */
.auth-pw{ position:relative; display:block; }
.auth-pw:has(.auth-pw__btn:not([hidden])) > .fld{ padding-right:5.25rem; }
.auth-pw__btn{ position:absolute; inset:2px 2px 2px auto; min-width:2.75rem; padding:0 0.875rem; border:0;
  border-radius:var(--r-badge); background:transparent; font-family:inherit; font-size:var(--fs-btn);
  line-height:var(--lh-btn); font-weight:600; letter-spacing:0; color:var(--meta-strong); cursor:pointer; }
.auth-pw__btn:hover{ color:var(--ink); }
.auth-pw__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ---------- Wiersz akcji: przycisk i odnośnik do nowego hasła ---------- */
.auth-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid var(--line); }
.auth-actions > .fld-err{ flex-basis:100%; }
.auth-reset, .auth-after{ margin:0; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--text); }
.auth-reset a, .auth-after a{ display:inline-flex; align-items:center; min-height:2.75rem; font-weight:600; color:var(--ink); }
/* Ekran „Sprawdź pocztę”: wiersze pod notą stoją w osi jej tekstu (ikona 18 px + odstęp 8 px). */
.auth-after{ margin-left:1.625rem; }
.auth-form .note + .auth-after{ margin-top:-0.75rem; }

/* ---------- Szpalta „Co daje konto” ---------- */
.auth-rail__h{ font-size:var(--fs-kicker); line-height:var(--lh-kicker); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-feature-settings:"case"; color:var(--meta); }
.auth-gains{ display:flex; flex-direction:column; gap:var(--sp-3); margin:0; padding:0; list-style:none; }
.auth-gains > li{ display:grid; grid-template-columns:1.25rem minmax(0,1fr); gap:0 0.625rem; }
.auth-gains .ic{ margin-top:0.1875rem; color:var(--meta-strong); }
.auth-gains li > span{ display:flex; flex-direction:column; gap:0.125rem; }
.auth-gains strong{ font-size:var(--fs-text); line-height:var(--lh-text); font-weight:600; color:var(--ink); }
.auth-gains span span{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--meta); }
.auth-rail__p{ margin:0; font-size:var(--fs-text); line-height:var(--lh-text); color:var(--text); }
.auth-rail .sec-more{ align-self:flex-start; min-height:2.75rem; }

@media (max-width:999px){
  .auth-split{ grid-template-columns:minmax(0,40rem); justify-content:start; }
  .auth-rail{ margin-top:var(--sp-7); }
}
@media (max-width:699px){
  .auth-cover__in{ padding-block:0.5rem var(--sp-5); }
  .auth-cover__copy{ margin-top:var(--sp-2); }
  .auth-cover__reach{ display:none; }
  .auth-main{ padding-block:var(--sp-5) var(--sp-7); }
  .auth-oauth{ grid-template-columns:minmax(0,1fr); }
  .auth-actions > .btn{ flex:1 1 100%; }
}