/*
 * Client Mode final UI/UX polish.
 *
 * This layer intentionally derives every tone from the existing CMS-backed
 * Client Mode design tokens. Operators retain full control of brand, accent,
 * surface and text colours while the public page receives stronger depth,
 * contrast and section separation.
 */

.client-portal-home .client-section--light {
    isolation: isolate;
}

.client-portal-home .client-plans.client-section--light {
    background:
        radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--client-accent) 24%, transparent), transparent 28rem),
        linear-gradient(135deg,
            color-mix(in srgb, var(--client-canvas) 86%, var(--client-brand) 14%) 0%,
            var(--client-light) 48%,
            color-mix(in srgb, var(--client-alternate) 82%, var(--client-accent) 18%) 100%);
}

.client-portal-home .client-about.client-section--light,
.client-portal-home .client-installation.client-section--light,
.client-portal-home .client-support.client-section--light {
    background:
        radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--client-accent) 10%, transparent), transparent 24rem),
        linear-gradient(180deg,
            var(--client-light) 0%,
            color-mix(in srgb, var(--client-light) 82%, var(--client-muted) 18%) 100%);
}

.client-portal-home .client-advantages.client-section--light,
.client-portal-home .client-documents.client-section--light {
    background:
        radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--client-accent) 13%, transparent), transparent 24rem),
        linear-gradient(135deg,
            color-mix(in srgb, var(--client-alternate) 84%, var(--client-brand) 16%) 0%,
            color-mix(in srgb, var(--client-alternate) 76%, var(--client-accent) 24%) 100%);
}

.client-portal-home .client-faq.client-section--light {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--client-canvas) 88%, var(--client-alternate) 12%) 0%,
            color-mix(in srgb, var(--client-canvas) 72%, var(--client-alternate) 28%) 100%);
}

.client-portal-home .client-plans.client-section--light::after,
.client-portal-home .client-about.client-section--light::after,
.client-portal-home .client-installation.client-section--light::after,
.client-portal-home .client-advantages.client-section--light::after,
.client-portal-home .client-faq.client-section--light::after,
.client-portal-home .client-documents.client-section--light::after,
.client-portal-home .client-support.client-section--light::after {
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--client-brand) 34%, var(--client-line)),
        color-mix(in srgb, var(--client-accent) 42%, var(--client-line)),
        transparent);
    content: "";
}

.client-section--light .client-section-heading > p:last-child,
.client-section--light .client-section-lead,
.client-section--light .client-fact-grid p,
.client-section--light .client-value-list p,
.client-section--light .client-step-list p,
.client-section--light .client-advantage-grid p,
.client-section--light .client-documents__utility-heading p,
.client-section--light .client-documents__outage-copy,
.client-section--light .client-support__lead p,
.client-section--light .client-faq details > p {
    color: color-mix(in srgb, var(--client-text) 80%, transparent);
}

.client-section--light .client-button--primary {
    background: linear-gradient(135deg,
        var(--client-brand),
        color-mix(in srgb, var(--client-brand) 76%, var(--client-accent) 24%));
    box-shadow: 0 .85rem 2rem color-mix(in srgb, var(--client-brand) 24%, transparent);
    color: #fff;
}

.client-section--light .client-button--primary:hover,
.client-section--light .client-button--primary:focus-visible {
    box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--client-brand) 32%, transparent);
}

.client-plans.client-section--light .client-plan-feature,
.client-plans.client-section--light .client-plan-board,
.client-documents.client-section--light .client-documents__utility,
.client-support.client-section--light .client-support__lead,
.client-support.client-section--light .client-contact-list,
.client-support.client-section--light .client-support__status {
    border-color: color-mix(in srgb, var(--client-brand) 18%, var(--client-line));
    background: color-mix(in srgb, var(--client-elevated) 95%, var(--client-accent) 5%);
    box-shadow: 0 1.2rem 3rem rgba(7, 26, 46, .11);
}

.client-plans.client-section--light .client-plan-feature.is-selected {
    border-color: color-mix(in srgb, var(--client-accent) 76%, var(--client-brand));
    box-shadow:
        0 0 0 .22rem color-mix(in srgb, var(--client-accent) 20%, transparent),
        0 1.35rem 3.2rem rgba(7, 26, 46, .14);
}

