/* ==========================================================================
   Candidate Login & Reset Password — Complete Styles
   Standalone file (no .candidate-ui scope — auth pages use own layout)
   Tokens provided by tokens.css (loaded via auth/layout.html)
   ========================================================================== */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.login-page {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Dynamic viewport unit tracks the visible area when the on-screen
       keyboard opens, so the card stays reachable and the page can scroll. */
    min-height: 100dvh;
    padding: var(--c-space-lg);
    font-family: var(--c-font-family);
    background: color-mix(in srgb, var(--c-color-primary) 4%, var(--c-color-background));
}

/* ==========================================================================
   Card
   ========================================================================== */

.login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--c-space-xl);
    background: var(--c-color-surface);
    border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow-lg);
    text-align: center;
    overflow: hidden;
}

/* Restrained navy brand accent along the top of the card */
.login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--c-color-text);
}

.login-card__logo {
    margin-bottom: var(--c-space-md);
}

.login-card__logo-img {
    height: 40px;
    width: auto;
}

.login-card__title {
    margin: 0 0 var(--c-space-xs);
    font-family: var(--c-font-heading);
    font-size: var(--c-font-size-xl);
    font-weight: var(--c-font-weight-bold);
    color: var(--c-color-text);
    line-height: 1.2;
}

.login-card__subtitle {
    margin: 0 0 var(--c-space-lg);
    font-size: var(--c-font-size-base);
    color: color-mix(in srgb, var(--c-color-text) 75%, var(--c-color-text-muted));
}

/* ==========================================================================
   Error Region
   ========================================================================== */

.login-card__error {
    margin-bottom: var(--c-space-lg);
    min-height: 0;
}

.login-card__error:empty {
    display: none;
}

.login-card__error-content {
    display: flex;
    align-items: flex-start;
    gap: var(--c-space-sm);
    padding: var(--c-space-md);
    background: var(--c-color-error-bg);
    border: 1px solid var(--c-color-error-border);
    border-radius: var(--c-radius-sm);
    color: var(--c-color-error);
    font-size: var(--c-font-size-sm);
    text-align: left;
    line-height: var(--c-line-height);
}

.login-card__error-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ==========================================================================
   Form
   ========================================================================== */

.login-card__form {
    text-align: left;
}

/* ==========================================================================
   Form Fields
   ========================================================================== */

.login-field {
    margin-bottom: var(--c-space-lg);
}

.login-field__label {
    display: block;
    margin-bottom: var(--c-space-sm);
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-text);
}

/* Label row: label on the left, "Forgot password?" on the right.
   Wraps gracefully when text is enlarged or the screen is narrow. */
.login-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 var(--c-space-md);
    margin-bottom: var(--c-space-sm);
}

.login-field__label-row .login-field__label {
    margin-bottom: 0;
}

.login-field__forgot {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: var(--c-space-xs) 0;
    margin: calc(-1 * var(--c-space-xs)) 0;
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-primary);
    text-decoration: none;
    transition: color var(--c-transition-fast);
}

.login-field__forgot:hover {
    color: var(--c-color-primary-hover);
    text-decoration: underline;
}

.login-field__forgot:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
    border-radius: var(--c-radius-sm);
}

.login-field__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-field__icon {
    position: absolute;
    left: var(--c-space-md);
    color: var(--c-color-icon);
    font-size: var(--c-font-size-base);
    pointer-events: none;
    transition: color var(--c-transition-fast);
}

.login-field__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--c-space-md) 0 2.75rem;
    font-size: var(--c-font-size-base);
    font-family: var(--c-font-family);
    color: var(--c-color-text);
    background: var(--c-color-input-bg);
    border: 1px solid var(--c-color-border);
    border-radius: var(--c-radius-md);
    outline: none;
    transition: border-color var(--c-transition-fast),
                box-shadow var(--c-transition-fast),
                background-color var(--c-transition-fast);
}

.login-field__input::placeholder {
    color: var(--c-color-icon);
}

.login-field__input:hover {
    border-color: var(--c-color-border-hover);
}

/* Login page: no field icons, so refine field to white bg, clearer border,
   and standard horizontal padding. */
.login-page .login-field__input {
    height: 46px;
    padding: 0 var(--c-space-md);
    background: var(--c-color-surface);
    border-color: var(--c-color-border-hover);
}

