/*
 * auth.css
 * Styles the public login/register page used by youth, SK barangay officials,
 * and federated admins before role-based redirects. Covers the split auth
 * panel, form controls, validation states, password strength meter, and
 * mobile barangay picker.
 */

/* Auth Page Layout */
.auth-page .header-left {
    gap: var(--space-0);
}

.auth-page .main-content {
    align-items: center;
}

.auth-wordmark {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.auth-wordmark-kaba {
    color: var(--color-brand-900);
}

.auth-wordmark-trak {
    color: var(--color-brand-400);
}

.mobile-picker-trigger {
    display: none;
}

.mobile-picker-modal[hidden] {
    display: none;
}

.auth-shell {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    max-width: var(--layout-auth-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-300);
}

.auth-visual {
    display: none;
    width: 100%;
}

.auth-visual-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-150);
    padding: var(--space-450);
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.auth-visual-card::before {
    content: none;
}

.auth-visual-title {
    max-width: 520px;
    margin-top: calc(var(--space-050) * -1);
    color: var(--color-text-brand);
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: 0;
    text-align: center;
}

.auth-visual-text {
    max-width: 560px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    text-align: center;
}

.auth-panel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-panel .container::before,
.auth-panel .container::after {
    content: none;
}

@media (min-width: 1024px) {
    body.auth-page {
        overflow-y: hidden;
    }

    .auth-page .main-content {
        align-items: stretch;
        min-height: calc(100vh - 35px);
        padding: 0;
    }

    .auth-page .main-content::before,
    .auth-page .main-content::after {
        content: none;
    }

    .auth-shell {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        max-width: none;
        min-height: calc(100vh - 35px);
        margin: 0 auto;
    }

    .auth-visual {
        display: flex;
        flex: 1.2;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        min-height: calc(100vh - 35px);
        padding: var(--space-700);
        background: linear-gradient(180deg, #DDECF8 0%, #EAF4FB 100%);
        border-right: var(--border-width-thin) solid var(--color-border-header);
    }

    .auth-visual-card {
        max-width: 620px;
        padding: 0;
        transform: translateY(-22px);
    }

    .auth-visual-title {
        max-width: 680px;
        font-size: 42px;
    }

    .auth-visual-text {
        max-width: 640px;
        font-size: var(--font-size-xl);
    }

    .auth-panel {
        flex: 1.1;
        align-self: stretch;
        min-height: 0;
        padding: var(--space-700);
    }

    .auth-panel .container {
        width: 100%;
        max-width: 760px;
        border-radius: var(--radius-4xl);
        box-shadow: var(--shadow-surface-overlay);
    }

    .auth-page.register .auth-panel .container {
        max-width: 860px;
    }

    .auth-page.login .auth-panel #login-form {
        width: 100%;
        max-width: none;
        padding: var(--space-550) var(--space-550) var(--space-600);
    }

    .auth-panel .title {
        font-size: var(--font-size-4xl);
    }

    .auth-panel .subtitle,
    .auth-panel .form-label,
    .auth-panel .label-sub,
    .auth-panel .checkbox-label {
        font-size: var(--font-size-base);
    }

    .auth-panel .help-text {
        font-size: var(--font-size-sm);
    }

    .auth-panel .form-input {
        height: var(--size-field-lg);
        font-size: var(--font-size-lg);
    }

    .auth-panel .btn {
        min-height: var(--size-control-lg);
        padding: var(--space-150) var(--space-300);
        font-size: var(--font-size-lg);
    }

    .auth-panel .input-icon {
        width: var(--size-icon-lg);
        height: var(--size-icon-lg);
    }

    .auth-page.register .auth-panel #register-form {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
        padding-right: var(--space-100);
        scrollbar-gutter: stable;
    }

    .auth-page.login .auth-shell,
    .auth-page.login .auth-visual,
    .auth-page.login .auth-panel {
        align-self: stretch;
    }

    .auth-page .register-form .form-row {
        display: grid;
        gap: var(--space-200);
    }

    .auth-page .register-form .form-row.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Laptop / short-height desktop fix.
 *
 * The block above (min-width: 1024px) builds a fullscreen, no-scroll layout:
 *   - body has overflow-y: hidden
 *   - register form is trapped in an inner scrollbox of calc(100vh - 220px)
 *   - main-content / auth-shell / auth-panel each take up 100vh - 35px
 *
 * That works on tall desktop monitors but breaks on most laptops. Many
 * laptop displays are 1366x768, or 1920x1080 with Windows 125-150% scaling
 * which makes the effective viewport height ~720-820px. On those screens the
 * register form is taller than the inner scrollbox AND the body is locked
 * from scrolling, so the bottom buttons (Login / Create Account) end up half
 * hidden with no obvious way to reach them.
 *
 * Below 820px viewport height we keep the side-by-side desktop layout but:
 *   - unlock the body so the whole page can scroll naturally
 *   - drop the inner scrollbox from the register form
 *   - reduce vertical padding so the form starts higher up
 *
 * Tested target: 1366x768 laptops, and ~720-820px effective viewports caused
 * by browser zoom or Windows display scaling.
 */
@media (min-width: 1024px) and (max-height: 819px) {
    body.auth-page {
        overflow-y: auto;
    }

    .auth-page .main-content {
        align-items: stretch;
        min-height: 0;
        padding: 0;
    }

    .auth-shell,
    .auth-page.login .auth-shell {
        min-height: 0;
        align-items: stretch;
    }

    .auth-visual,
    .auth-page.login .auth-visual {
        min-height: 0;
        padding: var(--space-500);
    }

    .auth-visual-card {
        transform: none;
    }

    .auth-visual-title {
        font-size: var(--font-size-3xl);
    }

    .auth-panel,
    .auth-page.login .auth-panel {
        min-height: 0;
        padding: var(--space-400) var(--space-500);
    }

    /*
     * Drop the inner-scrollbox trap on both forms so the page scrolls
     * naturally on short laptops. Keep each form's own padding intact —
     * the desktop block above sets a 44px symmetric padding on the login
     * form for breathing room, so we MUST NOT zero padding-right here or
     * the inputs lose their right gutter and shove against the card edge.
     *
     * The register form had a small padding-right (~8px) added only as a
     * scrollbar gutter; once we remove the inner scroll we restore it to
     * match the container's normal right padding so the form looks even.
     */
    .auth-page.login .auth-panel #login-form {
        max-height: none;
        overflow-y: visible;
    }

    .auth-page.register .auth-panel #register-form {
        max-height: none;
        overflow-y: visible;
        padding-right: var(--space-350);
        scrollbar-gutter: auto;
    }
}

