/* =========================================================================
   PLANBOZP – oko u hesla

   Vlastní soubor, ne řádky v `planbozp.css`: pole na heslo stojí i na
   stránkách, které zbytek stylopisu aplikace nenačítají (přihlášení,
   nastavení nového hesla, zavedení prvního účtu). Ty by jinak dostaly
   buď nestylované tlačítko, nebo celý stylopis aplikace navíc.
   ========================================================================= */
/* Pole na heslo s tlačítkem, které ho odkryje (`pba_heslo_pole()`).
   Rizikabozp to nemá, takže vzhled je vlastní — ale drží se tvaru polí
   v `planbozp.css`, aby oko nevypadalo jako cizí prvek.

   BARVY MAJÍ ZÁLOHU. `--sedy` a `--modra` bydlí v `aplikace.css`, který se
   na zavedení prvního účtu nenačítá — bez záložní hodnoty by tam bylo oko
   černé, nebo neviditelné.

   OBAL PŘEBÍRÁ VNĚJŠÍ ODSAZENÍ. Kdyby ho dál nesl vstup, seděl by uvnitř
   obalu níž než obal sám a oko by se nedalo zarovnat na jeho střed —
   přesně o ty pixely, o které má vstup odsazení. */
.heslo-pole { position: relative; display: block; }
.heslo-pole > input { margin: 0 !important; }
/* Místo na tlačítko, ať heslo neteče pod oko. Delší jednorázová hesla
   se do pole nevejdou celá a konec by zmizel právě pod ním. */
.heslo-pole > input { padding-right: 42px; }

.prihlaseni .heslo-pole { margin-top: 6px; }

/* DVĚ TŘÍDY SCHVÁLNĚ. Přihlašovací obrazovka má `.prihlaseni button` —
   plnou šířku, výšku 46 px a barevný přechod, protože počítá s tím, že
   jediné tlačítko na stránce je „Přihlásit se". Jednotřídní `.heslo-oko`
   by prohrálo a z oka by bylo druhé velké tlačítko přes celé pole.
   Proto se tu i výslovně ruší, co odtamtud přišlo. */
.heslo-pole .heslo-oko {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    height: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: var(--sedy, #6B7488);
    cursor: pointer;
}
.heslo-pole .heslo-oko:hover { color: var(--modra, #0C56B5); }
/* Obrys se kreslí dovnitř: tlačítko sedí na okraji pole a prohlížečův
   vnější prstenec by z něj vylezl ven přes lem. */
.heslo-pole .heslo-oko:focus-visible { outline: 2px solid var(--modra, #0C56B5); outline-offset: -3px; border-radius: 6px; }
/* `display: flex` výš přebíjí `[hidden]` z prohlížeče — bez tohohle by se
   klapka ukázala i tomu, komu se skript nenačte, a nedělala by nic. */
.heslo-pole .heslo-oko[hidden] { display: none; }

.heslo-oko svg { width: 18px; height: 18px; display: block; }
/* `display` na obalu ikony přebíjí `[hidden]` z prohlížeče, takže by se
   kreslila obě oka přes sebe. Skryté se proto vypíná výslovně. */
.heslo-oko i { display: flex; }
.heslo-oko i[hidden] { display: none; }