/* Shared compact login layout, independent of the project's public/admin CSS.
 * Set these variables in the project's CSS (:root or #authFormBox).
 * Defaults are applied at the point of use, so project CSS may load earlier.
 *
 * Example:
 * #authFormBox {
 *     --auth-dialog-accent: #555;
 *     --auth-dialog-on-accent: #fff;
 *     --auth-dialog-background: #eee;
 *     --auth-dialog-text: #333;
 *     --auth-dialog-border: #666;
 * }
 *
 * Optional overrides:
 * --auth-dialog-overlay: #ffffffee
 * --auth-dialog-input-background: #fff
 * --auth-dialog-input-text: defaults to --auth-dialog-text
 * --auth-dialog-input-border: defaults to --auth-dialog-border
 * --auth-dialog-link: set to the project's main link color (default: LinkText)
 * --auth-dialog-close-focus: defaults to --auth-dialog-on-accent
 * Choose contrasting text/background pairs and visible focus colors.
 */
#authFormBox.auth-dialog {
    position: fixed;
    inset: 0;
    z-index: 1500;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: min(100px, 8vh) 16px 24px;
    margin: 0;
    overflow: auto;
    background: var(--auth-dialog-overlay, #ffffffee);
    opacity: 1;
    font: 16px/1.5 Arial, sans-serif;
    color: var(--auth-dialog-text, #333);
    text-align: left;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}
#authFormBox.auth-dialog.open { display: flex !important; }
#authFormBox.auth-dialog[hidden] { display: none !important; }
#authFormBox.auth-dialog #authForm,
#authFormBox.auth-dialog #authFormBoxClose {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    max-width: 468px;
    height: auto;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 0;
    opacity: 1;
}
#authFormBox.auth-dialog #authForm {
    background: var(--auth-dialog-background, #eee);
    border: 1px solid var(--auth-dialog-border, #666);
    padding: 16px;
    text-align: left;
}
#authFormBox.auth-dialog #authFormBoxClose {
    display: block;
    border: 1px solid var(--auth-dialog-accent, #555);
    padding: 12px 16px;
    background: var(--auth-dialog-accent, #555);
    color: var(--auth-dialog-on-accent, #fff);
    font: inherit;
    line-height: 1.5;
    text-align: right;
    cursor: pointer;
}
#authFormBox.auth-dialog #authFormBoxClose span { margin-left: 8px; font-size: 22px; }
#authFormBox.auth-dialog #authForm label { display: block; margin-top: 8px; }
#authFormBox.auth-dialog #authForm input[type=text],
#authFormBox.auth-dialog #authForm input[type=password] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    margin: 0;
    border: 1px solid var(--auth-dialog-input-border, var(--auth-dialog-border, #666));
    border-radius: 0;
    background: var(--auth-dialog-input-background, #fff);
    color: var(--auth-dialog-input-text, var(--auth-dialog-text, #333));
    font: inherit;
}
#authFormBox.auth-dialog #login,
#authFormBox.auth-dialog #pwdRequestLabel {
    width: auto;
    padding: 8px 18px;
    margin: 16px 0;
    border: 2px solid var(--auth-dialog-accent, #555);
    border-radius: 0;
    background: var(--auth-dialog-accent, #555);
    color: var(--auth-dialog-on-accent, #fff);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
#authFormBox.auth-dialog #pwdRequest {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 0;
    margin: 0;
}
#authFormBox.auth-dialog #noRegistration { display: block; padding: 0; margin: 0; }
#authFormBox.auth-dialog #noPwd,
#authFormBox.auth-dialog #noRegistration a {
    appearance: none;
    display: inline;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--auth-dialog-link, LinkText);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
#authFormBox.auth-dialog #noPwd:hover,
#authFormBox.auth-dialog #noRegistration a:hover { text-decoration: none; }
#authFormBox.auth-dialog #authForm .hidden { display: none !important; }
#authFormBox.auth-dialog :is(button, input, a):focus-visible {

}
#authFormBox.auth-dialog #authFormBoxClose:focus-visible { outline-offset: -4px; outline-color: var(--auth-dialog-close-focus, var(--auth-dialog-on-accent, #fff)); }