/*
 * Tablet / small-laptop layout (769px – 1023px).
 *
 * Without this block the auth page falls into a gap: the desktop side-by-side
 * layout requires min-width: 1024px and the mobile stacked layout requires
 * max-width: 768px, so anything in between (Chrome devtools at 819px wide,
 * iPad landscape, narrow Chromebook windows) gets the BASE styles only —
 * which hide .auth-visual entirely and leave the 420px form floating in an
 * empty panel.
 *
 * Here we restore the visual hero ABOVE the form (stacked column layout),
 * size the form to a comfortable tablet width, and turn on the 2-column
 * register form grid so Username/Barangay and Password/Confirm sit side by
 * side again. This keeps shrinking the browser feel like a smooth tablet
 * experience instead of a broken jump.
 */
@media (min-width: 769px) and (max-width: 1023px) {
    .auth-page .main-content {
        align-items: center;
        padding: var(--space-300) var(--space-300) var(--space-400);
    }

    .auth-shell {
        flex-direction: column;
        align-items: center;
        gap: var(--space-300);
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .auth-visual {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: var(--space-200) 0 var(--space-100);
        background: transparent;
        border: 0;
    }

    .auth-visual-card {
        max-width: 100%;
        padding: 0;
        gap: var(--space-100);
        transform: none;
    }

    .auth-visual-title {
        font-size: var(--font-size-3xl);
        max-width: 540px;
    }

    .auth-visual-text {
        font-size: var(--font-size-base);
        max-width: 540px;
    }

    .auth-panel {
        width: 100%;
        padding: 0;
    }

    .auth-panel .container {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: var(--space-400) var(--space-400) var(--space-450);
        border-radius: var(--radius-3xl);
    }

    /*
     * Activate the 2-column register grid here too, otherwise Username /
     * Barangay and Password / Confirm stack as full-width columns at this
     * size, which wastes horizontal space and looks "broken".
     */
    .auth-page .register-form .form-row {
        display: grid;
        gap: var(--space-200);
    }

    .auth-page .register-form .form-row.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .auth-visual-title {
        font-size: var(--font-size-3xl);
    }

    .auth-visual-text {
        max-width: 440px;
        font-size: var(--font-size-base);
    }

    body.auth-page.mobile-picker-ready.mobile-picker-open {
        overflow: hidden;
    }

    .auth-page.mobile-picker-ready .mobile-picker-field {
        position: relative;
    }

    /*
     * .input-wrapper is a horizontal flex row for icon + control pairs. The
     * barangay field also mounts a searchable-select (.ks-combo) beside the
     * mobile picker trigger, which made both children share one row at ~50%
     * width — icon on the far left, narrow trigger on the right. Stack the
     * trigger full-width and pull the combobox out of normal flow instead.
     */
    .auth-page.mobile-picker-ready .mobile-picker-field.input-wrapper {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .auth-page.mobile-picker-ready .mobile-picker-field .ks-combo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .auth-page.mobile-picker-ready .mobile-picker-field::before {
        content: "";
        position: absolute;
        top: 50%;
        left: var(--space-200);
        z-index: var(--z-content);
        width: 20px;
        height: 20px;
        background: url("../assets/icons/barangay.svg") center / contain no-repeat;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .auth-page.mobile-picker-ready .mobile-picker-field select.form-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }

    .auth-page.mobile-picker-ready .mobile-picker-trigger {
        appearance: none;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--size-field-md);
        padding: var(--space-175) 44px var(--space-175) var(--space-550);
        border: var(--border-width-thin) solid var(--color-border-input-default);
        border-radius: var(--radius-sm);
        background-color: var(--color-background-page);
        background-image: url("../assets/icons/dropdown.svg");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: var(--size-icon-xs);
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        line-height: var(--line-height-normal);
        text-align: left;
        transition: border-color var(--motion-duration-base) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard);
    }

    .auth-page.mobile-picker-ready .mobile-picker-trigger__value {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .auth-page.mobile-picker-ready .mobile-picker-trigger__value.is-placeholder {
        color: var(--color-text-tertiary);
    }

    .auth-page.mobile-picker-ready .mobile-picker-trigger[aria-invalid="true"] {
        border-color: var(--color-border-input-error);
    }

    .auth-page.mobile-picker-ready .mobile-picker-trigger:focus-visible {
        outline: none;
        border-color: var(--color-border-input-focus);
        border-width: var(--border-width-medium);
        box-shadow: var(--shadow-focus);
    }

    .auth-page.mobile-picker-ready .mobile-picker-modal {
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background: var(--gradient-surface-card);
    }

    .auth-page.mobile-picker-ready .mobile-picker-modal:not([hidden]) {
        display: flex;
    }

    .mobile-picker-modal__dialog {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100dvh;
    }

    .mobile-picker-modal__header {
        display: grid;
        grid-template-columns: 72px 1fr 72px;
        align-items: center;
        gap: var(--space-100);
        padding: calc(env(safe-area-inset-top) + var(--space-200)) var(--space-250) var(--space-175);
        border-bottom: var(--border-width-thin) solid var(--color-border-card);
        background: var(--gradient-surface-header);
        backdrop-filter: blur(8px);
    }

    .mobile-picker-modal__title {
        color: var(--color-text-heading);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        text-align: center;
    }

    .mobile-picker-modal__close {
        appearance: none;
        justify-self: start;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-text-brand);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
    }

    .mobile-picker-modal__close:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }

    .mobile-picker-modal__spacer {
        display: block;
    }

    .mobile-picker-modal__options {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: var(--space-100);
        overflow-y: auto;
        padding: var(--space-150) var(--space-250) calc(env(safe-area-inset-bottom) + var(--space-250));
    }

    .mobile-picker-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-150);
        width: 100%;
        padding: var(--space-200);
        border: var(--border-width-thin) solid var(--color-border-default);
        border-radius: var(--radius-lg);
        background: var(--color-background-surface);
        box-shadow: var(--shadow-surface-subtle);
        color: var(--color-text-secondary);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        text-align: left;
    }

    .mobile-picker-option::after {
        content: "";
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        border: var(--border-width-medium) solid var(--color-border-default);
        border-radius: var(--radius-full);
        background: transparent;
    }

    .mobile-picker-option.is-selected {
        border-color: var(--color-brand-300);
        background: var(--color-brand-75);
        color: var(--color-text-brand);
    }

    .mobile-picker-option.is-selected::after {
        border-color: var(--color-brand-400);
        background: var(--color-brand-400);
        box-shadow: 0 0 0 4px var(--color-alpha-blue-12);
    }

    .mobile-picker-option:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }
}

