/* ============================================================
   Dr. PromptField — Auth: panel logowania Google + ekran PIN
   v9.9.0 (21.07.2026)

   Jedna estetyka dla obu ekranow: ten sam .auth-card, ten sam mozg,
   ten sam wordmark. Rozni je tylko tresc srodka.
   Zero nowych tokenow, zero nowych fontow, zero gradientow (§1.3).
   ============================================================ */

/* === Wspolny szkielet ekranu === */

.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow-y: karta PIN po powiekszeniu mozgu (9.11.0) potrafi przekroczyc 100dvh
     na niskich telefonach. Bez tego dolny rzad klawiatury bylby nieosiagalny. */
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--s-5);
  padding-top: calc(var(--safe-top) + var(--s-5));
  padding-bottom: calc(var(--safe-bottom) + var(--s-5));
  background: var(--bg-0);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--s-8) var(--s-6);
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  text-align: center;
}

/* Grafika mozgu — rozmiary 1:1 z dotychczasowym .login-logo (bez zmian, decyzja
   Kamila 20.07). Zmienil sie tylko napis obok niej, nie ona. */
.auth-brain {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto var(--s-5);
  filter: brightness(1.1) saturate(1.2);
}

/* Wordmark 4E — SWIADOMIE maly. Zastapil napis "Dr. PromptField" (h1 26px) oraz
   logo-header.png. Proporcja pliku 836x204 (~4.1:1), wiec 132px szerokosci to ~32px
   wysokosci. height:auto trzyma proporcje niezaleznie od atrybutow width/height. */
.brand-wordmark {
  display: block;
  width: 100%;
  max-width: 132px;
  height: auto;
  margin: 0 auto var(--s-4);
}

/* Ekran logowania stracil lead (9.11.0), wiec oddech przed przyciskiem Google musi
   dac sam wordmark — inaczej CTA klei sie do znaku (bylo 16px + wysokosc leadu + 24px,
   zostaloby samo 16px). Scope: tylko login; na ekranie PIN pod wordmarkiem stoja
   kropki, ktore maja wlasny margines.
   9.11.1: max-width 132 -> 264px (+100%), czyli tyle samo co na ekranie PIN. Skala
   przestaje byc rozna miedzy ekranami — po usunieciu leadu login ma miejsce na
   pelnowymiarowy znak, a przycisk Google i tak zostaje jedyna akcja. */
.login-container .brand-wordmark {
  max-width: 264px;
  margin-bottom: var(--s-6);
}

.auth-version {
  margin-top: var(--s-5);
  font-size: var(--fs-label);
  font-weight: var(--w-semibold);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* === Przycisk Google === */
/* Biale tlo i ciemny tekst to wymog identyfikacji Google — jedyne miejsce w apce
   z kolorem spoza palety. Reszta (radius, wysokosc dotyku) z design systemu. */

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--s-4);
  background: #FFFFFF;
  color: #1F1F1F;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.auth-google-btn:active { opacity: 0.85; }

/* Komunikat offline nad/pod przyciskiem. Widocznoscia steruje app.js
   (_syncLoginOfflineNote) atrybutem hidden — NIE klasa body.is-offline, ktora
   podczas bootu jest chwilowo ustawiona zanim auth potwierdzi sesje. */
.auth-note {
  margin-top: var(--s-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}

.auth-note[hidden] { display: none; }

/* === Ekran PIN === */

/* 9.11.0 — oba ekrany sa juz bez tekstu prowadzacego (PIN stracil "Podaj PIN",
   login stracil lead), ale PIN idzie dalej: ma tez wieksza marke.
   Powod: pod wordmarkiem stoi tam wylacznie klawiatura numeryczna, wiec gora ekranu
   moze urosnac. Login trzyma mniejszy znak, bo przycisk Google jest tuz pod nim
   i musi zostac oczywistym pierwszym planem. Skala jest wiec celowo rozna. */
.pin-container .auth-brain {
  width: 130px;
  height: 130px;
}

.pin-container .brand-wordmark {
  max-width: 264px;   /* +100% wzgledem 132px z ekranu logowania */
}

.pin-title {
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
  font-weight: var(--w-display);
  color: var(--text-primary);
  margin-bottom: var(--s-4);
}

/* Kropki maskujace. Pokazuja ILE cyfr wpisano w tej chwili (wlasny podglad usera),
   ale ekran nie ma stalej liczby pol — dlugosc PIN-u nie jest zdradzana. */
.pin-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-height: 14px;
  margin-bottom: var(--s-3);
}

