/* Sign-in page (index.php only, via body.auth).
   Layout: a quiet form pane on the left; on the right, the sky over the bushveld at the
   current South African hour (dawn, day, dusk, night), echoing the sunset in the Masase logo.
   Below 1024px the sky becomes a band above the form. Light only, like the rest of the portal. */

.auth {
    --paper: #ffffff;
    --ink: #1c1a17;          /* warm near-black, from the brand's #171310 */
    --ink-2: #6b655e;        /* secondary text */
    --ink-3: #958e86;        /* resting labels, icons */
    --line: #dcd7d0;         /* field borders */
    --line-strong: #c4bdb3;
    --hover: #f3f1ee;
    --accent: #e8791f;       /* Masase sunset orange */
    --accent-ink: #a5530e;   /* the accent, dark enough for text on white */
    --danger: #c2372b;
    --danger-tint: #fcefec;
    --success-tint: #edf5ee;
    --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --pane: max(440px, 44vw);
    --radius: 12px;

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The page is styled before it paints, so the theme's preloader and progress bar are not needed here. */
.auth #preloader,
.auth .pace {
    display: none !important;
}

.auth > .container-fluid {
    margin: 0;
    padding: 0;
}

.auth > .container-fluid > .row {
    margin: 0;
}

/* ---------- Layout ---------- */

.auth-layout {
    display: grid;
    grid-template-columns: var(--pane) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px clamp(24px, 5vw, 72px) 104px;
}

.auth-panel {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.auth-logo {
    display: block;
    width: 104px;
    height: auto;
}

.auth-intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth .auth-title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.032em;
    color: var(--ink);
    text-wrap: balance;
}

.auth .auth-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
}

/* ---------- Notices (session expired, wrong password) ---------- */

.auth .session_notice:empty {
    display: none;
}

.auth .session_notice .alert {
    position: relative;
    margin: 0;
    padding: 13px 44px 13px 16px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
    background: var(--danger-tint);
    color: #8a2a20;
    font-size: 14px;
    line-height: 1.45;
}

.auth .session_notice .alert-success {
    background: var(--success-tint);
    color: #245c32;
}

.auth .session_notice .pull-right {
    position: absolute;
    top: 8px;
    right: 8px;
    float: none;
}

.auth .session_notice .alert .close {
    position: static;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font-size: 20px;
    opacity: .7;
    text-shadow: none;
}

.auth .session_notice .close:hover {
    opacity: 1;
}

.auth .session_notice .close i {
    display: none;
}

.auth .session_notice .close::before {
    content: "\00d7";
    font: 400 20px/1 var(--font-ui);
}

/* ---------- Form ---------- */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.auth-field {
    position: relative;
}

/* The wrapper keeps the theme's form-group classes for the login script; undo their look. */
.auth .auth-control.form-group-default,
.auth .auth-control.form-group-default.focused,
.auth .auth-control.form-group-default.has-error {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    transition: none;
}

.auth .auth-control input {
    display: block;
    width: 100%;
    height: 58px;
    margin: 0;
    padding: 24px 16px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    outline: none;
    box-shadow: none;
    background: var(--paper);
    color: var(--ink);
    font: 400 16px/1.25 var(--font-ui);
    letter-spacing: -0.006em;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth .auth-field--password .auth-control input {
    padding-right: 56px;
}

.auth .auth-control input:hover {
    border-color: var(--line-strong);
}

.auth .auth-control input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgb(232 121 31 / .16);
}

/* jQuery Validate leaves class "error" on a field even after it is fixed (the theme's showErrors never
   clears it), and the theme's global .error would shrink its text. aria-invalid is kept current, so the
   red state follows that instead. */
.auth .auth-control input.error {
    display: block;
    font-size: 16px;
    color: var(--ink);
}

.auth .auth-control input[aria-invalid="true"],
.auth .auth-field:has(> label.error:not([style*="none"])) .auth-control input {
    border-color: var(--danger);
}