@media (min-width: 1280px) {
    .auth-visual-title {
        font-size: 44px;
    }

    .auth-visual-text {
        font-size: 21px;
    }
}

@media (max-width: 480px) {
    .auth-page .header {
        padding: var(--space-100) var(--space-200);
    }

    .auth-wordmark {
        font-size: var(--font-size-xl);
    }

    .auth-page .main-content {
        padding: var(--space-250);
    }

    .auth-page .container {
        padding: var(--space-250);
        border-radius: var(--radius-lg);
    }

    .auth-visual-title {
        font-size: var(--font-size-2xl);
    }

    .auth-visual-text {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-normal);
    }
}

/* --------------------------------------------------------------------------
 * Cabugao public landing page
 *
 * The public entry keeps the existing login form and validation behavior, but
 * presents it inside a civic landing page built around the Cabugao Municipal
 * Hall photograph and the two official seals.
 * ----------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body.auth-page {
    min-height: 100vh;
    overflow-y: auto;
    background: #062f54;
}

.auth-page .auth-skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 37, 70, 0.25);
    color: #003e6b;
    font-size: 14px;
    font-weight: 800;
    transform: translate(-50%, -150%);
    transition: transform 160ms ease;
}

.auth-page .auth-skip-link:focus {
    transform: translate(-50%, 0);
}

.auth-page .auth-header {
    position: absolute;
    top: 18px;
    right: 24px;
    left: 24px;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(330px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
    width: auto;
    min-height: 92px;
    padding: 14px 28px;
    border: 1px solid rgba(196, 218, 236, 0.95);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 40px rgba(0, 40, 76, 0.18);
    backdrop-filter: blur(16px);
}

.auth-page .auth-brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-width: 0;
    color: #003e6b;
}

.auth-page .auth-brand-seals {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.auth-page .auth-brand-seals img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* The SK mark has more transparent space inside its square canvas (152 of 192 px). */
.auth-page .auth-brand-seals img:nth-child(2) {
    transform: scale(1.26);
    transform-origin: center;
}

.auth-page .auth-brand-divider {
    width: 1px;
    height: 52px;
    margin: 0 18px;
    flex: 0 0 auto;
    background: #b7c9d9;
}

.auth-page .auth-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.auth-page .auth-wordmark {
    display: block;
    font-size: clamp(27px, 2vw, 34px);
    font-weight: 850;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.auth-page .auth-brand-subtitle {
    overflow: hidden;
    color: #37566f;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-page .auth-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 3.2vw, 52px);
    justify-self: center;
    white-space: nowrap;
}

.auth-page .auth-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: #0c3153;
    font-size: 14px;
    font-weight: 700;
    transition: color 160ms ease, transform 160ms ease;
}

.auth-page .auth-nav-link::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 2px;
    left: 50%;
    height: 3px;
    border-radius: 999px;
    background: #168bea;
    transition: right 160ms ease, left 160ms ease;
}

.auth-page .auth-nav-link:hover,
.auth-page .auth-nav-link:focus-visible,
.auth-page .auth-nav-link.active {
    color: #006fc7;
}

.auth-page .auth-nav-link:hover::after,
.auth-page .auth-nav-link:focus-visible::after,
.auth-page .auth-nav-link.active::after {
    right: 0;
    left: 0;
}

.auth-page .auth-nav-link:focus-visible,
.auth-page .auth-brand:focus-visible {
    outline: 3px solid rgba(22, 139, 234, 0.32);
    outline-offset: 4px;
    border-radius: 8px;
}

.auth-page .auth-location {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 9px;
    color: #173c5d;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.auth-page .auth-location img {
    width: 20px;
    height: 20px;
}

.auth-page .main-content {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding: 132px clamp(44px, 6vw, 108px) 48px;
    overflow: hidden;
    align-items: center;
    background-image: linear-gradient(90deg, rgba(1, 34, 63, 0.95) 0%, rgba(0, 55, 99, 0.84) 35%, rgba(7, 91, 151, 0.34) 64%, rgba(226, 240, 251, 0.42) 100%), url("../assets/images/cabugao-municipal-hall-hd.jpg");
    background-position: center;
    background-size: cover;
}

.auth-page .main-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(1, 38, 70, 0.03) 45%, rgba(0, 35, 66, 0.33) 100%), radial-gradient(circle at 82% 38%, rgba(255, 255, 255, 0.22), transparent 30%);
    pointer-events: none;
}

.auth-page .main-content::after {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -42%;
    left: -10%;
    z-index: -1;
    height: 56%;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(10, 112, 187, 0.04), rgba(0, 54, 99, 0.22));
    pointer-events: none;
}

.auth-page .auth-shell {
    width: 100%;
    max-width: 1510px;
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(390px, 470px);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
}

.auth-page .auth-visual {
    display: flex;
    width: 100%;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    align-self: auto;
    padding: 26px 0 10px;
    border: 0;
    background: transparent;
}

.auth-page .auth-visual-card {
    width: 100%;
    max-width: 720px;
    padding: 0;
    align-items: flex-start;
    gap: 0;
    text-align: left;
    transform: none;
}