.login-page .login-field__input--password {
    padding-right: 3rem;
}

.login-page .login-field__input:hover {
    border-color: var(--c-color-text-muted);
}

.login-field__input:focus {
    border-color: var(--c-color-border-focus);
    box-shadow: var(--c-shadow-focus);
    background: var(--c-color-surface);
}

/* Ensure the icon changes colour when the input is focused */
.login-field__input-wrapper:focus-within .login-field__icon {
    color: var(--c-color-border-focus);
}

/* Password input needs extra padding for the toggle button */
.login-field__input--password {
    padding-right: 3.5rem;
}

/* Password toggle button */
.login-field__toggle {
    position: absolute;
    right: var(--c-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--c-radius-sm);
    background: transparent;
    color: var(--c-color-icon);
    cursor: pointer;
    transition: color var(--c-transition-fast),
                background-color var(--c-transition-fast);
}

.login-field__toggle:hover {
    color: var(--c-color-text);
    background: var(--c-color-input-bg);
}

.login-field__toggle:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.login-card__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin-top: var(--c-space-md);
    padding: 0 var(--c-space-lg);
    font-size: var(--c-font-size-lg);
    font-weight: var(--c-font-weight-semibold);
    font-family: var(--c-font-family);
    color: var(--c-color-text-inverse);
    background: var(--c-color-primary);
    border: none;
    border-radius: var(--c-radius-md);
    cursor: pointer;
    transition: background-color var(--c-transition-fast),
                box-shadow var(--c-transition-fast),
                transform var(--c-transition-fast);
}

.login-card__submit:hover {
    background: var(--c-color-primary-hover);
    box-shadow: var(--c-shadow-md);
}

.login-card__submit:active {
    background: var(--c-color-primary-active);
    transform: translateY(1px);
}

.login-card__submit:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
    box-shadow: var(--c-shadow-focus);
}

.login-card__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Loading state */
.login-card__submit-loading {
    display: none;
}

.login-card__submit--loading .login-card__submit-text {
    display: none;
}

.login-card__submit--loading .login-card__submit-loading {
    display: inline;
}

/* ==========================================================================
   Secondary Actions — Help Section
   ========================================================================== */

.login-card__help {
    margin-top: var(--c-space-xl);
    padding-top: var(--c-space-lg);
    border-top: 1px solid var(--c-color-border);
    text-align: center;
}

/* Login page: tighter, simplified single-route footer */
.login-page .login-card__help {
    margin-top: var(--c-space-lg);
    padding-top: var(--c-space-md);
}

.login-card__help-heading {
    margin: 0 0 var(--c-space-md);
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-semibold);
    color: var(--c-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Row containing a link/button + hint */
.login-card__help-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--c-space-xs);
}

/* Helper hint text */
.login-card__help-hint {
    font-size: 0.75rem;
    font-weight: var(--c-font-weight-normal);
    color: var(--c-color-text-muted);
    line-height: var(--c-line-height);
}

/* --- Subtle text link (used on OTP/help pages) --- */

.login-card__help-link {
    display: inline-flex;
    align-items: center;
    gap: var(--c-space-xs);
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-primary);
    text-decoration: none;
    padding: var(--c-space-xs) var(--c-space-sm);
    border-radius: var(--c-radius-sm);
    transition: color var(--c-transition-fast),
                background-color var(--c-transition-fast);
}

.login-card__help-link:hover {
    color: var(--c-color-primary-hover);
    background: color-mix(in srgb, var(--c-color-primary) 5%, transparent);
    text-decoration: none;
}

.login-card__help-link:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
}

.login-card__help-link-icon {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* --- Login page: single alternate sign-in route line --- */

.login-card__help-alt {
    margin: 0;
    font-size: var(--c-font-size-sm);
    color: color-mix(in srgb, var(--c-color-text) 70%, var(--c-color-text-muted));
}

.login-card__help-alt-link {
    font-weight: var(--c-font-weight-semibold);
    color: var(--c-color-primary);
    text-decoration: none;
    transition: color var(--c-transition-fast);
}

.login-card__help-alt-link:hover {
    color: var(--c-color-primary-hover);
    text-decoration: underline;
}

.login-card__help-alt-link:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
    border-radius: var(--c-radius-sm);
}

/* ==========================================================================
   Reset Password — Back Link
   ========================================================================== */

