/* Contractor portal sign-in pages. These are server-rendered without Blazor
   (ContractorPortalAuthEndpoints), so they style native controls directly
   while taking colour, type, radius and motion from the shared tokens. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--sp-color-canvas);
}

body.portal-auth {
    margin: 0;
    background: var(--sp-color-canvas);
    color: var(--sp-color-ink);
    font-family: var(--sp-font-sans);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.portal-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Brand panel */

.portal-auth-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-space-8);
    padding: clamp(2rem, 5vw, 4rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--sp-color-brand) 42%, transparent), transparent 55%),
        radial-gradient(circle at 92% 96%, color-mix(in srgb, var(--sp-color-teal) 28%, transparent), transparent 50%),
        linear-gradient(
            160deg,
            var(--sp-color-auth-bg-from),
            var(--sp-color-auth-bg-via) 55%,
            var(--sp-color-auth-bg-to)
        );
    color: var(--sp-color-white);
}

/* Light snowfall texture. */
.portal-auth-hero::before {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1.6px),
        radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1.6px);
    background-position:
        0 0,
        13px 17px;
    background-size:
        26px 26px,
        34px 34px;
    content: "";
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}

.portal-auth-hero > * {
    position: relative;
}

.portal-auth-logo {
    display: block;
    width: auto;
    max-width: 11rem;
    height: 2.75rem;
    object-fit: contain;
    object-position: left center;
}

.portal-auth-hero-copy {
    display: grid;
    gap: var(--sp-space-4);
    max-width: 30rem;
}

.portal-auth-kicker {
    margin: 0;
    color: rgb(255 255 255 / 0.7);
    font-size: var(--sp-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portal-auth-headline {
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.portal-auth-features {
    display: grid;
    gap: var(--sp-space-4);
    margin: var(--sp-space-4) 0 0;
    padding: 0;
    list-style: none;
}

.portal-auth-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-space-3);
}

.portal-auth-features svg {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0.4rem;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.08);
    color: #7dd3fc;
}

.portal-auth-features span {
    display: grid;
    gap: 0.1rem;
    color: rgb(255 255 255 / 0.72);
    font-size: 0.95rem;
    line-height: 1.45;
}

.portal-auth-features strong {
    color: var(--sp-color-white);
    font-weight: 700;
}

.portal-auth-hero-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
    margin: 0;
    color: rgb(255 255 255 / 0.6);
    font-size: var(--sp-font-size-sm);
}

.portal-auth-hero-foot::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 4px rgb(52 211 153 / 0.2);
    content: "";
}

/* Form panel */

.portal-auth-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-space-5);
    padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}

.portal-auth-card {
    width: min(100%, 27rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--sp-color-border);
    border-radius: var(--sp-radius-lg);
    background: var(--sp-color-surface);
    box-shadow: var(--sp-shadow-md);
}

.portal-auth-eyebrow {
    display: inline-flex;
    margin: 0 0 var(--sp-space-3);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--sp-color-brand-soft);
    color: var(--sp-color-brand-text);
    font-size: var(--sp-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-auth-card h1 {
    margin: 0 0 var(--sp-space-2);
    color: var(--sp-color-ink-strong);
    font-size: clamp(1.6rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.portal-auth-card p {
    margin: 0 0 var(--sp-space-4);
}

.portal-auth-lead {
    color: var(--sp-color-ink-muted);
}

.portal-auth-callout {
    padding: var(--sp-space-3) var(--sp-space-4);
    border-left: 3px solid var(--sp-color-brand);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-color-brand-soft);
    color: var(--sp-color-ink);
}

.portal-auth-help {
    color: var(--sp-color-ink-muted);
    font-size: var(--sp-font-size-sm);
    line-height: 1.55;
}

.portal-auth-form {
    display: grid;
    gap: var(--sp-space-4);
    margin: var(--sp-space-5) 0;
}

.portal-auth-field {
    display: grid;
    gap: 0.4rem;
}

.portal-auth-field label {
    color: var(--sp-color-ink-strong);
    font-size: var(--sp-font-size-sm);
    font-weight: 650;
}

.portal-auth-field input,
.portal-auth-field select {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--sp-color-border-strong);
    border-radius: var(--sp-control-radius);
    background-color: var(--sp-color-surface);
    color: var(--sp-color-ink);
    font: inherit;
    transition: var(--sp-motion-transition-control);
}

.portal-auth-field input::placeholder {
    color: var(--sp-color-ink-subtle);
}

.portal-auth-field select {
    padding-right: 2.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.85rem center;
    background-repeat: no-repeat;
    background-size: 1.1rem;
    cursor: pointer;
}

.portal-auth-field input:hover,
.portal-auth-field select:hover {
    border-color: var(--sp-color-ink-subtle);
}

.portal-auth-field input:focus-visible,
.portal-auth-field select:focus-visible {
    border-color: var(--sp-color-brand);
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sp-color-brand) 22%, transparent);
}

.portal-auth-field input:user-invalid {
    border-color: var(--sp-color-danger);
}

.portal-auth-code {
    font-family: var(--sp-font-mono);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5em;
    text-align: center;
    text-indent: 0.5em;
}

.portal-auth-check {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.75rem;
    color: var(--sp-color-ink);
    font-size: 0.95rem;
    cursor: pointer;
}

.portal-auth-check input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--sp-color-brand);
    cursor: pointer;
}

/* Reserves the Turnstile widget's fixed 65px height so the button does not jump when the challenge loads. */
.cf-turnstile.portal-auth-captcha {
    min-height: 65px;
}

.portal-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--sp-color-button-primary);
    border-radius: var(--sp-control-radius);
    background: var(--sp-color-button-primary);
    color: var(--sp-color-button-on-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: var(--sp-motion-transition-control);
}