.auth-page .auth-eyebrow {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-page .auth-eyebrow span {
    padding: 0 7px;
    color: #f7bf31;
}

.auth-page .auth-visual-title {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(54px, 5vw, 78px);
    font-weight: 850;
    line-height: 0.99;
    letter-spacing: -0.045em;
    text-align: left;
    text-shadow: 0 5px 20px rgba(0, 35, 66, 0.18);
}

.auth-page .auth-visual-title span {
    color: #329cff;
}

.auth-page .auth-title-accent {
    display: block;
    width: 126px;
    height: 4px;
    margin: 28px 0 22px;
    border-radius: 999px;
    background: #f6bf32;
}

.auth-page .auth-visual-text {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(18px, 1.55vw, 23px);
    font-weight: 650;
    line-height: 1.52;
    text-align: left;
    text-shadow: 0 2px 12px rgba(0, 29, 54, 0.28);
}

.auth-page .auth-feature-list {
    display: flex;
    padding: 12px;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px 0;
    margin-top: 48px;
}

.auth-page .auth-feature {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 0 28px;
    border-right: 1px solid rgba(247, 191, 49, 0.72);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    text-shadow: 0 2px 10px rgba(0, 29, 54, 0.34);
}

.auth-page .auth-feature:first-child {
    padding-left: 0;
}

.auth-page .auth-feature:last-child {
    padding-right: 0;
    border-right: 0;
}

.auth-page .auth-feature-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    background: rgba(1, 55, 99, 0.25);
    backdrop-filter: blur(8px);
}

.auth-page .auth-feature-icon img {
    width: 27px;
    height: 27px;
    filter: brightness(0) invert(1);
}

.auth-page .auth-panel {
    display: flex;
    width: 100%;
    min-height: 0;
    padding: 0;
    align-items: center;
    align-self: auto;
    justify-content: flex-end;
}

.auth-page .auth-panel .container {
    width: 100%;
    max-width: 470px;
    padding: 42px 40px 40px;
    overflow: visible;
    border: 1px solid rgba(203, 220, 234, 0.96);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 22px 60px rgba(0, 43, 78, 0.25);
    backdrop-filter: blur(18px);
}

.auth-page .auth-panel .container::before,
.auth-page .auth-panel .container::after {
    content: none;
}

.auth-page.login .auth-panel #login-form {
    width: 100%;
    max-width: 470px;
    max-height: none;
    padding: 42px 40px 40px;
    overflow: visible;
}

.auth-page .auth-panel .title {
    color: #003e6b;
    font-size: 34px;
    line-height: 1.1;
}

.auth-page .auth-panel .subtitle {
    margin-top: 7px;
    margin-bottom: 34px;
    color: #526a7e;
    font-size: 15px;
}

.auth-page .auth-panel .input-form.compact {
    gap: 20px;
}

.auth-page .auth-panel .form-label {
    margin-bottom: 7px;
    color: #27455f;
    font-size: 14px;
    font-weight: 650;
}

.auth-page .auth-panel .form-input {
    height: 58px;
    padding-left: 52px;
    border-color: #9fb2c3;
    border-radius: 9px;
    background: #ffffff;
    color: #26455f;
    font-size: 16px;
}

.auth-page .auth-panel .form-input:focus,
.auth-page .auth-panel .form-input:focus-visible {
    border-color: #168bea;
    box-shadow: 0 0 0 4px rgba(22, 139, 234, 0.15);
}

.auth-page .auth-panel .input-icon {
    left: 17px;
    width: 21px;
    height: 21px;
}

.auth-page .auth-panel .password-toggle {
    right: 13px;
}

.auth-page .auth-panel .help-text {
    margin-top: 4px;
    font-size: 12px;
}

.auth-page .auth-panel .form-message {
    margin-top: -16px;
    margin-bottom: 20px;
}

.auth-page .auth-panel .form-actions {
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 16px;
    margin-top: 18px;
}

.auth-page .auth-panel .btn {
    width: 100%;
    min-height: 54px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0;
}

.auth-page .auth-panel .btn-outline {
    border-color: #075b99;
    background: #ffffff;
    color: #075484;
}

.auth-page .auth-panel .btn-primary {
    background: linear-gradient(135deg, #07558d, #003e6b);
    color: #ffffff;
}

.auth-page #about,
.auth-page #services,
.auth-page #contact,
.auth-page #login-form {
    scroll-margin-top: 128px;
}

@media (max-width: 1280px) {
    .auth-page .auth-header {
        grid-template-columns: minmax(280px, 1fr) auto minmax(180px, 1fr);
        gap: 24px;
        min-height: 86px;
        padding: 12px 22px;
    }

    .auth-page .auth-brand-seals img {
        width: 43px;
        height: 43px;
    }

    .auth-page .auth-brand-divider {
        height: 44px;
        margin: 0 13px;
    }

    .auth-page .auth-brand-subtitle {
        display: none;
    }

    .auth-page .auth-nav {
        gap: 26px;
    }

    .auth-page .auth-location,
    .auth-page .auth-nav-link {
        font-size: 13px;
    }

    .auth-page .main-content {
        padding: 120px 44px 40px;
    }

    .auth-page .auth-shell {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
        gap: 42px;
    }

    .auth-page .auth-visual-title {
        font-size: clamp(50px, 5vw, 64px);
    }

    .auth-page .auth-feature {
        padding: 0 20px;
    }
}