.reset-card__back {
    margin-top: var(--c-space-xl);
    padding-top: var(--c-space-lg);
    border-top: 1px solid var(--c-color-border);
    text-align: center;
}

.reset-card__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--c-space-xs);
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-text-muted);
    text-decoration: none;
    padding: var(--c-space-xs) var(--c-space-sm);
    border-radius: var(--c-radius-sm);
    transition: color var(--c-transition-fast),
                background-color var(--c-transition-fast);
}

.reset-card__back-link:hover {
    color: var(--c-color-primary);
    background: color-mix(in srgb, var(--c-color-primary) 5%, transparent);
    text-decoration: none;
}

.reset-card__back-link:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
}

.reset-card__back-icon {
    font-size: 0.75rem;
    transition: transform var(--c-transition-fast);
}

.reset-card__back-link:hover .reset-card__back-icon {
    transform: translateX(-2px);
}

/* ==========================================================================
   Field-level validation error (reset password page)
   ========================================================================== */

.login-field__error {
    display: flex;
    align-items: center;
    gap: var(--c-space-xs);
    margin-top: var(--c-space-sm);
    padding: 0;
    font-size: var(--c-font-size-sm);
    color: var(--c-color-error);
    line-height: var(--c-line-height);
}

.login-field__error i {
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* ==========================================================================
   Password Requirements Checklist
   ========================================================================== */

.login-card__requirements {
    text-align: left;
    padding: var(--c-space-sm) var(--c-space-md);
    margin-top: var(--c-space-sm);
    background: var(--c-color-input-bg);
    border: 1px solid var(--c-color-border);
    border-radius: var(--c-radius-md);
    font-size: var(--c-font-size-sm);
    color: var(--c-color-text);
    line-height: 1.6;
}

.login-card__requirements-heading {
    font-weight: var(--c-font-weight-medium);
    margin-bottom: var(--c-space-xs);
    color: var(--c-color-text-muted);
}

/* Neutral-by-default requirement checklist. Items start grey (untouched),
   turn green with a check when satisfied, and only show an error state once
   the user has started typing. Never relies on colour alone — the icon shape
   also changes (dot -> check -> cross). */
.login-card__requirements-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.requirement {
    display: flex;
    align-items: center;
    gap: var(--c-space-sm);
    color: var(--c-color-text-muted);
}

.requirement__icon {
    flex-shrink: 0;
    font-size: 0.5rem;
    width: 0.9rem;
    text-align: center;
    color: var(--c-color-icon);
}

.requirement--met {
    color: var(--c-color-success);
}

.requirement--met .requirement__icon {
    font-size: var(--c-font-size-sm);
    color: var(--c-color-success);
}

.requirement--unmet {
    color: var(--c-color-error);
}

.requirement--unmet .requirement__icon {
    font-size: var(--c-font-size-sm);
    color: var(--c-color-error);
}

/* ==========================================================================
   Info Callout (e.g. password hints)
   ========================================================================== */

.login-card__info-box {
    display: flex;
    align-items: flex-start;
    gap: var(--c-space-sm);
    text-align: left;
    padding: var(--c-space-sm) var(--c-space-md);
    background: var(--c-color-info-bg);
    border: 1px solid var(--c-color-info-border);
    border-radius: var(--c-radius-sm);
    font-size: var(--c-font-size-sm);
    color: var(--c-color-info-text);
    line-height: var(--c-line-height);
}

.login-card__info-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ==========================================================================
   Dev Panel (local development only)
   ========================================================================== */

/* Local dev panel only — not part of the design system */
.login-card__dev {
    margin-top: var(--c-space-lg);
    padding-top: var(--c-space-lg);
    border-top: 1px solid var(--c-color-border);
}

.login-card__dev-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--c-space-sm);
    width: 100%;
    padding: var(--c-space-sm) var(--c-space-md);
    border: none;
    border-radius: var(--c-radius-sm);
    background: #fef9c3;
    color: #92400e;
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--c-transition-fast);
}

.login-card__dev-toggle:hover {
    background: #fef08a;
}

.login-card__dev-panel {
    margin-top: var(--c-space-sm);
}

.login-card__dev-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.login-card__dev-item {
    border-bottom: 1px solid var(--c-color-border);
}

.login-card__dev-item:last-child {
    border-bottom: none;
}