.portal-auth-submit:hover {
    border-color: var(--sp-color-button-primary-hover);
    background: var(--sp-color-button-primary-hover);
}

.portal-auth-submit:active {
    background: var(--sp-color-button-primary-active);
}

.portal-auth-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--sp-color-border-strong);
    border-radius: var(--sp-control-radius);
    color: var(--sp-color-ink-strong);
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    transition: var(--sp-motion-transition-control);
}

.portal-auth-secondary:hover {
    border-color: var(--sp-color-brand);
    color: var(--sp-color-brand-text);
}

.portal-auth-footnote {
    margin: 0;
    color: var(--sp-color-ink-muted);
    font-size: var(--sp-font-size-sm);
}

.portal-auth a:not(.portal-auth-secondary) {
    color: var(--sp-color-brand-text);
    font-weight: 600;
    text-underline-offset: 0.2em;
}

.portal-auth :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sp-color-brand) 55%, transparent);
    outline-offset: 2px;
}

.portal-auth-field :focus-visible {
    outline: none;
}

/* Tablet and phone: the brand panel becomes a compact band above the form. */

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

    .portal-auth-hero {
        gap: var(--sp-space-4);
        padding: var(--sp-space-5) var(--sp-space-4) 3.5rem;
    }

    .portal-auth-logo {
        height: 2.25rem;
    }

    .portal-auth-headline {
        font-size: 1.5rem;
    }

    .portal-auth-features,
    .portal-auth-hero-foot {
        display: none;
    }

    /* The card overlaps the positioned hero by its negative offset, so it needs
       its own stacking level to paint above the hero instead of under it. */
    .portal-auth-panel {
        position: relative;
        z-index: 1;
        justify-content: flex-start;
        margin-top: -2.5rem;
        padding: 0 var(--sp-space-4) var(--sp-space-6);
    }
}

@media (max-width: 480px) {
    .portal-auth-card {
        padding: var(--sp-space-5) var(--sp-space-4);
    }

    .portal-auth-code {
        font-size: 1.35rem;
        letter-spacing: 0.35em;
        text-indent: 0.35em;
    }
}

/* Contractor sign-in (body.portal-auth-contractor) follows the customer field
   screens: the page title on the pale canvas, one white 12px card with the
   shared small shadow, 44px controls with 16px text, and the brand line with
   the administrator link below. The client portal keeps the brand panel above. */

body.portal-auth-contractor .portal-auth-shell {
    display: block;
}

body.portal-auth-contractor .portal-auth-panel {
    display: block;
    margin: 0;
    padding: clamp(1.5rem, 6vw, 3.5rem) 16px 32px;
}

.portal-auth-page {
    display: grid;
    gap: 14px;
    width: min(100%, 28rem);
    margin: 0 auto;
}

.portal-auth-title {
    margin: 0;
    color: var(--sp-color-ink-strong);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

body.portal-auth-contractor .portal-auth-card {
    width: 100%;
    padding: 20px 18px;
    border-radius: 12px;
    box-shadow: var(--sp-shadow-sm);
}

body.portal-auth-contractor .portal-auth-card > :last-child {
    margin-bottom: 0;
}

body.portal-auth-contractor .portal-auth-form {
    gap: 14px;
    margin: 16px 0;
}

body.portal-auth-contractor .portal-auth-field label {
    font-size: 13px;
    font-weight: 600;
}

body.portal-auth-contractor .portal-auth-field :is(input, select) {
    min-height: var(--sp-control-height-touch);
    padding: 0.55rem 0.85rem;
    border-color: var(--sp-color-border);
    border-radius: 10px;
    font-size: 16px;
}

body.portal-auth-contractor .portal-auth-field select {
    padding-right: 2.5rem;
}

body.portal-auth-contractor .portal-auth-code {
    font-size: 1.5rem;
}

body.portal-auth-contractor .portal-auth-submit {
    min-height: 3rem;
    border-radius: 10px;
    font-size: 1rem;
}

body.portal-auth-contractor .portal-auth-secondary {
    border-color: var(--sp-color-border);
    border-radius: 10px;
}

body.portal-auth-contractor .portal-auth-callout {
    border: 1px solid var(--sp-color-brand-soft-border);
    border-radius: 10px;
}

body.portal-auth-contractor .portal-auth-footnote {
    color: var(--sp-color-ink-muted);
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

/* An unusable private link shows one centred card, like the shared Link
   unavailable card of the other secure links, without the brand panel. */

body.portal-auth-link-unavailable .portal-auth-shell {
    display: block;
}

body.portal-auth-link-unavailable .portal-auth-hero,
body.portal-auth-link-unavailable .portal-auth-eyebrow {
    display: none;
}

body.portal-auth-link-unavailable .portal-auth-panel {
    min-height: 100vh;
    margin: 0;
    padding: clamp(1.5rem, 6vw, 3.5rem) 16px 32px;
}

body.portal-auth-link-unavailable .portal-auth-card {
    display: grid;
    justify-items: center;
    gap: var(--sp-space-2);
    width: min(100%, 34rem);
    text-align: center;
}

.portal-auth-unavailable-icon {
    order: -1;
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--sp-color-surface-warning);
    color: var(--sp-color-warning-text);
    font-size: 1.25rem;
    font-weight: 700;
}

@media (min-width: 640px) {
    .portal-auth-title {
        font-size: 1.875rem;
    }

    body.portal-auth-contractor .portal-auth-card {
        padding: 26px 28px;
    }
}

@media (forced-colors: active) {
    .portal-auth-submit,
    .portal-auth-secondary,
    .portal-auth-card {
        border: 1px solid ButtonText;
    }
}