@media (max-width: 1023px) {
    .auth-page .auth-header {
        position: absolute;
        grid-template-areas: "brand location" "nav nav";
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 24px;
        min-height: 112px;
        padding: 10px 20px 8px;
    }

    .auth-page .auth-brand {
        grid-area: brand;
    }

    .auth-page .auth-nav {
        grid-area: nav;
        width: 100%;
        justify-content: center;
        gap: clamp(24px, 7vw, 58px);
    }

    .auth-page .auth-location {
        grid-area: location;
    }

    .auth-page .main-content {
        min-height: 100vh;
        padding: 154px 34px 48px;
        background-image: linear-gradient(180deg, rgba(0, 44, 80, 0.83) 0%, rgba(0, 61, 107, 0.72) 47%, rgba(7, 67, 111, 0.70) 100%), url("../assets/images/cabugao-municipal-hall-hd.jpg");
    }

    .auth-page .auth-shell {
        max-width: 680px;
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .auth-page .auth-visual {
        padding: 10px 0 0;
    }

    .auth-page .auth-visual-card {
        max-width: 680px;
    }

    .auth-page .auth-visual-title {
        font-size: clamp(48px, 8vw, 66px);
    }

    .auth-page .auth-visual-text {
        max-width: 610px;
    }

    .auth-page .auth-feature-list {
        margin-top: 34px;
    }

    .auth-page .auth-panel,
    .auth-page .auth-panel .container,
    .auth-page.login .auth-panel #login-form {
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .auth-page .auth-header {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        grid-template-areas: "brand location" "nav nav";
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 10px 15px 7px;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: 0 8px 28px rgba(0, 40, 76, 0.16);
    }

    .auth-page .auth-brand-seals {
        gap: 5px;
    }

    .auth-page .auth-brand-seals img {
        width: 36px;
        height: 36px;
    }

    .auth-page .auth-brand-divider {
        height: 34px;
        margin: 0 9px;
    }

    .auth-page .auth-wordmark {
        font-size: 23px;
    }

    .auth-page .auth-location {
        gap: 5px;
        font-size: 11px;
    }

    .auth-page .auth-location img {
        width: 16px;
        height: 16px;
    }

    .auth-page .auth-nav {
        justify-content: space-between;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .auth-page .auth-nav::-webkit-scrollbar {
        display: none;
    }

    .auth-page .auth-nav-link {
        min-height: 34px;
        font-size: 11px;
    }

    .auth-page .main-content {
        min-height: calc(100vh - 93px);
        padding: 42px 20px 36px;
        overflow: visible;
        background-position: 46% center;
    }

    .auth-page .auth-shell {
        gap: 32px;
    }

    .auth-page .auth-eyebrow {
        margin-bottom: 13px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .auth-page .auth-visual-title {
        font-size: clamp(40px, 13vw, 56px);
    }

    .auth-page .auth-title-accent {
        width: 88px;
        margin: 21px 0 17px;
    }

    .auth-page .auth-visual-text {
        font-size: 16px;
        line-height: 1.48;
    }

    .auth-page .auth-feature-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 0;
        margin-top: 30px;
    }

    .auth-page .auth-feature {
        min-width: 0;
        padding: 0 9px;
        flex-direction: column;
        gap: 7px;
        font-size: 11px;
        text-align: center;
    }

    .auth-page .auth-feature:first-child {
        padding-left: 0;
    }

    .auth-page .auth-feature:last-child {
        padding-right: 0;
    }

    .auth-page .auth-feature-icon {
        width: 44px;
        height: 44px;
    }

    .auth-page .auth-feature-icon img {
        width: 22px;
        height: 22px;
    }

    .auth-page .auth-panel .container,
    .auth-page.login .auth-panel #login-form {
        padding: 30px 24px 26px;
        border-radius: 20px;
    }

    .auth-page .auth-panel .title {
        font-size: 29px;
    }

    .auth-page .auth-panel .subtitle {
        margin-bottom: 22px;
    }

    /* Phones: fields and buttons share one height and one vertical rhythm. */
    .auth-page .auth-panel .input-form.compact {
        gap: 18px;
    }

    .auth-page .auth-panel .form-label {
        margin-bottom: 8px;
    }

    .auth-page .auth-panel .form-input,
    .auth-page .auth-panel .btn {
        height: 52px;
        min-height: 52px;
    }

    .auth-page .auth-panel .form-actions {
        margin-top: 6px;
    }
}

@media (max-width: 440px) {
    .auth-page .auth-header {
        grid-template-areas: "brand brand" "nav nav";
    }

    .auth-page .auth-brand {
        justify-self: center;
    }

    .auth-page .auth-location {
        display: none;
    }

    .auth-page .main-content {
        min-height: calc(100vh - 91px);
        padding-right: 16px;
        padding-left: 16px;
    }

    .auth-page .auth-panel .form-actions {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .auth-page .auth-panel .btn-primary {
        grid-row: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .auth-page .auth-skip-link,
    .auth-page .auth-nav-link,
    .auth-page .auth-nav-link::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
 * Public landing content: About KabaTrak and youth services
 * ----------------------------------------------------------------------- */

body.auth-page {
    background: #d9edff;
}

.auth-page .auth-landing {
    display: block;
    min-height: 100vh;
    background: #d9edff;
}

.auth-page .auth-header {
    position: fixed;
}

.auth-page .auth-home-section,
.auth-page .auth-about-section,
.auth-page .auth-services-section {
    scroll-margin-top: 0;
}

.auth-page #about,
.auth-page #services {
    scroll-margin-top: 0;
}

.auth-page .auth-section-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1510px;
    margin: 0 auto;
}

.auth-page .auth-about-section,
.auth-page .auth-services-section {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    color: #0b3558;
}

.auth-page .auth-about-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 150px clamp(44px, 6vw, 108px) 126px;
    background: radial-gradient(circle at 11% 22%, rgba(255, 255, 255, 0.42), transparent 23%), radial-gradient(circle at 88% 18%, rgba(68, 160, 235, 0.16), transparent 31%), linear-gradient(135deg, #d3eaff 0%, #e4f3ff 46%, #cfe8fc 100%);
}

.auth-page .auth-about-section::before,
.auth-page .auth-services-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.44;
    pointer-events: none;
}

.auth-page .auth-about-section::before {
    background: linear-gradient(120deg, transparent 0 67%, rgba(10, 103, 174, 0.05) 67% 67.15%, transparent 67.15%), linear-gradient(28deg, transparent 0 79%, rgba(10, 103, 174, 0.045) 79% 79.12%, transparent 79.12%);
}

.auth-page .auth-about-layout {
    display: grid;
    grid-template-columns: minmax(460px, 0.83fr) minmax(560px, 1.17fr);
    align-items: center;
    gap: clamp(54px, 6vw, 104px);
}

.auth-page .auth-about-copy {
    min-width: 0;
}

.auth-page .auth-section-eyebrow {
    margin: 0 0 20px;
    color: #087bd2;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.auth-page .auth-section-title {
    margin: 0;
    color: #073b66;
    font-size: clamp(43px, 4vw, 62px);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.042em;
}

.auth-page .auth-section-title span {
    color: #168bea;
}

.auth-page .auth-section-accent {
    display: block;
    width: 88px;
    height: 4px;
    margin: 26px 0 23px;
    border-radius: 999px;
    background: #f3b800;
    box-shadow: 11px 0 0 -1px #f3b800;
}

.auth-page .auth-section-copy {
    max-width: 650px;
    margin: 0;
    color: #395b78;
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 520;
    line-height: 1.7;
}

.auth-page .auth-about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.auth-page .auth-value-card {
    display: flex;
    min-height: 154px;
    padding: 22px 16px 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(132, 178, 213, 0.48);
    border-radius: 16px;
    background: rgba(248, 252, 255, 0.74);
    box-shadow: 0 12px 28px rgba(28, 91, 139, 0.08);
    text-align: center;
    backdrop-filter: blur(8px);
}

.auth-page .auth-section-icon,
.auth-page .auth-service-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dceeff;
    color: #064879;
}

