@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../webfonts/Inter/static/Inter_24pt-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../webfonts/Inter/static/Inter_24pt-SemiBold.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--pz-surface);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-header {
    margin-bottom: 2rem;
}

.logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-favicon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.login-title {
    color: var(--pz-text);
    font-size: 1.875rem;
    font-weight: var(--pz-weight-semibold);
    margin: 0;
}

/* Make the login display name visually consistent with other modal/section headings */

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--pz-text-secondary);
    font-weight: var(--pz-weight-semibold);
    font-size: 0.875rem;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--pz-border-light);
    border-radius: var(--pz-radius-lg);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: var(--pz-bg);
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 3rem !important;
}

.password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    margin: 0;
    color: var(--pz-text-subtle);
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    outline: none;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--pz-text-secondary);
}

.password-toggle i {
    font-size: 1.1rem;
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--pz-accent-text);
    box-shadow: 0 0 0 3px rgba(var(--pz-accent-rgb), 0.12);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
    color: var(--pz-text-subtle);
}

.remember-me-group {
    margin-bottom: 1rem;
}

.remember-me-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: var(--pz-weight-normal);
    color: var(--pz-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.remember-me-label input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
    cursor: pointer;
}

.remember-me-label span {
    user-select: none;
}

.remember-me-unified {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.remember-me-unified .remember-me-label {
    justify-content: center;
}

.oidc-divider {
    text-align: center;
    margin: 1.25rem 0;
    position: relative;
}

.oidc-divider::before,
.oidc-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    /* Strong, as in dark mode: --pz-border-light vanished on the page
       background, the vertical rules between the columns most of all. */
    background: var(--pz-border-strong);
}

.oidc-divider::before {
    left: 0;
}

.oidc-divider::after {
    right: 0;
}

.oidc-divider span {
    color: var(--pz-text-muted);
    font-size: 0.875rem;
    font-weight: var(--pz-weight-medium);
    /* Same fill as body, so the label reads as a gap in the rule, not a chip. */
    background: var(--pz-chrome-bg);
    padding: 0 0.75rem;
    position: relative;
}

.login-button {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--pz-accent);
    color: var(--pz-text-inverse);
    /* Transparent rather than none, so the outlined variants below keep the
       same height as the filled ones. */
    border: 1px solid transparent;
    border-radius: var(--pz-radius-lg);
    font-size: 1rem;
    font-weight: var(--pz-weight-normal);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

/* Same blue as the Login button: a way in like the others, not a lesser one. */
.oidc-button {
    display: block;
    text-decoration: none;
    text-align: center;
    margin-top: 0.75rem;
}

/* Secondary variant shown when a previous SSO account is remembered.
   Doubled class keeps these rules above .login-button:hover below. */
.oidc-other-account-button.oidc-other-account-button {
    background: transparent;
    color: var(--pz-text);
    border: 1px solid var(--pz-border-strong);
}

.oidc-other-account-button.oidc-other-account-button:hover {
    background: rgba(var(--pz-shadow-rgb), 0.06);
    border-color: var(--pz-text-subtle);
}

.oidc-other-account-button[hidden] {
    display: none;
}

/* Tapped SSO button: the provider's page can take a second to show up on a
   phone, so the button says the tap was taken. Armed by the inline script in
   login.php, which runs before the first paint: js/login-page.js can still be
   on its way when the button is tapped right after a release. */
.oidc-button.is-loading::before {
    content: '';
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    margin-right: 0.5rem;
    vertical-align: -0.15rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--pz-radius-circle);
    animation: spin 0.8s linear infinite;
}

/* A second tap would restart the flow for nothing (new state and nonce). */
.oidc-button.is-loading {
    pointer-events: none;
}