.login-card__dev-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--c-space-xs);
    padding: var(--c-space-sm) var(--c-space-md);
    text-decoration: none;
    color: var(--c-color-text);
    border-radius: var(--c-radius-sm);
    transition: background-color var(--c-transition-fast);
}

.login-card__dev-link:hover {
    background: var(--c-color-input-bg);
    text-decoration: none;
    color: var(--c-color-text);
}

.login-card__dev-name {
    font-weight: var(--c-font-weight-semibold);
    font-size: var(--c-font-size-sm);
    min-width: 90px;
}

.login-card__dev-email {
    font-size: var(--c-font-size-sm);
    color: var(--c-color-text-muted);
    margin-right: auto;
}

.login-card__dev-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.6875rem;
    font-weight: var(--c-font-weight-medium);
    background: #e2e8f0;
    color: #475569;
    border-radius: 3px;
}

.login-card__dev-badge--extra {
    background: #f1f5f9;
    color: #94a3b8;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .login-page {
        padding: var(--c-space-md);
        align-items: flex-start;
        padding-top: var(--c-space-lg);
    }

    .login-card {
        padding: var(--c-space-xl) var(--c-space-lg);
        border-radius: var(--c-radius-md);
    }

    .login-card__title {
        font-size: 1.375rem;
    }
}

/* Short viewports (e.g. on-screen keyboard open, landscape phones):
   pin the form near the top and keep the page scrollable so the password
   field and Sign in button stay reachable. */
@media (max-height: 640px) {
    .login-page {
        align-items: flex-start;
        padding-top: var(--c-space-md);
        padding-bottom: var(--c-space-md);
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .login-field__input,
    .login-field__toggle,
    .login-field__icon,
    .login-card__submit,
    .login-card__help-link,
    .login-card__help-alt-link,
    .login-field__forgot,
    .reset-card__back-link,
    .reset-card__back-icon {
        transition: none;
    }
}


/* ==========================================================================
   ==========================================================================
   Sign-in redesign (split navy/white layout)
   Used by auth/login.html. Other auth pages (reset/change/OTP) continue to
   use the .login-card styles above. Scoped under .signin to avoid overlap.
   ==========================================================================
   ========================================================================== */

.signin {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--c-font-family);
    color: var(--c-color-text);
    background: var(--c-color-surface);
}

/* ==========================================================================
   Brand panel — compact header on mobile, full column on desktop
   ========================================================================== */

.signin__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-midnight-500);
    color: var(--c-color-text-inverse);
    overflow: hidden;
}

/* Mobile: compact brand header (logo + portal name only) */
.signin__brand-top {
    display: flex;
    align-items: center;
    padding: var(--c-space-md) var(--c-space-lg);
}

.signin__brand-logo {
    display: flex;
    align-items: center;
    gap: var(--c-space-sm);
}

.signin__brand-logo-img {
    height: 26px;
    width: auto;
}

.signin__brand-portal {
    font-family: var(--c-font-heading);
    font-size: 1.375rem;              /* ~22px mobile brand title */
    font-weight: var(--c-font-weight-bold);
    line-height: 1.15;
    color: var(--c-color-text-inverse);
}

/* Desktop-only brand content (title + tagline) — hidden on mobile */
.signin__brand-body {
    display: none;
}

.signin__brand-title {
    margin: 0 0 var(--c-space-sm);
    font-family: var(--c-font-heading);
    font-weight: var(--c-font-weight-bold);
    line-height: 1.1;
}

.signin__brand-tagline {
    margin: 0;
    font-size: var(--c-font-size-lg);
    font-weight: var(--c-font-weight-light);
    color: color-mix(in srgb, var(--c-color-text-inverse) 82%, var(--c-midnight-500));
}

/* ==========================================================================
   Sign-in area (white)
   ========================================================================== */

.signin__panel {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    padding: var(--c-space-xl) var(--c-space-lg);
    background: var(--c-color-surface);
}

.signin__content {
    width: 100%;
    max-width: 420px;
    margin: auto 0;
}

/* Mobile (below the desktop split breakpoint): the form sits directly below
   the compact brand header rather than vertically centred. Remove the auto
   margin and top-align the content, offsetting it ~32px below the header.
   Horizontal padding, field sizes and spacing are left untouched. Natural
   page scrolling is preserved (no fixed heights), so short screens and an
   open keyboard simply extend and scroll the page. */