.auth-page .auth-section-icon {
    width: 58px;
    height: 58px;
}

.auth-page .auth-section-icon svg {
    width: 31px;
    height: 31px;
}

.auth-page .auth-section-icon svg,
.auth-page .auth-service-icon svg {
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-page .auth-value-accent,
.auth-page .auth-service-accent {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: #f3b800;
}

.auth-page .auth-value-accent {
    margin: 13px auto 11px;
}

.auth-page .auth-value-card h3 {
    margin: 0;
    color: #073b66;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.auth-page .auth-about-media {
    position: relative;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1.48 / 1;
    border: 1px solid rgba(130, 175, 210, 0.55);
    border-radius: 28px;
    background: #a5cae9;
    box-shadow: 0 24px 54px rgba(24, 83, 128, 0.19);
}

.auth-page .auth-about-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.auth-page .auth-about-media--illustration {
    aspect-ratio: 1.34 / 1;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.auth-page .auth-about-media--illustration img {
    padding: clamp(6px, 1vw, 14px);
    object-fit: contain;
}

.auth-page .auth-about-media--illustration .auth-about-media-swoop,
.auth-page .auth-about-media--illustration .auth-about-media-line {
    display: none;
}

.auth-page .auth-about-media--illustration::after {
    display: none;
}

.auth-page .auth-about-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

.auth-page .auth-about-media-swoop {
    position: absolute;
    right: -7%;
    bottom: -22%;
    width: 49%;
    height: 42%;
    border-radius: 70% 0 0 0;
    background: linear-gradient(135deg, #087bc3, #003e6b);
    transform: rotate(-8deg);
    transform-origin: bottom right;
}

.auth-page .auth-about-media-line {
    position: absolute;
    right: 5.5%;
    bottom: 5.6%;
    width: 29%;
    height: 2px;
    border-radius: 999px;
    background: #f3b800;
}

.auth-page .auth-about-media-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f3b800;
    transform: translateY(-50%);
}

.auth-page .auth-connection-band {
    position: absolute;
    right: 10%;
    bottom: 33px;
    left: 10%;
    z-index: 1;
    display: flex;
    align-items: center;
    opacity: 0.6;
}

.auth-page .auth-connection-band span {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 3px solid rgba(8, 107, 182, 0.34);
    border-radius: 50%;
    background: #e6f4ff;
}

.auth-page .auth-connection-band i {
    height: 1px;
    flex: 1 1 auto;
    background: repeating-linear-gradient(90deg, rgba(8, 107, 182, 0.26) 0 3px, transparent 3px 8px);
}

.auth-page .auth-services-section {
    display: flex;
    align-items: center;
    padding: 144px clamp(44px, 6vw, 108px) 76px;
    background: radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.38), transparent 25%), radial-gradient(circle at 92% 72%, rgba(28, 137, 221, 0.14), transparent 30%), linear-gradient(145deg, #cfe8fd 0%, #e1f1ff 50%, #c9e5fb 100%);
}

.auth-page .auth-services-section::before {
    background: radial-gradient(circle at 10% 22%, rgba(8, 112, 190, 0.19) 0 7px, transparent 8px), radial-gradient(circle at 16% 38%, rgba(8, 112, 190, 0.14) 0 5px, transparent 6px), radial-gradient(circle at 6% 65%, rgba(8, 112, 190, 0.14) 0 6px, transparent 7px), radial-gradient(circle at 90% 25%, rgba(8, 112, 190, 0.16) 0 7px, transparent 8px), radial-gradient(circle at 96% 48%, rgba(8, 112, 190, 0.13) 0 5px, transparent 6px), linear-gradient(48deg, transparent 0 13%, rgba(8, 112, 190, 0.12) 13% 13.12%, transparent 13.12% 100%), linear-gradient(132deg, transparent 0 87%, rgba(8, 112, 190, 0.1) 87% 87.12%, transparent 87.12% 100%);
}

.auth-page .auth-services-heading {
    max-width: 860px;
    margin: 0 auto 36px;
    text-align: center;
}

.auth-page .auth-services-heading .auth-section-eyebrow {
    margin-bottom: 13px;
}

.auth-page .auth-services-heading .auth-section-title {
    font-size: clamp(42px, 4vw, 58px);
}

.auth-page .auth-services-heading .auth-section-accent {
    margin-right: auto;
    margin-left: auto;
}

.auth-page .auth-services-heading .auth-section-copy {
    max-width: 740px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.55;
}

.auth-page .auth-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 28px;
    max-width: 1280px;
    margin: 0 auto;
}

.auth-page .auth-service-card {
    position: relative;
    display: grid;
    min-height: 180px;
    padding: 30px 27px;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    overflow: hidden;
    border: 1px solid rgba(128, 175, 211, 0.48);
    border-radius: 18px;
    background: rgba(248, 252, 255, 0.78);
    box-shadow: 0 14px 30px rgba(34, 94, 141, 0.09);
    backdrop-filter: blur(9px);
}