/* The spin is the whole message, so it is slowed down rather than dropped. */
@media (prefers-reduced-motion: reduce) {
    .oidc-button.is-loading::before {
        animation-duration: 2s;
    }
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.login-button:hover {
    background: var(--pz-accent-hover);
}

.login-button:active {
    transform: translateY(1px);
}

.account-select-panel {
    text-align: left;
}

.account-select-intro {
    color: var(--pz-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    text-align: center;
}

.account-select-error {
    margin: 0 0 1rem;
    text-align: center;
}

.account-select-form {
    margin: 0;
}

.account-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.account-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--pz-border-light);
    border-radius: var(--pz-radius-lg);
    background: var(--pz-bg);
    color: var(--pz-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.account-option:hover,
.account-option:focus {
    border-color: var(--pz-accent-text);
    background: var(--pz-surface);
    outline: none;
}

.account-option:active {
    transform: translateY(1px);
}

.account-option-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: var(--pz-weight-semibold);
}

.account-option-badge {
    flex: 0 0 auto;
    padding: 0.2rem 0.45rem;
    border-radius: var(--pz-radius-sm);
    background: var(--pz-accent-soft);
    color: var(--pz-accent);
    font-size: 0.75rem;
    font-weight: var(--pz-weight-semibold);
}

/* Accounts opened without a password (Settings > Open without login), under
   the password form: the same rows as the account choice after a sign-in. */
.passwordless-login {
    text-align: left;
}

.account-option-arrow {
    flex: 0 0 auto;
    color: var(--pz-text-muted);
}

.account-option:hover .account-option-arrow,
.account-option:focus .account-option-arrow {
    color: var(--pz-accent-text);
}

.account-select-logout {
    display: block;
    margin-top: 1rem;
    color: var(--pz-text-secondary);
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
}

.account-select-logout:hover {
    color: var(--pz-accent-strong);
    text-decoration: underline;
}

/* Two-factor step (login.php): one code field, then two quiet links. */
.totp-code-input {
    text-align: center;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}

.totp-code-input::placeholder {
    letter-spacing: normal;
}

.totp-cancel-form {
    margin: 0.5rem 0 0;
    text-align: center;
}

.totp-cancel-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pz-text-secondary);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.totp-cancel-button:hover {
    color: var(--pz-accent-strong);
    text-decoration: underline;
}

/* Two-factor setup required by the administrator, then the recovery codes.
   The QR code SVG paints its own white ground and quiet zone, so it stays
   black on white in the dark themes: several authenticator apps refuse an
   inverted code. */
.totp-enroll-panel,
.totp-enrolled-panel {
    text-align: left;
}

.totp-enroll-help {
    margin: 0 0 1rem;
    text-align: center;
    color: var(--pz-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.totp-enroll-qr {
    width: 200px;
    max-width: 100%;
    margin: 0 auto 1rem;
    border-radius: var(--pz-radius-lg);
    overflow: hidden;
    line-height: 0;
}

.totp-enroll-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.totp-enroll-secret-row,
.totp-recovery-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.totp-enroll-secret {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    border-radius: var(--pz-radius-lg);
    background: var(--pz-surface-sunken);
    color: var(--pz-text);
    font-family: monospace;
    font-size: 0.9rem;
    user-select: all;
}

.totp-copy-button {
    flex: 0 0 auto;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--pz-border-strong);
    border-radius: var(--pz-radius-lg);
    background: transparent;
    color: var(--pz-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.totp-copy-button:hover {
    background: rgba(var(--pz-shadow-rgb), 0.06);
}

.totp-recovery-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1rem;
    border: 1px solid var(--pz-border);
    border-radius: var(--pz-radius-lg);
    background: var(--pz-bg);
}

.totp-recovery-list code {
    color: var(--pz-text);
    font-family: monospace;
    font-size: 0.95rem;
    user-select: all;
}

.totp-continue-button {
    display: block;
    text-align: center;
    text-decoration: none;
}

.error {
    color: var(--pz-danger-text);
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--pz-weight-medium);
    text-align: left;
}

.admin-warning {
    background: var(--pz-surface);
    border: 1px solid var(--pz-danger-soft);
    color: var(--pz-danger-hover);
    padding: 1rem;
    border-radius: var(--pz-radius-lg);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    text-align: left;
    line-height: 1.5;
}

.admin-warning code {
    background: var(--pz-danger-soft);
    color: var(--pz-danger-hover);
    padding: 0.125rem 0.25rem;
    border-radius: var(--pz-radius-sm);
    font-weight: var(--pz-weight-semibold);
}

.info {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--pz-surface);
    border: 1px solid var(--pz-border-light);
    border-radius: var(--pz-radius-lg);
    font-size: 0.875rem;
    color: var(--pz-text-secondary);
    line-height: 1.5;
    text-align: left;
}