@media (max-width: 899.98px) {
    .signin__panel {
        align-items: flex-start;
        /* 32px below the brand header; keep existing horizontal padding */
        padding-top: 32px;
    }

    .signin__content {
        margin: 0;
    }
}

.signin__heading {
    margin: 0 0 var(--c-space-sm);
    font-family: var(--c-font-heading);
    font-size: 1.875rem;              /* ~30px */
    font-weight: var(--c-font-weight-bold);
    line-height: 1.15;
    color: var(--c-color-text);
}

.signin__lede {
    margin: 0 0 var(--c-space-lg);
    font-size: var(--c-font-size-base);
    color: var(--c-color-text-muted);
}

/* ==========================================================================
   Audience selector (segmented control / tabs)
   ========================================================================== */

.signin__audience {
    display: flex;
    gap: var(--c-space-xs);
    padding: var(--c-space-xs);
    margin-bottom: var(--c-space-lg);
    background: var(--c-grey-200);
    border-radius: var(--c-radius-md);
}

.signin__audience-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: var(--c-space-sm) var(--c-space-md);
    font-family: var(--c-font-family);
    font-size: var(--c-font-size-base);
    font-weight: var(--c-font-weight-semibold);
    color: var(--c-color-text);
    background: transparent;
    border: none;
    border-radius: var(--c-radius-sm);
    cursor: pointer;
    transition: background-color var(--c-transition-fast),
                color var(--c-transition-fast);
}

.signin__audience-btn:hover {
    background: color-mix(in srgb, var(--c-midnight-500) 8%, transparent);
}

.signin__audience-btn[aria-selected="true"] {
    color: var(--c-color-text-inverse);
    background: var(--c-midnight-500);
}

.signin__audience-btn[aria-selected="true"]:hover {
    background: var(--c-midnight-700);
}

.signin__audience-btn:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Audience panels — stable height, no jump on tab switch
   Both panels are placed in the SAME grid cell so the grid track always sizes
   to the TALLER panel. Both start at the top of that reserved space
   (align-items: start / justify-items: stretch). The container is never given
   a fixed height, so content may grow (errors, larger text) and the page
   scrolls naturally. The inactive panel keeps its space (visibility: hidden)
   so switching tabs cannot change the container height — the heading,
   subtitle and tab control above stay perfectly still.
   ========================================================================== */

.signin__panels {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;      /* top-align both panels within the reserved space */
    justify-items: stretch;
}

.signin__audience-panel {
    grid-area: 1 / 1;        /* overlap both panels in one cell */
    min-width: 0;
}

.signin__audience-panel--inactive {
    visibility: hidden;      /* reserves its space so height stays = max(panels) */
    pointer-events: none;
}

/* ==========================================================================
   Auth error region (above the form)
   ========================================================================== */

.signin__error {
    margin-bottom: var(--c-space-lg);
}

.signin__error:empty {
    display: none;
    margin-bottom: 0;
}

.signin__error-content {
    display: flex;
    align-items: flex-start;
    gap: var(--c-space-sm);
    padding: var(--c-space-md);
    background: var(--c-color-error-bg);
    border: 1px solid var(--c-color-error-border);
    border-radius: var(--c-radius-sm);
    color: var(--c-color-error-text-dark);
    font-size: var(--c-font-size-sm);
    line-height: var(--c-line-height);
}

.signin__error-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--c-color-error);
}

/* ==========================================================================
   Form fields
   ========================================================================== */

.signin__form {
    text-align: left;
}

.signin-field {
    margin-bottom: var(--c-space-lg);         /* ~24px between fields */
}

.signin-field__label {
    display: block;
    margin-bottom: var(--c-space-sm);         /* 8px label→input */
    font-size: var(--c-font-size-base);
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-text);
}

.signin-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 var(--c-space-md);
    margin-bottom: var(--c-space-sm);
}

.signin-field__label-row .signin-field__label {
    margin-bottom: 0;
}

.signin-field__forgot {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: var(--c-space-xs) 0;
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--c-transition-fast);
}

.signin-field__forgot:hover {
    color: var(--c-color-primary-hover);
}

.signin-field__forgot:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
    border-radius: var(--c-radius-sm);
}