.pin-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--sage-500);
}

/* Placeholder gdy nic nie wpisano — jedna wygaszona kropka, zeby pole nie "znikalo" */
.pin-dot--empty {
  background: transparent;
  border: 1px solid var(--border-strong);
}

.pin-msg {
  min-height: 20px;
  margin-bottom: var(--s-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--danger);
}

.pin-msg--info { color: var(--text-secondary); }

/* === Klawiatura numeryczna (custom, styl bankowy) === */
/* Celowo NIE jest to <input type="password" inputmode="numeric">: systemowa
   klawiatura oznacza autofill, podglad ostatniego znaku i podpowiedzi hasel. */

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  max-width: 280px;
  margin: 0 auto;
}

.pin-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease-out);
}

.pin-key:active { background: var(--bg-3); }

.pin-key--action {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.pin-key--action:active { background: var(--bg-2); }

/* Klawisz zatwierdzenia istnieje JUZ TYLKO w kreatorze PIN (modal Konto), gdzie apka
   nie moze zgadnac, czy user skonczyl wpisywac nowy PIN. Ekran blokady weryfikuje
   cicho po kazdej cyfrze (9.11.0) — tam checkmarka nie ma. */
.pin-key--ok {
  background: var(--sage-500);
  border-color: transparent;
  color: var(--text-on-accent);
}

.pin-key--ok:active { background: var(--sage-600); }

/* Klawiatura bez checkmarku: 11 klawiszy w siatce 3-kolumnowej zostawia dziure w
   dolnym rzedzie. "0" wchodzi na srodek, backspace doplywa do 3. kolumny — dolny
   rzad jest wtedy wysrodkowany wzgledem cyfr wyzej (uklad jak w telefonie). */
.pin-keypad--no-ok .pin-key[data-key="0"] { grid-column: 2; }

.pin-key[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.pin-key .icon { width: var(--icon-md); height: var(--icon-md); }

.pin-forgot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  margin-top: var(--s-5);
  padding: 0 var(--s-3);
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pin-forgot:active { color: var(--text-secondary); }

/* === Overlay ustawien PIN (wlacz / wylacz / zmien) === */
/* z-index 10050: nad modalem Konto (10000), pod toastem (10100) — komunikaty
   o bledach musza byc widoczne nad tym overlayem. */

.pin-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: var(--overlay);
  backdrop-filter: blur(6px);
}

.pin-setup-card {
  position: relative;
  max-width: 360px;
  padding-top: var(--s-10);
}

.pin-setup-close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.pin-setup-close:active { background: var(--bg-2); }

/* Rzad przyciskow w sekcji "Blokada PIN" (modal Konto) */
.pin-settings-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pin-settings-row > button {
  flex: 1 1 140px;
  margin-top: 0;
}

/* === Mobile === */

@media (max-width: 600px) {
  .auth-card { padding: var(--s-6) var(--s-5); max-width: 360px; }
  .auth-brain { width: 120px; height: 120px; margin-bottom: var(--s-4); }
  .pin-keypad { max-width: 264px; gap: var(--s-2); }
}

@media (max-width: 380px) {
  .auth-card { padding: var(--s-5) var(--s-4); max-width: 320px; }
  .auth-brain { width: 100px; height: 100px; }
  .brand-wordmark { max-width: 116px; }
  /* Login ma teraz wlasny, wiekszy znak (0,2,0 bije regule wyzej), wiec musi miec
     tez wlasna redukcje — inaczej 264px zostaloby na 320px karcie. 232px = 116 x 2,
     czyli ta sama proporcja co przed powiekszeniem. */
  .login-container .brand-wordmark { max-width: 232px; }
  .pin-key { min-height: 52px; font-size: 20px; }
}

/* Niskie ekrany (klawiatura + mozg + wordmark nie mieszcza sie razem) */
@media (max-height: 720px) {
  .auth-brain { width: 96px; height: 96px; margin-bottom: var(--s-3); }
  /* PIN ma wlasny, wiekszy mozg — musi miec tez wlasna redukcje, inaczej regula
     wyzej przegra ze specyficznoscia .pin-container .auth-brain. */
  .pin-container .auth-brain { width: 104px; height: 104px; }
  /* Oba ekrany maja teraz ten sam znak, wiec i ta sama redukcja na niskim ekranie. */
  .pin-container .brand-wordmark,
  .login-container .brand-wordmark { max-width: 200px; }
}

@media (max-height: 600px) {
  .auth-brain { display: none; }
  .auth-screen { align-items: flex-start; }
}