/* Shown above the form when js/session-guard.js brought the user here */
.session-expired-notice {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.info a {
    color: var(--pz-accent-text);
    text-decoration: none;
}

.info a:hover {
    text-decoration: underline;
}

.info code {
    background: var(--pz-surface-hover);
    padding: 0.125rem 0.25rem;
    border-radius: var(--pz-radius-sm);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
}

.github-link {
    margin-top: 1rem !important;
    padding-top: 0.75rem;
    /* "Powered by", next to the link, on an instance with its own logo or title */
    color: var(--pz-text-muted);
    /* border-top: 1px solid #e2e8f0; */
}

.github-link a {
    color: var(--pz-accent-text);
    text-decoration: none;
    font-weight: var(--pz-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.github-link a:hover {
    color: var(--pz-accent-strong);
    text-decoration: underline;
}

.github-link i {
    font-size: 1rem;
}

/* ============================================
   Dark Mode (Login Page)
   ============================================ */

:where(html[data-theme='dark']) body {
    background-color: var(--pz-chrome-bg);
    color: var(--pz-text);
}

:where(html[data-theme='dark']) label,
html[data-theme='dark'] .remember-me-label {
    color: var(--pz-text);
}

:where(html[data-theme='dark']) input[type="text"],
:where(html[data-theme='dark']) input[type="password"] {
    background-color: var(--pz-surface);
    border-color: var(--pz-border);
}

html[data-theme='dark'] .password-toggle:hover {
    color: var(--pz-text-strong);
}

html[data-theme='dark'] input[type="text"]:focus,
html[data-theme='dark'] input[type="password"]:focus {
    border-color: var(--pz-accent-text);
    box-shadow: 0 0 0 3px rgba(var(--pz-accent-text-rgb), 0.18);
}

html[data-theme='dark'] .github-link a {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .github-link a:hover {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .admin-warning {
    background: rgba(197, 48, 48, 0.1);
    border-color: var(--pz-danger-text-hover);
    color: var(--pz-danger-text);
}

html[data-theme='dark'] .admin-warning code {
    background: rgba(254, 215, 215, 0.2);
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] .account-select-logout:hover {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .account-option {
    background: var(--pz-surface);
    border-color: var(--pz-border);
}

html[data-theme='dark'] .account-option:hover,
html[data-theme='dark'] .account-option:focus {
    background: var(--pz-surface-hover);
    border-color: var(--pz-accent-text);
}

html[data-theme='dark'] .account-option-badge {
    background: rgba(var(--pz-accent-text-rgb), 0.16);
    color: var(--pz-accent-text-hover);
}

html[data-theme='dark'] .oidc-divider::before,
html[data-theme='dark'] .oidc-divider::after {
    background: var(--pz-border-strong);
}

html[data-theme='dark'] .oidc-divider span {
    background: var(--pz-chrome-bg);
}

html[data-theme='dark'] .oidc-other-account-button {
    background: transparent;
    color: var(--pz-text-strong);
    border-color: var(--pz-border-strong);
}

html[data-theme='dark'] .oidc-other-account-button:hover {
    background: rgba(var(--pz-highlight-rgb), 0.06);
}

/* Responsive Design */
@media (max-width: 800px) {
    body {
        padding: 16px;
    }

    .login-header {
        margin-bottom: 2rem;
    }

    .logo {
        width: 40px;
        height: 40px;
    }

    .logo-favicon {
        width: 40px;
        height: 40px;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .info {
        font-size: 0.8125rem;
    }

}

/* ===========================================
   WAYS IN: password, SSO, without a password
   Stacked by default, as on a phone. On a wide screen, each way the page
   offers is a column, and the "or" between them turns vertical.
   =========================================== */

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

/* Only the passwordless list says what it is when stacked: the password form
   and the SSO button speak for themselves under each other. */
.login-method-title {
    display: none;
    margin: 0 0 1.5rem;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.5;
    text-align: center;
}

/* The title is a label with its icon: an accent-tinted chip. */
.login-method-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--pz-radius);
    background-color: var(--pz-accent-soft);
    color: var(--pz-accent-text);
    font-size: 13px;
    font-weight: var(--pz-weight-semibold);
}

.login-method-label .lucide {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--pz-accent-text);
}

.login-method-title-always {
    display: block;
}

@media (min-width: 901px) {
    .login-container-methods-2 {
        max-width: 820px;
    }

    .login-container-methods-3 {
        max-width: 1140px;
    }

    .login-methods-2,
    .login-methods-3 {
        display: grid;
        align-items: stretch;
    }

    .login-methods-2 {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .login-methods-3 {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .login-methods-2 .login-method-title,
    .login-methods-3 .login-method-title {
        display: block;
    }

    /* The "or" becomes a vertical rule with the word in its middle. */
    .login-methods-2 > .oidc-divider,
    .login-methods-3 > .oidc-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 2rem;
    }

    .login-methods-2 > .oidc-divider::before,
    .login-methods-3 > .oidc-divider::before,
    .login-methods-2 > .oidc-divider::after,
    .login-methods-3 > .oidc-divider::after {
        left: 50%;
        right: auto;
        width: 1px;
        height: calc(50% - 1rem);
    }

    .login-methods-2 > .oidc-divider::before,
    .login-methods-3 > .oidc-divider::before {
        top: 0;
    }

    .login-methods-2 > .oidc-divider::after,
    .login-methods-3 > .oidc-divider::after {
        top: auto;
        bottom: 0;
    }

    .login-methods-2 > .oidc-divider span,
    .login-methods-3 > .oidc-divider span {
        padding: 0.25rem 0;
    }
}

/* ===========================================
   UTILITY CLASSES FOR INLINE STYLE EXTRACTION
   =========================================== */

/* OIDC error message */
.oidc-error {
    margin-top: 0.75rem;
    text-align: center;
}