.auth .auth-control input[aria-invalid="true"]:focus,
.auth .auth-field:has(> label.error:not([style*="none"])) .auth-control input:focus {
    box-shadow: 0 0 0 4px rgb(194 55 43 / .14);
}

.auth .auth-control input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--paper) inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
}

.auth .auth-control input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--paper) inset, 0 0 0 4px rgb(232 121 31 / .16);
}

/* Label sits in the field and floats up once the field is focused or filled. */
.auth .auth-control .auth-label,
.auth .auth-control .auth-label.fade {
    position: absolute;
    top: 19px;
    left: 17px;
    max-width: calc(100% - 34px);
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 1;
    color: var(--ink-3);
    font: 400 16px/20px var(--font-ui);
    letter-spacing: -0.006em;
    text-transform: none;
    transform-origin: 0 0;
    transition: transform .16s ease, color .16s ease;
}

.auth .auth-control input:focus ~ .auth-label,
.auth .auth-control input:not(:placeholder-shown) ~ .auth-label,
.auth .auth-control input:-webkit-autofill ~ .auth-label {
    color: var(--ink-2);
    transform: translateY(-10px) scale(.75);
}

.auth .auth-field label.error {
    display: block;
    margin: 8px 2px 0;
    color: var(--danger);
    font: 500 13px/1.4 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
}

.auth-reveal {
    position: absolute;
    top: 9px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.auth-reveal:hover {
    background: var(--hover);
    color: var(--ink);
}

.auth-reveal:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    color: var(--ink);
}

.auth-reveal svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-reveal__hide,
.auth-reveal[aria-pressed="true"] .auth-reveal__show {
    display: none;
}

.auth-reveal[aria-pressed="true"] .auth-reveal__hide {
    display: block;
}

.auth-row {
    display: flex;
    justify-content: flex-end;
}

.auth .auth-link {
    border-radius: 4px;
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.auth .auth-link:hover {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth .auth-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.auth .auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 12px;
    border: 0;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font: 600 16px/1 var(--font-ui);
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease, transform .1s ease;
}

.auth .auth-submit:hover {
    background: #36322d;
}

.auth .auth-submit:active {
    transform: scale(.99);
}

.auth .auth-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}

/* While signing in, the login script swaps the label for assets/img/loader.png. */
.auth .auth-submit.inProgress,
.auth .auth-submit:disabled {
    background: var(--ink);
    cursor: progress;
}

.auth .auth-submit.inProgress img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    animation: auth-spin .8s linear infinite;
}

/* ---------- Sky ---------- */

.auth-sky {
    --sky-top: #1b2641;
    --sky-mid: #a9532a;
    --sky-horizon: #f5b942;
    --sun: #ffd27a;
    --sun-glow: rgb(255 170 70 / .55);
    --sun-x: 64%;
    --sun-y: 77%;
    --sun-size: 168px;
    --land: #150e0b;
    --stars: .5;
    --sun-scale: 1;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 14px 14px 14px 0;
    border-radius: 28px;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 54%, var(--sky-horizon) 80%);
    color: #fff;
}

.auth-sky[data-sky="dawn"] {
    --sky-top: #22304d;
    --sky-mid: #b9877a;
    --sky-horizon: #f3c690;
    --sun: #ffe4b5;
    --sun-glow: rgb(255 200 130 / .5);
    --sun-x: 30%;
    --sun-y: 77%;
    --sun-size: 140px;
    --land: #1e1815;
    --stars: .18;
}

.auth-sky[data-sky="day"] {
    --sky-top: #4b8fd0;
    --sky-mid: #9dc6e9;
    --sky-horizon: #f0e2c4;
    --sun: #fffbec;
    --sun-glow: rgb(255 246 220 / .75);
    --sun-x: 74%;
    --sun-y: 18%;
    --sun-size: 84px;
    --land: #3a3125;
    --stars: 0;
}