.auth-page .auth-service-card-featured::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #0878c8, #168bea);
}

/* Phones: every service card looks the same (no blue top line). */
@media (max-width: 768px) {
    .auth-page .auth-service-card-featured::before {
        display: none;
    }
}

.auth-page .auth-service-icon {
    width: 76px;
    height: 76px;
}

/* Same icons as the admin sidebar (24-unit grid). */
.auth-page .auth-service-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.75;
}

.auth-page .auth-service-card h3 {
    margin: 0;
    color: #073b66;
    font-size: 17px;
    font-weight: 820;
    line-height: 1.25;
}

.auth-page .auth-service-accent {
    margin: 13px 0 16px;
}

.auth-page .auth-service-card p {
    margin: 0;
    color: #45647f;
    font-size: 14px;
    font-weight: 520;
    line-height: 1.55;
}

@media (max-width: 1280px) {
    .auth-page .auth-about-section,
    .auth-page .auth-services-section {
        padding-right: 44px;
        padding-left: 44px;
    }

    .auth-page .auth-about-layout {
        grid-template-columns: minmax(410px, 0.9fr) minmax(470px, 1.1fr);
        gap: 45px;
    }

    .auth-page .auth-about-values {
        gap: 13px;
    }

    .auth-page .auth-value-card {
        min-height: 145px;
        padding-right: 11px;
        padding-left: 11px;
    }

    .auth-page .auth-service-card {
        min-height: 176px;
        padding: 26px 22px;
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 17px;
    }

    .auth-page .auth-service-icon {
        width: 66px;
        height: 66px;
    }
}

@media (max-width: 1023px) {
    .auth-page .auth-header {
        position: fixed;
    }

    .auth-page .auth-about-section,
    .auth-page .auth-services-section {
        min-height: auto;
        padding-top: 176px;
        padding-bottom: 92px;
    }

    .auth-page .auth-about-layout {
        grid-template-columns: 1fr;
        max-width: 760px;
        gap: 50px;
    }

    .auth-page .auth-about-media {
        width: 100%;
    }

    .auth-page .auth-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 820px;
    }

    .auth-page .auth-service-card {
        min-height: 170px;
    }
}

