/* Gatekeeper login page.
 *
 * Layout follows the 2025 page: one centred column, title, then the form with
 * the Login button directly beneath the password field, then the gatekeeper
 * message set well below it. The message was a .card in the original and
 * stays one here.
 */

.login-header {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
}

.login-temple {
    width: 88px;
    height: 88px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
}

.login-titles {
    min-width: 0;
}

#pageTitle {
    font-family: var(--main-title-font, 'Arial', sans-serif);
    font-size: var(--main-title-size, 30px);
    color: var(--main-title-color, #2c3e50);
    line-height: 1.2;
    margin: 0;
}

.login-subtitle {
    margin: var(--spacing-xxs) 0 0;
}

.login-card {
    max-width: 420px;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Directly beneath the password field, full width of the form. */
.login-card button[type="submit"] {
    width: 100%;
    padding: var(--spacing-md);
    font-size: 1.05em;
}

.login-error {
    margin: var(--spacing-md) 0 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    background-color: #f8d7da;
    color: #721c24;
    font-weight: bold;
}

html.dark .login-error {
    background-color: #721c24;
    border-color: #f5c6cb;
    color: #f8d7da;
}

/* "Several lines below the button", per the page specification. */
.gatekeeper-message {
    margin-top: var(--spacing-xxl);
}

/* Typography for the rendered Markdown. The message is written by an
 * administrator, so every block element it can produce needs a sane margin
 * here -- nothing else styles it. */
.gatekeeper-message > :first-child {
    margin-top: 0;
}

.gatekeeper-message > :last-child {
    margin-bottom: 0;
}

.gatekeeper-message h1,
.gatekeeper-message h2,
.gatekeeper-message h3,
.gatekeeper-message h4,
.gatekeeper-message h5,
.gatekeeper-message h6 {
    color: #2c3e50;
    margin: var(--spacing-lg) 0 var(--spacing-xs);
    line-height: 1.3;
    transition: color 0.3s ease;
}

html.dark .gatekeeper-message h1,
html.dark .gatekeeper-message h2,
html.dark .gatekeeper-message h3,
html.dark .gatekeeper-message h4,
html.dark .gatekeeper-message h5,
html.dark .gatekeeper-message h6 {
    color: var(--header-h1-color);
}

.gatekeeper-message p {
    margin: 0 0 var(--spacing-md);
}

.gatekeeper-message ol,
.gatekeeper-message ul {
    margin: 0 0 var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.gatekeeper-message li {
    margin-bottom: var(--spacing-xs);
}

.gatekeeper-message a {
    color: #007bff;
}

.gatekeeper-message a:hover {
    color: #0056b3;
}

html.dark .gatekeeper-message a {
    color: #6cb7ff;
}

.gatekeeper-message blockquote {
    margin: 0 0 var(--spacing-md);
    padding-left: var(--spacing-md);
    border-left: 4px solid #e0e0e0;
    color: #7f8c8d;
}

.gatekeeper-message code {
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 1px 4px;
}

.gatekeeper-message pre {
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: var(--spacing-sm);
    overflow-x: auto;
}

html.dark .gatekeeper-message code,
html.dark .gatekeeper-message pre {
    background-color: var(--input-bg-color);
}

.gatekeeper-message table {
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

.gatekeeper-message th,
.gatekeeper-message td {
    border: 1px solid #e0e0e0;
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
}

@media (max-width: 560px) {
    .login-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-card {
        max-width: none;
    }
}

/* The heading and the line under it, from settings. The fallbacks are what
 * renders if a value is missing or was rejected by the validator. */
.login-header #pageTitle {
    font-family: var(--login-title-font, var(--main-title-font, Arial, sans-serif));
    font-size: var(--login-title-size, var(--main-title-size, 30px));
    color: var(--login-title-color, var(--main-title-color, #2c3e50));
}

.login-header .login-subtitle {
    font-family: var(--login-subtitle-font, Arial, sans-serif);
    font-size: var(--login-subtitle-size, 14px);
    color: var(--login-subtitle-color, #6b7280);
}

/* The welcome block under the sign-in box. Its words are an administrator's
 * Markdown, filtered through the tag allowlist before they arrive; these
 * rules are the face they are set in. */
.gatekeeper-message {
    font-family: var(--login-message-font, Arial, sans-serif);
    font-size: var(--login-message-size, 16px);
    color: var(--login-message-color, #333);
}

.gatekeeper-message h1,
.gatekeeper-message h2,
.gatekeeper-message h3,
.gatekeeper-message h4 {
    color: var(--login-message-heading-color, #2c3e50);
    font-size: var(--login-message-heading-size, 22px);
    margin-top: 0;
}

html.dark .gatekeeper-message {
    color: var(--font-color, #e8e6e3);
}

/* The running version, under the sign-in. Quiet: it is for the one
 * conversation that starts "it is not letting me in", not for anybody else. */
.login-version {
    text-align: center;
    margin: var(--spacing-md) 0 0;
    opacity: 0.75;
}