/* --- Wspólny styl bramki dostępu dla modułów DataVault i NPCGenerator / Shared access-gate styles for DataVault and NPCGenerator modules --- */
/* --- Overlay bramki zakotwiczony do rzeczywistego viewportu, aby karta hasła była widoczna na telefonie / Access-gate overlay anchored to the real viewport so the password card stays visible on phones --- */
.accessGate{position:fixed;left:0;top:0;z-index:9999;display:grid;place-items:center;width:100vw;max-width:100vw;height:100vh;height:100dvh;overflow:auto;padding:16px;background:rgba(0,0,0,.92);}
.accessGate[hidden]{display:none;}
.accessGate__card{width:min(520px,100%);border:1px solid var(--border,#1cff6b);background:#020802;padding:24px;}
.accessGate__error{margin-top:12px;color:#ff6b6b;min-height:1.2em;}

/* --- Stały kontener ikony w bramce dostępu, żeby zapobiec skokom układu / Fixed icon container in access gate to prevent layout shift --- */
.accessGate__iconSlot{width:72px;height:72px;margin:0 auto 14px;display:grid;place-items:center;}
.accessGate__icon{width:72px;height:72px;display:block;object-fit:contain;}

/* --- Dwukolumnowy układ Litanii Dostępu: etykieta po lewej, kontrolki po prawej / Two-column Litany layout: label on the left, controls on the right --- */
#accessForm{display:block;}
.accessGate__credentials{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,1.3fr);column-gap:16px;row-gap:10px;align-items:start;}
.accessGate__label{grid-column:1;grid-row:1;margin:0;align-self:center;
  /* --- Ciemniejsza etykieta odróżnia tytuł Litanii od pozostałej treści / Darker label distinguishes Litany title from the rest of the message --- */
  color:var(--muted,#4a8b4a);}
.accessGate__label span{display:block;text-align:left;}
.accessGate__password{grid-column:2;grid-row:1;justify-self:stretch;width:100%;}
.accessGate__submit{grid-column:2;grid-row:2;justify-self:end;}

/* --- Mobilny fallback: układ jednokolumnowy z czytelną kolejnością / Mobile fallback: single-column flow with readable order --- */
@media (max-width:640px){
  /* --- Dodatkowe zabezpieczenie mobilne: karta zawsze mieści się w wysokości widoku / Extra mobile safeguard: card always fits viewport height --- */
  .accessGate{place-items:center;padding:16px;}
  .accessGate__card{max-height:calc(100dvh - 32px);overflow:auto;}
  .accessGate__credentials{grid-template-columns:1fr;row-gap:10px;}
  /* --- Jawna kolejność wierszy mobilnych zapobiega nakładaniu etykiety przez pole hasła / Explicit mobile row order prevents label overlap by the password field --- */
  .accessGate__label,.accessGate__password,.accessGate__submit{grid-column:1;justify-self:stretch;}
  .accessGate__label{grid-row:1;}
  .accessGate__password{grid-row:2;}
  .accessGate__submit{grid-row:3;justify-self:end;}
}