.auth-sky[data-sky="night"] {
    --sky-top: #05080f;
    --sky-mid: #10182b;
    --sky-horizon: #2b2520;
    --sun: #f2ece0;
    --sun-glow: rgb(242 236 224 / .16);
    --sun-x: 72%;
    --sun-y: 20%;
    --sun-size: 46px;
    --land: #070709;
    --stars: 1;
}

.auth-sky__sun {
    position: absolute;
    top: var(--sun-y);
    left: var(--sun-x);
    width: calc(var(--sun-size) * var(--sun-scale));
    height: calc(var(--sun-size) * var(--sun-scale));
    border-radius: 50%;
    background: var(--sun);
    transform: translate(-50%, -50%);
}

.auth-sky__sun::before {
    content: "";
    position: absolute;
    inset: -160%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sun-glow) 0%, transparent 62%);
}

/* At night the disc becomes a crescent moon. */
.auth-sky[data-sky="night"] .auth-sky__sun {
    box-shadow: inset -13px -3px 0 0 rgb(5 8 15 / .92);
}

/* Four-pointed stars, the same shape as the stars in the logo. */
.auth-sky__stars {
    position: absolute;
    inset: 0;
    opacity: var(--stars);
}

.auth-sky__stars svg {
    position: absolute;
    fill: #fff6e2;
    transform: translate(-50%, -50%);
    animation: auth-twinkle 5.5s ease-in-out infinite;
}

.auth-sky__land {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42%;
    fill: var(--land);
    color: var(--land);
}

.auth-sky__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.auth-clock {
    position: absolute;
    right: 32px;
    bottom: clamp(32px, 6vh, 56px);
    left: clamp(32px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth .auth-clock p {
    margin: 0;
}

.auth .auth-clock__time {
    color: #fff;
    font: 300 clamp(72px, 8vw, 120px)/.9 var(--font-ui);
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}

.auth .auth-clock__date {
    color: rgb(255 255 255 / .88);
    font: italic 400 clamp(24px, 2.2vw, 32px)/1.15 var(--font-display);
    letter-spacing: 0;
}

.auth .auth-clock__zone {
    margin-top: 10px;
    color: rgb(255 255 255 / .55);
    font: 500 12px/1 var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---------- Footer (shared footer.tpl, restyled here) ---------- */

.auth > .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--pane);
    height: auto;
    padding: 24px clamp(24px, 5vw, 72px);
    border: 0;
    background: transparent;
}

.auth > .footer .copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    max-width: 380px;
    margin: 0 auto;
    padding: 0;
    border: 0;
}

.auth > .footer .copyright p {
    float: none;
    margin: 0;
    color: var(--ink-3);
    font: 400 12px/1.5 var(--font-ui);
    letter-spacing: 0;
}

.auth > .footer .copyright .hint-text {
    opacity: 1;
}

.auth > .footer .copyright span {
    display: inline;
}

.auth > .footer .copyright a {
    margin-left: 6px;
    color: var(--ink-2);
}

.auth > .footer .clearfix {
    display: none;
}

/* ---------- Narrow screens: the sky becomes a band above the form ---------- */

@media (max-width: 1023px) {
    .auth-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-sky {
        order: -1;
        height: 176px;
        margin: 12px 12px 0;
        border-radius: 22px;
        --sun-scale: .5;
    }

    .auth-sky__land {
        height: 58%;
    }

    .auth-clock {
        bottom: 20px;
        left: 24px;
        gap: 2px;
    }

    .auth .auth-clock__time {
        font-size: 48px;
    }

    .auth .auth-clock__date {
        font-size: 20px;
    }

    .auth .auth-clock__zone {
        display: none;
    }

    .auth-pane {
        justify-content: flex-start;
        padding: 40px 24px 120px;
    }

    .auth > .footer {
        width: 100%;
        padding: 20px 24px;
    }
}

@media (max-width: 480px) {
    .auth .auth-title {
        font-size: 30px;
    }

    .auth-panel {
        gap: 24px;
    }
}

@keyframes auth-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auth *,
    .auth *::before {
        animation: none !important;
        transition: none !important;
    }
}