.signin-field__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.signin-field__input {
    width: 100%;
    height: 50px;
    padding: 0 var(--c-space-md);
    font-size: var(--c-font-size-base);       /* >=16px */
    font-family: var(--c-font-family);
    color: var(--c-color-text);
    background: var(--c-color-surface);
    border: 1px solid var(--c-color-border-hover);
    border-radius: var(--c-radius-md);
    outline: none;
    transition: border-color var(--c-transition-fast),
                box-shadow var(--c-transition-fast);
}

.signin-field__input::placeholder {
    color: var(--c-color-text-secondary);
}

.signin-field__input:hover {
    border-color: var(--c-color-text-muted);
}

.signin-field__input:focus {
    border-color: var(--c-color-border-focus);
    box-shadow: var(--c-shadow-focus);
}

.signin-field__input--password {
    padding-right: 3.25rem;
}

/* Password visibility toggle */
.signin-field__toggle {
    position: absolute;
    right: var(--c-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--c-radius-sm);
    background: transparent;
    color: var(--c-color-icon);
    cursor: pointer;
    transition: color var(--c-transition-fast),
                background-color var(--c-transition-fast);
}

.signin-field__toggle:hover {
    color: var(--c-color-text);
    background: var(--c-color-neutral-bg);
}

.signin-field__toggle:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Primary action (Sign in / Continue with staff sign-in)
   ========================================================================== */

.signin__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: var(--c-space-lg);            /* 24px before primary action */
    padding: 0 var(--c-space-lg);
    font-size: var(--c-font-size-lg);
    font-weight: var(--c-font-weight-semibold);
    font-family: var(--c-font-family);
    color: var(--c-color-text-inverse);
    background: var(--c-midnight-500);
    border: none;
    border-radius: var(--c-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--c-transition-fast),
                box-shadow var(--c-transition-fast);
}

.signin__submit:hover {
    background: var(--c-midnight-700);
    box-shadow: var(--c-shadow-md);
    color: var(--c-color-text-inverse);
    text-decoration: none;
}

.signin__submit:active {
    background: var(--c-midnight-700);
}

.signin__submit:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
    box-shadow: var(--c-shadow-focus);
}

.signin__submit[aria-disabled="true"] {
    opacity: 0.75;
    cursor: not-allowed;
}

/* Loading state — swap label */
.signin__submit-loading {
    display: none;
}

.signin__submit--loading .signin__submit-text {
    display: none;
}

.signin__submit--loading .signin__submit-loading {
    display: inline;
}

.signin__staff-hint {
    margin: var(--c-space-md) 0 0;
    font-size: var(--c-font-size-sm);
    color: var(--c-color-text-muted);
    line-height: var(--c-line-height);
}

/* ==========================================================================
   Dev panel (local development only)
   ========================================================================== */

/* Local development only — pinned to the bottom of the viewport, outside the
   centred .signin__content so it never influences production layout or the
   vertical centring of the real sign-in form. */
.signin__dev {
    position: fixed;
    right: var(--c-space-md);
    bottom: var(--c-space-md);
    z-index: 2000;
    width: 320px;
    max-width: calc(100vw - 2 * var(--c-space-md));
    padding: var(--c-space-sm);
    background: var(--c-color-surface);
    border: 1px solid var(--c-color-border);
    border-radius: var(--c-radius-md);
    box-shadow: var(--c-shadow-lg);
}

.signin__dev-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--c-space-sm);
    width: 100%;
    padding: var(--c-space-sm) var(--c-space-md);
    border: none;
    border-radius: var(--c-radius-sm);
    background: #fef9c3;
    color: #92400e;
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--c-transition-fast);
}

.signin__dev-toggle:hover {
    background: #fef08a;
}

.signin__dev-panel {
    margin-top: var(--c-space-sm);
    max-height: 40vh;
    overflow-y: auto;
    background: var(--c-color-surface);
    border: 1px solid var(--c-color-border);
    border-radius: var(--c-radius-sm);
    box-shadow: var(--c-shadow-lg);
}

.signin__dev-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.signin__dev-item {
    border-bottom: 1px solid var(--c-color-border);
}

.signin__dev-item:last-child {
    border-bottom: none;
}

.signin__dev-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--c-space-xs);
    padding: var(--c-space-sm) var(--c-space-md);
    text-decoration: none;
    color: var(--c-color-text);
    border-radius: var(--c-radius-sm);
    transition: background-color var(--c-transition-fast);
}

.signin__dev-link:hover {
    background: var(--c-color-input-bg);
    text-decoration: none;
    color: var(--c-color-text);
}

