/* ============================================================
   Přihlášení platformy ve vzhledu v2

   Přihlašovací obrazovku kreslí assets/js/main.js (renderLogin,
   renderSecondFactor). Když má stránka na <html> třídu vz2, vykreslí
   verzi z komponent v2.css (karta, pole, tl, upozorneni) a tady je jen
   to, co v2.css nemá: rozvržení na střed, velké zaškrtávátko, oddělovač
   „nebo" a pole na kód. Logika i ID prvků jsou stejné jako dřív.

   Stránky bez vz2 (Parťák má vlastní partak.css) dostanou starou verzi
   a tenhle soubor se jich netýká — všechno je pod .vz2.

   Načítá se PŘED v2.css (v2.css je vždy poslední), jen tokeny v2, žádný hex.
   Používá: rozcestník (index.php), Brána, přihlášení přes vozakovi.cz;
   pošta si ho může přidat taky (a pak má stejné přihlášení).
   ============================================================ */

/* app.css drží okno pošty na pevné výšce (overflow: hidden). Přihlášení
   je dokument a na malém telefonu se musí dát doscrollovat k tlačítku. */
html.vz2:has(.prihlas), html.vz2:has(.prihlas) body { height: auto; min-height: 100%; overflow: visible; }

.vz2 .prihlas {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(20px + var(--safe-t)) 16px calc(24px + var(--safe-b));
}
.vz2 .prihlas-sloupec { width: 100%; max-width: 460px; display: grid; gap: 18px; }
.vz2 .prihlas-znak { justify-self: start; }

/* app.css má .login-card úzkou (380 px) a malé popisky — v2 je větší.
   Vyšší váha selektorů schválně: stránka může mít vlastní pravidla pro starší
   přihlášení (.login-card h1 …), která by v2 kartu jinak přepsala. */
.vz2 .prihlas .login-card.prihlas-karta { width: 100%; max-width: none; }
.vz2 .prihlas .login-card.prihlas-karta h1.nadpis-stranky { margin: 0; font: 700 clamp(28px, 7.6vw, 38px)/.98 var(--f-display);
  letter-spacing: -.012em; }
.vz2 .prihlas-karta .uvod { margin: 10px 0 2px; font-size: 18px; }
.vz2 .prihlas-karta .pole-radek > label { margin: 0; color: var(--ink); }
.vz2 .prihlas-karta form { margin: 0; }
.vz2 .prihlas-karta .tl-hlavni { margin-top: 18px; }
/* velká tlačítka se na úzkém telefonu smí zalomit — ať text nesahá na obrys */
.vz2 .prihlas-karta .tl-velke { padding-top: 10px; padding-bottom: 10px; }

/* ---- zaškrtávátko „Zůstat přihlášen" (skutečný checkbox, čte ho main.js) ---- */
.vz2 .prihlas-zaskrt {
  display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 14px 0 0;
  font: 600 17px/1.3 var(--f-text); color: var(--ink); cursor: pointer;
}
.vz2 .prihlas-zaskrt input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 30px; height: 30px; margin: 0; padding: 0;
  display: inline-grid; place-content: center; cursor: pointer;
  border: var(--tah) solid var(--ink); border-radius: 9px; background: var(--pole-bg);
  transition: background-color var(--rychle), transform var(--rychle) var(--odskok);
}
.vz2 .prihlas-zaskrt input[type="checkbox"]::before {
  content: ""; width: 16px; height: 16px; transform: scale(0); background: var(--na-akcent);
  clip-path: polygon(14% 44%, 0 65%, 39% 100%, 100% 16%, 84% 0, 39% 68%);
  transition: transform var(--rychle) var(--odskok);
}
.vz2 .prihlas-zaskrt input[type="checkbox"]:checked { background: var(--akcent); border-color: var(--obrys); }
.vz2 .prihlas-zaskrt input[type="checkbox"]:checked::before { transform: scale(1); }
.vz2 .prihlas-zaskrt input[type="checkbox"]:active { transform: scale(.92); }

.vz2 .prihlas-chyba { margin-top: 14px; }
.vz2 .prihlas-chyba b { font-weight: 700; }

/* ---- „nebo bez hesla" mezi heslem a passkeyem ---- */
.vz2 .prihlas-nebo {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 14px;
  font: 600 15px/1 var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--muted);
}
.vz2 .prihlas-nebo::before, .vz2 .prihlas-nebo::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--linka); }
/* popisek „Přihlásit otiskem prstu nebo obličejem" se na úzkém telefonu zalomí (tl-sirka) */
.vz2 .tl.prihlas-passkey { min-height: 56px; padding-top: 8px; padding-bottom: 8px; font-size: 17px; }
.vz2 .prihlas-tip { margin-top: 14px; text-align: center; }

/* ---- druhý krok: kód z aplikace, jiné způsoby ---- */
.vz2 .pole.prihlas-kod { text-align: center; font: 700 26px/1 var(--f-mono); letter-spacing: .28em; }
.vz2 .pole.prihlas-kod::placeholder { letter-spacing: .28em; }
.vz2 .prihlas-jinak { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: var(--tah) solid var(--linka); }
.vz2 .prihlas-jinak .tl { min-height: 48px; font-size: 15px; }

.vz2 .prihlas-pata { margin: 0; text-align: center; font-size: 15px; color: var(--muted); }

/* načítání před prvním vykreslením (boot-splash z app.css) na v2 podkladu */
html.vz2 .boot-splash { min-height: 60vh; }