@media (max-width: 700px) {
    body.auth-page {
        background: #d8ecfd;
    }

    .auth-page .auth-header {
        position: sticky;
        top: 0;
    }

    .auth-page .auth-home-section {
        overflow: hidden;
    }

    .auth-page .auth-about-section,
    .auth-page .auth-services-section {
        padding: 58px 20px 68px;
    }

    .auth-page .auth-section-eyebrow {
        margin-bottom: 13px;
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .auth-page .auth-section-title,
    .auth-page .auth-services-heading .auth-section-title {
        font-size: clamp(34px, 9.5vw, 46px);
    }

    .auth-page .auth-section-copy {
        font-size: 16px;
        line-height: 1.6;
    }

    .auth-page .auth-about-values {
        gap: 10px;
    }

    .auth-page .auth-value-card {
        min-height: 132px;
        padding: 17px 8px;
    }

    .auth-page .auth-section-icon {
        width: 48px;
        height: 48px;
    }

    .auth-page .auth-value-card h3 {
        font-size: 12px;
    }

    .auth-page .auth-about-media {
        border-radius: 20px;
    }

    .auth-page .auth-connection-band {
        right: 7%;
        bottom: 20px;
        left: 7%;
    }

    .auth-page .auth-services-heading {
        margin-bottom: 30px;
    }

    .auth-page .auth-services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .auth-page .auth-service-card {
        min-height: 0;
        padding: 22px 20px;
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 16px;
    }

    .auth-page .auth-service-icon {
        width: 60px;
        height: 60px;
    }

    .auth-page .auth-service-icon svg {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 440px) {
    .auth-page .auth-about-section,
    .auth-page .auth-services-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .auth-page .auth-about-values {
        grid-template-columns: 1fr;
    }

    .auth-page .auth-value-card {
        min-height: 118px;
    }

    .auth-page .auth-about-media {
        aspect-ratio: 1.15 / 1;
    }

    .auth-page .auth-about-media--illustration {
        aspect-ratio: 1.34 / 1;
    }

    .auth-page .auth-service-card {
        padding: 20px 17px;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
    }

    .auth-page .auth-service-icon {
        width: 54px;
        height: 54px;
    }

    .auth-page .auth-service-card h3 {
        font-size: 15px;
    }

    .auth-page .auth-service-card p {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
 * Public landing motion
 *
 * Motion supports the page hierarchy: the hero introduces the platform,
 * sections reveal as they enter view, and the connection band carries a
 * restrained signal between barangays. JavaScript only adds state classes;
 * the page remains fully readable without it.
 * ----------------------------------------------------------------------- */

.auth-motion-ready .auth-hero-motion {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--auth-motion-delay, 90ms);
    will-change: opacity, transform;
}

.auth-motion-ready .auth-panel .auth-hero-motion {
    transform: translateX(28px) scale(0.985);
}

.auth-motion-ready .auth-hero-motion.is-visible,
.auth-motion-ready .auth-panel .auth-hero-motion.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.auth-motion-ready .auth-scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--auth-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.auth-motion-ready .auth-about-media.auth-scroll-reveal {
    transform: translateX(34px) scale(0.98);
}

.auth-motion-preparing .auth-hero-motion,
.auth-motion-preparing .auth-scroll-reveal,
.auth-motion-preparing .auth-about-media.auth-scroll-reveal {
    transition: none !important;
}

.auth-motion-ready .auth-scroll-reveal.is-visible,
.auth-motion-ready .auth-about-media.auth-scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.auth-page .auth-feature-icon,
.auth-page .auth-value-card,
.auth-page .auth-section-icon,
.auth-page .auth-service-card,
.auth-page .auth-service-icon {
    transition: transform 240ms ease, border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}

/* Visible ambient motion keeps the Home section alive after its entrance. */
.auth-page .main-content::before {
    animation: auth-hero-light 9s ease-in-out infinite alternate;
}

.auth-page .auth-visual-title span {
    display: inline-block;
    animation: auth-youth-highlight 4.8s ease-in-out 1.2s infinite;
}

.auth-page .auth-feature-icon {
    position: relative;
}

.auth-page .auth-feature-icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(83, 180, 255, 0.72);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: auth-feature-signal 4.8s ease-out infinite;
}

.auth-page .auth-feature:nth-child(1) .auth-feature-icon::after {
    animation-delay: 1.4s;
}

.auth-page .auth-feature:nth-child(2) .auth-feature-icon::after {
    animation-delay: 1.9s;
}

.auth-page .auth-feature:nth-child(3) .auth-feature-icon::after {
    animation-delay: 2.4s;
}

.auth-motion-ready .auth-about-media.is-visible img {
    animation: auth-community-float 6s ease-in-out 700ms infinite;
}

@media (hover: hover) and (pointer: fine) {
    .auth-page .auth-feature:hover .auth-feature-icon {
        transform: translateY(-3px) scale(1.05);
        border-color: rgba(255, 255, 255, 0.9);
        background: rgba(15, 133, 218, 0.34);
    }

    .auth-page .auth-value-card:hover,
    .auth-page .auth-service-card:hover {
        transform: translateY(-6px);
        border-color: rgba(56, 146, 215, 0.62);
        box-shadow: 0 20px 38px rgba(26, 87, 134, 0.15);
    }

    .auth-page .auth-value-card:hover .auth-section-icon,
    .auth-page .auth-service-card:hover .auth-service-icon {
        transform: scale(1.06);
        background: #cfe9ff;
    }
}

.auth-page .auth-connection-band {
    overflow: hidden;
}

.auth-page .auth-connection-band::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 18%;
    height: 3px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(19, 139, 224, 0.85), #f3b800, transparent);
    filter: drop-shadow(0 0 5px rgba(19, 139, 224, 0.42));
    transform: translate(-110%, -50%);
    pointer-events: none;
}

.auth-page .auth-connection-band.is-active::after {
    opacity: 1;
    animation: auth-connection-signal 5.8s linear infinite;
}

.auth-page .auth-connection-band.is-active span {
    animation: auth-connection-node 5.8s ease-in-out infinite;
    animation-delay: var(--auth-node-delay, 0ms);
}

@keyframes auth-connection-signal {
    from {
        transform: translate(-110%, -50%);
    }

    to {
        transform: translate(650%, -50%);
    }
}

@keyframes auth-connection-node {
    0%,
    18%,
    100% {
        border-color: rgba(8, 107, 182, 0.34);
        box-shadow: 0 0 0 0 rgba(8, 123, 210, 0);
        transform: scale(1);
    }

    8% {
        border-color: rgba(8, 123, 210, 0.78);
        box-shadow: 0 0 0 6px rgba(8, 123, 210, 0.1);
        transform: scale(1.14);
    }
}

@keyframes auth-hero-light {
    from {
        opacity: 0.72;
    }

    to {
        opacity: 1;
    }
}

@keyframes auth-youth-highlight {
    0%,
    100% {
        color: #329cff;
        text-shadow: 0 5px 20px rgba(0, 35, 66, 0.18);
        transform: translateY(0);
    }

    50% {
        color: #55b4ff;
        text-shadow: 0 0 26px rgba(49, 160, 248, 0.5);
        transform: translateY(-3px);
    }
}

@keyframes auth-feature-signal {
    0%,
    44%,
    100% {
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 0.75;
    }

    24% {
        opacity: 0;
        transform: scale(1.26);
    }
}

@keyframes auth-community-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* Keep attention on validation feedback after a failed sign-in instead of
 * replaying or restarting the decorative Home motion. */
.auth-login-error .auth-page .main-content::before,
.auth-login-error .auth-page .auth-visual-title span,
.auth-login-error .auth-page .auth-feature-icon::after {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .auth-motion-ready .auth-hero-motion,
    .auth-motion-ready .auth-panel .auth-hero-motion,
    .auth-motion-ready .auth-scroll-reveal,
    .auth-motion-ready .auth-about-media.auth-scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .auth-page .auth-feature-icon,
    .auth-page .auth-value-card,
    .auth-page .auth-section-icon,
    .auth-page .auth-service-card,
    .auth-page .auth-service-icon,
    .auth-page .main-content::before,
    .auth-page .auth-visual-title span,
    .auth-page .auth-feature-icon::after,
    .auth-page .auth-about-media img,
    .auth-page .auth-connection-band::after,
    .auth-page .auth-connection-band span {
        animation: none;
        transition: none;
    }

    .auth-page .auth-connection-band::after {
        display: none;
    }
}

/* Shared registration/first-login password feedback. */
.auth-page .registration-password-meter {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: #e5edf3;
    margin-top: 6px;
}

.auth-page .registration-password-meter span {
    display: block;
    width: 0;
    height: 100%;
    transition: width .15s ease;
}

.auth-page .registration-password-meter .is-weak {
    width: 25%;
    background: #dc2626;
}

.auth-page .registration-password-meter .is-fair {
    width: 50%;
    background: #f59e0b;
}

.auth-page .registration-password-meter .is-good {
    width: 75%;
    background: #0ea5e9;
}

.auth-page .registration-password-meter .is-strong {
    width: 100%;
    background: var(--color-teal-500);
}

/* Centered card; Log out and Update Password share one row (stacked on small phones). */
.auth-page.forced-password-page .main-content {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 64px);
    padding: 32px 16px;
    box-sizing: border-box;
}

.auth-page.forced-password-page .auth-shell {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.auth-page.forced-password-page .auth-panel {
    width: 100%;
}

.auth-page.forced-password-page .container {
    max-width: 100%;
    padding: 32px;
    background: var(--color-background-surface, #fff);
}

.auth-page.forced-password-page .form-actions {
    grid-template-columns: 1fr 1fr;
}

.auth-page.forced-password-page .form-actions .btn {
    width: 100%;
}

@media (max-width: 440px) {
    .auth-page.forced-password-page .form-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .auth-page.forced-password-page .container {
        padding: 24px;
    }
}