.signin__dev-name {
    font-weight: var(--c-font-weight-semibold);
    font-size: var(--c-font-size-sm);
    min-width: 90px;
}

.signin__dev-email {
    font-size: var(--c-font-size-sm);
    color: var(--c-color-text-muted);
    margin-right: auto;
}

.signin__dev-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.6875rem;
    font-weight: var(--c-font-weight-medium);
    background: #e2e8f0;
    color: #475569;
    border-radius: 3px;
}

.signin__dev-badge--extra {
    background: #f1f5f9;
    color: #94a3b8;
}

/* ==========================================================================
   Very narrow screens (<=360px): reduce horizontal padding to 16px
   ========================================================================== */

@media (max-width: 360px) {
    .signin__brand-top {
        padding: var(--c-space-md);
    }

    .signin__panel {
        /* keep the ~32px top offset; reduce horizontal padding to 16px */
        padding: 32px var(--c-space-md) var(--c-space-lg);
    }

    .signin__brand-portal {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Desktop (>=900px): two-column split layout
   ========================================================================== */

@media (min-width: 900px) {
    .signin {
        flex-direction: row;
    }

    .signin__brand {
        flex: 0 0 44%;
        max-width: 44%;
        justify-content: flex-start;
        padding: var(--c-space-2xl);
    }

    .signin__brand-top {
        padding: 0;
    }

    .signin__brand-logo-img {
        height: 34px;
    }

    /* On desktop the portal name lives in the large title, not beside the logo */
    .signin__brand-portal {
        display: none;
    }

    .signin__brand-body {
        display: block;
        margin-top: auto;
        margin-bottom: auto;
        padding: var(--c-space-2xl) 0;
    }

    .signin__brand-title {
        font-size: 2.5rem;
    }

    .signin__panel {
        flex: 1 1 56%;
        align-items: center;
        padding: var(--c-space-2xl);
    }
}

/* Wide desktop: a touch more breathing room */
@media (min-width: 1280px) {
    .signin__brand {
        padding: 4rem;
    }

    .signin__panel {
        padding: 4rem;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .signin-field__input,
    .signin-field__toggle,
    .signin-field__forgot,
    .signin__submit,
    .signin__audience-btn,
    .signin__dev-toggle,
    .signin__dev-link {
        transition: none;
    }
}

/* ==========================================================================
   Short viewports (on-screen keyboard open, landscape phones)
   Pin the content to the top and let the page scroll, rather than vertically
   centring content that is taller than the visible area (which could push the
   top out of reach).
   ========================================================================== */

@media (max-height: 640px) {
    .signin__panel {
        align-items: flex-start;
    }

    .signin__content {
        margin: 0;
    }
}

/* ==========================================================================
   Change Password page
   No decorative field icons: inputs use standard left padding and reserve
   right padding for the show/hide toggle. Scoped to the change-password card
   so the login/reset pages are unaffected.
   ========================================================================== */

.login-card--change .login-field__input {
    padding: 0 var(--c-space-md);
}

.login-card--change .login-field__input--password {
    padding-right: 3.25rem;
}

/* Concise helper text (replaces the oversized info panel) */
.login-field__hint {
    margin: var(--c-space-sm) 0 0;
    font-size: var(--c-font-size-sm);
    color: var(--c-color-text-muted);
    line-height: var(--c-line-height);
}

/* Invalid input outline — paired with the text/icon error so it is not
   colour-only. */
.login-field__input--invalid,
.login-field__input[aria-invalid="true"] {
    border-color: var(--c-color-error);
}

.login-field__input--invalid:focus,
.login-field__input[aria-invalid="true"]:focus {
    border-color: var(--c-color-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-color-error) 20%, transparent);
}

/* Secondary action row (Sign out / Cancel) */
.login-card__secondary {
    margin-top: var(--c-space-lg);
    padding-top: var(--c-space-md);
    border-top: 1px solid var(--c-color-border);
    text-align: center;
}

.login-card__secondary-link {
    display: inline-flex;
    align-items: center;
    gap: var(--c-space-xs);
    min-height: 44px;
    padding: var(--c-space-xs) var(--c-space-sm);
    font-size: var(--c-font-size-sm);
    font-weight: var(--c-font-weight-medium);
    color: var(--c-color-text-muted);
    text-decoration: none;
    border-radius: var(--c-radius-sm);
    transition: color var(--c-transition-fast),
                background-color var(--c-transition-fast);
}

.login-card__secondary-link:hover {
    color: var(--c-color-primary);
    background: color-mix(in srgb, var(--c-color-primary) 5%, transparent);
    text-decoration: none;
}

.login-card__secondary-link:focus-visible {
    outline: 2px solid var(--c-color-border-focus);
    outline-offset: 2px;
}

.login-card__secondary-icon {
    font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .login-card__secondary-link {
        transition: none;
    }
}

/* ==========================================================================
   Email verification-code (OTP) page
   Matches the password form: no decorative field icon, standard input padding,
   success status banner, and a resend button with a loading state.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Segmented code input
   ONE real <input> (.otp-segments__input) sits transparently on top of the
   six visual slots. The slots render the navy digits; the input keeps the
   caret and all interaction. Errors are shown beneath the group (see
   .login-field__error) and never rely on border colour alone.
   -------------------------------------------------------------------------- */

.otp-segments {
    position: relative;
    width: 100%;
}

/* The six visual slots. Each slot flexes evenly (flex-basis 0) and is capped
   so the row never overflows the card; `min-width: 0` allows shrinking on
   narrow screens without horizontal scrolling. */
.otp-segments__slots {
    display: flex;
    justify-content: center;
    gap: clamp(0.35rem, 2.5vw, 0.6rem);
}

.otp-segments__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 3.25rem;
    height: 3.5rem;
    font-size: var(--c-font-size-xl);
    font-weight: var(--c-font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--c-color-text);           /* navy digits */
    background: var(--c-color-surface);
    border: 1px solid var(--c-color-border-hover);
    border-radius: var(--c-radius-md);
    transition: border-color var(--c-transition-fast),
                box-shadow var(--c-transition-fast);
}

/* Completed boxes stay neutral — success is only shown after server
   verification, so no green/checked state here. */
.otp-segments__slot--filled {
    border-color: var(--c-color-border-hover);
}

/* Active character position + blue focus indicator (not colour-only: the
   box also gains a focus ring/shadow). */
.otp-segments__slot--active {
    border-color: var(--c-color-border-focus);
    box-shadow: var(--c-shadow-focus);
}

/* Error state on the group — paired with the text error beneath it. */
.otp-segments--invalid .otp-segments__slot {
    border-color: var(--c-color-error);
}

/* The real input covers the slots row exactly. Transparent glyphs/caret so
   only the slots are seen, but it keeps full interaction and the caret. */
.otp-segments__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 3.5rem;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    text-align: center;
    letter-spacing: 0;
    font-size: var(--c-font-size-xl);
    outline: none;
    box-shadow: none;
    cursor: text;
    -webkit-text-fill-color: transparent;
}