.client-plans.client-section--light .client-plan-row.is-selected {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--client-accent) 20%, var(--client-light)),
        color-mix(in srgb, var(--client-accent) 8%, var(--client-light)));
}

.client-about.client-section--light .client-fact-grid {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--client-brand) 16%, var(--client-line));
    border-radius: var(--client-radius-md);
    background: color-mix(in srgb, var(--client-elevated) 96%, var(--client-accent) 4%);
    box-shadow: 0 1rem 2.6rem rgba(7, 26, 46, .08);
}

.client-about.client-section--light .client-fact-grid article {
    border-color: color-mix(in srgb, var(--client-brand) 12%, var(--client-line));
}

.client-installation.client-section--light .client-step-list__marker {
    border-color: color-mix(in srgb, var(--client-accent) 48%, var(--client-line));
    background: color-mix(in srgb, var(--client-accent) 12%, var(--client-light));
    box-shadow: 0 .7rem 1.6rem color-mix(in srgb, var(--client-accent) 14%, transparent);
}

.client-advantages.client-section--light .client-advantage-grid article {
    border-color: color-mix(in srgb, var(--client-brand) 17%, var(--client-line));
}

.client-advantages.client-section--light .client-advantage-grid article:first-child {
    border-left-color: var(--client-accent);
    background: color-mix(in srgb, var(--client-elevated) 94%, var(--client-accent) 6%);
    box-shadow: 0 1.15rem 3rem rgba(7, 26, 46, .1);
}

.client-faq.client-section--light details {
    transition: background-color .18s ease, box-shadow .18s ease;
}

.client-faq.client-section--light details[open] {
    background: color-mix(in srgb, var(--client-elevated) 90%, var(--client-accent) 10%);
    box-shadow: inset .22rem 0 var(--client-accent);
}

.client-faq.client-section--light summary {
    padding-inline: 1rem;
}

.client-faq.client-section--light details > p {
    padding-inline: 1rem 2.4rem;
}

.client-documents.client-section--light .client-document-link--featured a {
    border-left-color: var(--client-accent);
    background: color-mix(in srgb, var(--client-elevated) 92%, var(--client-accent) 8%);
    box-shadow: 0 .75rem 1.8rem rgba(7, 26, 46, .07);
}

.client-documents.client-section--light .client-documents__legal a:hover,
.client-documents.client-section--light .client-documents__legal a:focus-visible {
    background: color-mix(in srgb, var(--client-accent) 8%, transparent);
}

.client-support.client-section--light .client-support__lead {
    border-top: .22rem solid var(--client-accent);
}

.client-support.client-section--light .client-support__status {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--client-elevated) 92%, var(--client-accent) 8%),
        color-mix(in srgb, var(--client-elevated) 96%, var(--client-brand) 4%));
}

.client-section--light .client-inline-action:hover,
.client-section--light .client-text-link:hover {
    color: var(--client-brand);
}

@media (max-width: 699px) {
    .client-portal-home .client-plans.client-section--light,
    .client-portal-home .client-about.client-section--light,
    .client-portal-home .client-installation.client-section--light,
    .client-portal-home .client-advantages.client-section--light,
    .client-portal-home .client-faq.client-section--light,
    .client-portal-home .client-documents.client-section--light,
    .client-portal-home .client-support.client-section--light {
        background-size: auto;
    }

    .client-plans.client-section--light .client-plan-feature,
    .client-plans.client-section--light .client-plan-board,
    .client-documents.client-section--light .client-documents__utility,
    .client-support.client-section--light .client-support__lead,
    .client-support.client-section--light .client-contact-list,
    .client-support.client-section--light .client-support__status {
        box-shadow: 0 .8rem 2rem rgba(7, 26, 46, .09);
    }

    .client-faq.client-section--light summary,
    .client-faq.client-section--light details > p {
        padding-inline: .75rem;
    }
}

@media (prefers-contrast: more) {
    .client-portal-home .client-section--light {
        background-image: none;
    }

    .client-plans.client-section--light .client-plan-feature,
    .client-plans.client-section--light .client-plan-board,
    .client-documents.client-section--light .client-documents__utility,
    .client-support.client-section--light .client-support__lead,
    .client-support.client-section--light .client-contact-list,
    .client-support.client-section--light .client-support__status {
        border-color: currentColor;
        box-shadow: none;
    }
}