/* Login: maroon brand panel with a white form panel. */
.site-main:has(.login-split) {
    width: 100%; max-width: none; margin: 0; padding: 0;
}
body:has(.login-split) .site-footer { display: none; }

.login-split {
    --login-maroon: var(--ul-maroon);
    --login-maroon-dark: var(--ul-maroon-dark);
    display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    width: 100%; min-height: 100vh; min-height: 100dvh;
    background: var(--ul-surface);
    overflow: hidden;
}

/* Brand panel. Mobile: a dome on top. */
.login-split__brand {
    position: relative;
    padding: 1.75rem 1.5rem 3.5rem; text-align: center;
    background: var(--login-maroon); color: #FFFFFF;
    border-radius: 0 0 50% 50% / 0 0 3.5rem 3.5rem;
}
.login-split__brand::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    border-bottom: 5px solid var(--ul-gold); pointer-events: none;
}
.login-split__logo { display: block; width: 4rem; height: 4rem; margin: 0 auto 0.75rem; border-radius: 50%; object-fit: cover; background: var(--ul-surface); }
.login-split__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.03em; line-height: 1.2; }
.login-split__name::after { content: ""; display: block; width: 3rem; height: 3px; margin: 0.5rem auto 0; background: var(--ul-gold); }
.login-split__welcome { margin: 0.5rem auto 0; font-size: 1.125rem; font-weight: 600; }
.login-split__line { margin: 0.2rem auto 0; color: rgba(255, 255, 255, 0.9); }

/* Form panel */
.login-split__form { display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.5rem; }
.login-split__title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--login-maroon); }
.login-split__sub { margin-bottom: 1.25rem; color: var(--ul-muted); }
.login-split__title, .login-split__sub, .login-split__help { text-align: center; margin-left: auto; margin-right: auto; }
.login-split .form-error, .login-split .form-info { margin: 0 0 1rem; }
.login-split .login-split__form > * { width: 100%; max-width: 26rem; margin-left: auto; margin-right: auto; }
.login-split form label { font-weight: 600; }
.login-split form label:first-of-type { margin-top: 0; }
.login-split input { padding: 0.75rem 1.25rem; border: 1px solid #CDBFBC; border-radius: 999px; background: #F5F2F1; }
.login-split button[type="submit"] { display: block; width: min(100%, 12rem); margin: 1.5rem auto 0; padding: 0.8rem 1rem; border-radius: 999px; background: var(--login-maroon); font-weight: 600; }
.login-split button[type="submit"]:hover { background: var(--login-maroon-dark); }
.login-split button[type="submit"]:disabled { background: #6B6B6B; }
.login-split__help { margin-top: 1.25rem; color: var(--ul-muted); font-size: 0.9rem; }
.login-split__footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; margin: 0.75rem auto 0; font-size: 0.85rem; }
.login-split__footer-links a { color: var(--ul-muted); text-decoration: underline; text-underline-offset: 0.15em; }
.login-split__footer-links a:hover, .login-split__footer-links a:focus-visible { color: var(--login-maroon); }

@media (min-width: 761px) {
    .login-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; }

    /* Left panel: a single smooth arc on the right edge. */
    .login-split__brand {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 3rem 3.5rem 3rem 2.5rem;
        border-radius: 0 32% 0 0 / 0 42% 0 0;
    }

    .login-split__brand::after {
        border-bottom: 0;
        border-right: 5px solid var(--ul-gold);
    }

    .login-split__logo { width: 7.5rem; height: 7.5rem; margin-bottom: 1.25rem; }
    .login-split__name { font-size: 2.25rem; }
    .login-split__welcome { margin-top: 1.75rem; font-size: 1.35rem; }
    .login-split__line { margin-top: 0.75rem; max-width: 20rem; font-size: 1.1rem; }

    /* Right panel: keep the form centered. */
    .login-split__form { padding: 4.5rem 3rem 3rem; }
    .login-split__title { font-size: 1.75rem; }
}

/* One quiet fade for the page, only when the visitor has not asked for reduced motion. */
@keyframes login-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .login-split { animation: login-fade 0.25s ease-out both; }
}
.form-info { padding: 0.75rem 1rem; border-left: 3px solid var(--ul-gold); background: #FBF7E8; color: var(--ul-text); border-radius: 0 var(--radius-control) var(--radius-control) 0; font-size: 0.9rem; margin-bottom: 0.75rem; }
.action-confirmation { display: block; margin-top: 0.75rem; }
.action-confirmation[hidden], [data-confirmation-trigger][hidden], [data-confirmation-hide][hidden] { display: none; }
.action-confirmation > p { margin: 0 0 0.75rem; }
.action-confirmation__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.action-confirmation__actions .btn, .action-confirmation__actions button { margin-top: 0; }
.inline-confirm-form { display: inline-block; margin: 0 0 0 0.75rem; }
.inline-confirm-trigger { margin: 0; padding: 0; border: 0; background: none; color: var(--color-fail); font: inherit; font-weight: normal; text-decoration: underline; cursor: pointer; }
.inline-confirm-trigger:hover { background: none; color: var(--color-accent); }
.grade-delete-confirmation[hidden] { display: none; }
.grade-delete-confirmation__content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; }
.grade-delete-confirmation__content > p { margin: 0; }
.grade-delete-confirmation__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin: 0; }
.grade-delete-confirmation__actions button { margin-top: 0; }
@media (max-width: 600px) {
    .grade-delete-confirmation__content { align-items: flex-start; flex-direction: column; }
    .grade-delete-confirmation__actions { align-self: flex-end; }
}