.otp-segments__input:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

@media (max-width: 360px) {
    .otp-segments__slot {
        height: 3rem;
        font-size: var(--c-font-size-lg);
    }

    .otp-segments__input {
        height: 3rem;
    }
}
    .otp-segments__slot {
        flex-basis: 2.4rem;
        font-size: var(--c-font-size-lg);
    }
}

/* Success status banner (e.g. "A new code has been sent.") */
.login-card__status {
    margin-bottom: var(--c-space-lg);
}

.login-card__status:empty {
    display: none;
}

.login-card__status-content {
    display: flex;
    align-items: flex-start;
    gap: var(--c-space-sm);
    padding: var(--c-space-md);
    background: var(--c-color-success-bg);
    border: 1px solid color-mix(in srgb, var(--c-color-success) 35%, transparent);
    border-radius: var(--c-radius-sm);
    color: var(--c-color-success-hover);
    font-size: var(--c-font-size-sm);
    text-align: left;
    line-height: var(--c-line-height);
}

.login-card__status-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--c-color-success);
}

/* Resend button: rendered as a form so it posts with CSRF. Strip default
   form/button chrome so it keeps the subtle text-link appearance. */
.login-card__resend-form {
    margin: 0;
}

.login-card__resend-form .login-card__help-link {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.login-card__resend-loading {
    display: none;
}

.login-card__help-link--loading .login-card__resend-text {
    display: none;
}

.login-card__help-link--loading .login-card__resend-loading {
    display: inline;
}

.login-card__help-link[aria-disabled="true"] {
    opacity: 0.7;
    cursor: not-allowed;
}