/* Ayni library 0.2.0, screen locker. Plain CSS. Optional: load it after ayni-base.css. */

/* SCREEN LOCKER (ayni-locker.js). html.ayni-locked hides the page from its
   first paint; the locker is a full-screen modal <dialog> on black - black is
   the lockers' artwork, like a game board, not a theme colour. The password
   box is a card in the middle, shown by a key or a press. Its class `lock`
   keeps it above any dialog opened later . */
html.ayni-locked body { visibility: hidden; }
.lock-dlg
{
    visibility: visible;
    position: fixed; inset: 0;
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: #000; overflow: hidden;
    color-scheme: dark;
    outline: none;                /* it takes the focus back when the password box hides */
}
.lock-dlg::backdrop { background: #000; }
.lock-host { position: absolute; inset: 0; overflow: hidden; }
.lock-card
{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100% - 32px));
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--elev-dialog);
}
.lock-card[hidden] { display: none; }
.lock-card .input-group { flex: 1 1 0; min-width: 0; width: auto; }
.lock-msg { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--danger); }