/* ── Password field primitive ────────────────────────────────────────────────
   Vidljivost lozinke (oko) + inline min-length poruka. Dijeljeno između auth
   ulaza (/prijava → login/signup) i mladenačkih postavki (#sigurnost).

   Quiet-utility površina (dalia-design surface mode): bez ornamenta, ikona
   nasljeđuje tintu polja, jedini naglasak je fokus prsten u lilac signature.

   Markup radi `password-field.js` (progressive enhancement) — template ne
   nosi ništa osim `<input type="password">`. Zato ovdje NEMA sistemskih
   stilova polja: `.set-input` (couple-settings.css) i `.lx-auth-field input`
   (dalia-portal.css) ostaju jedini izvor izgleda samog inputa.

   Učitaj NAKON portalnog CSS-a — `.dw-pw > input.dw-pw-field` je (0,2,1),
   isto kao `.lx-auth-field input[type="password"]`, pa redoslijed odlučuje.
   ────────────────────────────────────────────────────────────────────────── */

.dw-pw {
    position: relative;
    display: block;
}

/* Mjesto za gumb. Bira se klasa (ne [type=password]) jer se tip mijenja na
   toggle — inače bi razmak nestao čim se lozinka otkrije. */
.dw-pw > input.dw-pw-field {
    padding-right: 44px;
}

/* Edge crta vlastito native oko unutar polja, lijevo od našeg, u prostoru koji
   smo upravo rezervirali — dvije kontrole za isti čin. Ne vidi se u Chromeu
   pa ni na jednom screenshotu (Rasmus P0-1). */
.dw-pw-field::-ms-reveal,
.dw-pw-field::-ms-clear {
    display: none;
}

/* Granica dodira (Rasmus P1-4): meta se ne diže na gumbu nego na polju, i to
   samo na mobilnom. `.set-input` je ~38px kroz cijele postavke, ali ovaj
   selektor hvata isključivo password polja — na `#sigurnost` su sva tri, pa
   tab ostaje konzistentan, a stisnuti flex redovi drugdje ostaju netaknuti.
   Na auth ulazu je no-op (polje je ~49px). */
@media (max-width: 768px) {
    .dw-pw > input.dw-pw-field {
        min-height: 44px;
    }
}

.dw-pw-eye {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 4px;
    /* micro tier iz motion registra (canon §2.1: 120–180ms za boju/ikonu/fokus).
       `--transition-fast` je imenovan u registru ali nigdje definiran, pa ide s
       fallbackom kao i ostatak repoa. */
    transition: color var(--transition-fast, 180ms) var(--ease);
}

.dw-pw-eye:hover,
.dw-pw-eye:focus-visible {
    color: var(--ink);
}

.dw-pw-eye:focus-visible {
    outline: 2px solid var(--lilac-400);
    outline-offset: -3px;
}

.dw-pw-eye svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

/* Precrtano oko = lozinka skrivena; otvoreno oko = lozinka vidljiva.
   Stanje nosi aria-pressed, crta ga samo prati. */
.dw-pw-slash {
    transition: opacity var(--transition-fast, 180ms) var(--ease);
}

.dw-pw-eye[aria-pressed="true"] .dw-pw-slash {
    opacity: 0;
}

/* Poruka o minimalnoj duljini — ista granica kao backend (`len(pw) < 8`). */
.dw-pw-error {
    margin: 6px 0 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--badge-danger-fg);
}

.dw-pw-error[hidden] {
    display: none;
}

/* (0,3,1) — `.dw-pw-field.is-invalid` sam je (0,2,0) i gubi od
   `.lx-auth-field input[type="password"]` (0,2,1), pa se crveni rub na
   registraciji nikad nije pojavio, a u postavkama je (Rasmus P1-1). */
.dw-pw > input.dw-pw-field.is-invalid {
    border-color: var(--badge-danger-fg);
}

@media (prefers-reduced-motion: reduce) {
    .dw-pw-eye,
    .dw-pw-slash {
        transition: none;
    }
}