/*
 * Shared application theme.
 *
 * The body class is added centrally by base.html.twig to every Web screen
 * except the homepage experience and development catalogues. This layer is
 * intentionally last: it makes the UI kit the visual contract without
 * changing the behaviour or markup of feature-specific components.
 */

.application-page {
    color: var(--primitive-deep);
    background: var(--color-background);
}

.application-page main {
    min-width: 0;
    color: var(--primitive-deep);
    background: var(--color-background);
}

/* One typographic scale: Lufga for interface copy, Charter for amounts only. */
body.application-page.application-page main :is(h1, h2, h3) {
    font-family: var(--font-body);
}

.application-page .auth-screen__title,
.application-page .private-page-header h1,
.application-page .legal-heading h1,
.application-page .referral-hero h1,
.application-page .unavailable-state h1 {
    margin-bottom: var(--space-6);
    color: var(--primitive-deep);
    font-family: var(--font-body);
    font-size: var(--primitive-font-plus-plus);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
}

.application-page .private-page-header h1,
.application-page .legal-heading h1,
.application-page .unavailable-state h1 {
    margin: 0;
}

.application-page .auth-screen__eyebrow,
.application-page .private-page-header__eyebrow,
.application-page .referral-eyebrow {
    margin-bottom: var(--space-3);
    color: var(--color-copy-muted);
    font-size: var(--primitive-font-mini);
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.35;
    text-transform: uppercase;
}

.application-page :is(.auth-field__label, .creator-field label, .field label, .field legend) {
    font-weight: 400;
}

.application-page :is(
    .auth-screen__lead,
    .private-page-header__description,
    .identity-result__detail,
    .email-validation-result__detail,
    .email-pending__intro,
    .email-pending__instruction,
    .email-pending__hint,
    .account-unavailable__message
) {
    color: var(--color-copy);
    font-size: var(--primitive-font-base);
    line-height: 1.5;
}

/* Authentication and account pages use the same centred shell as identity. */
.application-page .auth-choice-layout {
    display: block;
    min-height: 0;
}

.application-page .auth-choice-layout__visual {
    display: none;
}

.application-page:is(.auth-page--private-form, .auth-page--private-state) .auth-screen__eyebrow {
    display: none;
}

.application-page .auth-choice-layout__panel {
    display: block;
    background: transparent;
}

.application-page .auth-choice-layout__panel .auth-screen,
.application-page .auth-screen {
    justify-content: flex-start;
    width: min(100%, var(--content-column-max));
    min-height: calc(100svh - var(--presentation-header-height, 0px));
    margin-inline: auto;
    padding: var(--space-12) var(--space-4) 0;
}

.application-page .auth-screen__content {
    padding-bottom: var(--space-8);
}

/* Login and registration keep the established portrait split on desktop. */
@media (min-width: 1081px) {
    .application-page:is(.auth-page--choice, .auth-page--login, .auth-page--register) .auth-choice-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.14fr) minmax(460px, 0.86fr);
        min-height: calc(100vh - var(--presentation-header-height));
        min-height: calc(100svh - var(--presentation-header-height));
    }

    .application-page:is(.auth-page--choice, .auth-page--login, .auth-page--register) .auth-choice-layout__visual {
        display: block;
        min-width: 0;
        background: var(--primitive-deep) url("../images/continue-portrait-hd-dJ3mriM.png") center 34% / cover no-repeat;
    }

    .application-page:is(.auth-page--choice, .auth-page--login, .auth-page--register) .auth-choice-layout__panel {
        display: grid;
        background: var(--primitive-surface);
        place-items: stretch center;
    }

    .application-page:is(.auth-page--choice, .auth-page--login, .auth-page--register) .auth-choice-layout__panel .auth-screen {
        width: min(100%, 600px);
        margin: 0;
        padding-inline: clamp(32px, 4vw, 72px);
    }
}

/* State screens stay flat: status, copy, then the standard white CTA. */
.application-page :is(.identity-result, .email-validation-result, .email-pending, .account-unavailable) {
    gap: var(--space-6);
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--primitive-deep);
}

.application-page :is(.identity-result__mark, .email-validation-result__mark) {
    width: 56px;
    height: 56px;
    box-shadow: none;
}

.application-page :is(.identity-result__action, .email-validation-result .button) {
    width: min(100%, 460px);
    margin-top: var(--space-4);
}

.application-page :is(
    .identity-result__button,
    .email-validation-result .button,
    .email-pending__save,
    .email-pending__resend .button,
    .account-unavailable__retry,
    .presentation-join,
    .site-footer__presentation-contact
) {
    min-height: var(--button-height);
    border: 1px solid var(--color-control-border);
    border-radius: var(--button-radius);
    background: var(--primitive-white);
    color: var(--primitive-black);
}

.application-page :is(.identity-result__button, .email-validation-result .button) {
    justify-content: center;
    padding: 0 var(--space-8);
    font-size: var(--primitive-font-base);
    letter-spacing: normal;
    text-transform: uppercase;
}

.application-page .email-pending__address,
.application-page .email-pending__edit-form {
    border: 0;
    background-image: var(--separator-rule), var(--separator-rule);
    background-position: top, bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
}

.application-page .email-pending__edit-form {
    padding-block: var(--space-4);
}

.application-page .email-pending__save,
.application-page .email-pending__resend .button {
    font-size: var(--primitive-font-base);
    letter-spacing: normal;
    text-transform: uppercase;
}

.application-page :is(
    .email-pending__resend,
    .email-pending__resend .button,
    .email-pending__save,
    .account-unavailable__retry
) {
    width: 100%;
}

.application-page .account-unavailable {
    display: grid;
    padding-top: 0;
    border-top: 0;
}

.application-page .account-unavailable__actions {
    margin-top: var(--space-4);
}

.application-page .account-unavailable__retry {
    justify-content: center;
    padding-inline: var(--space-4);
    font-size: var(--primitive-font-base);
    letter-spacing: 0;
}

.application-page :is(.email-pending__button-arrow, .account-unavailable__arrow) {
    display: none;
}

/* Legal pages: a quiet reading surface with a compact, always available index. */
.application-page.legal-page {
    --legal-index-width: 248px;
    --presentation-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --presentation-header-bar-height: 100px;
    --presentation-header-height: 100px;
    --presentation-header-side-width: clamp(84px, 24vw, 96px);
}

.application-page.legal-page main {
    min-height: calc(100svh - var(--presentation-header-height));
}

.application-page .legal-layout {
    width: min(100%, 1120px);
    padding: clamp(38px, 5vw, 64px) 36px clamp(64px, 8vw, 104px);
}

.application-page .legal-heading {
    display: block;
    text-align: center;
}

.application-page .legal-heading h1 {
    max-width: 30ch;
    margin-inline: auto;
}

.application-page .legal-audiences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 360px);
    margin: var(--space-6) auto 0;
    padding: 0;
    background-image: var(--separator-rule);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
}

.application-page .legal-audiences a {
    position: relative;
    display: grid;
    min-height: 48px;
    padding: 14px 12px 16px;
    color: var(--color-copy-muted);
    font-size: var(--primitive-font-average);
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    place-items: center;
}

.application-page .legal-audiences a::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primitive-orange);
    content: '';
    transform: translateX(-50%);
    transition: width 180ms ease;
}

.application-page .legal-audiences a[aria-current='page'] {
    color: var(--primitive-deep);
    font-weight: 700;
}

.application-page .legal-audiences a[aria-current='page']::after {
    width: 100%;
}

.application-page .legal-shell {
    display: block;
    margin-top: var(--space-8);
}

.application-page .legal-index {
    min-width: 0;
    margin-bottom: var(--space-8);
}

.application-page .legal-index__label {
    margin: 0 0 var(--space-3);
    color: var(--color-copy-muted);
    font-size: var(--primitive-font-average);
    font-weight: 500;
    letter-spacing: .11em;
    line-height: 1.35;
    text-transform: uppercase;
}

.application-page .legal-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0;
    border: 0;
    background-image: var(--separator-rule), var(--separator-rule);
    background-position: top, bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px, 100% 2px;
    counter-reset: legal-section;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.application-page .legal-nav a {
    display: grid;
    min-width: min(76vw, 270px);
    min-height: 58px;
    padding: 13px 20px 13px 0;
    color: var(--primitive-deep);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    counter-increment: legal-section;
}

.application-page .legal-nav a::before {
    color: var(--color-copy-muted);
    content: counter(legal-section, decimal-leading-zero);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

.application-page .legal-document {
    min-width: 0;
    max-width: 760px;
}

.application-page .legal-document article {
    padding: 0 0 clamp(44px, 7vw, 72px);
    border: 0;
    background-image: var(--separator-rule);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    overflow-wrap: anywhere;
    scroll-margin-top: calc(var(--presentation-header-height) + 24px);
}

.application-page .legal-document article + article {
    padding-top: clamp(44px, 7vw, 72px);
}

.application-page .legal-document article:last-child {
    padding-bottom: 0;
    background-image: none;
}

.application-page .legal-document article > :first-child {
    margin-top: 0;
}

.application-page .legal-document article > :last-child {
    margin-bottom: 0;
}

.application-page .legal-document h1 {
    margin-bottom: var(--space-6);
    color: var(--primitive-deep);
    font-size: clamp(21px, 3vw, 25px);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.25;
    text-transform: none;
    text-wrap: balance;
}

.application-page .legal-document h2 {
    margin: var(--space-8) 0 var(--space-3);
    color: var(--primitive-deep);
    font-size: var(--primitive-font-plus);
    font-weight: 500;
    line-height: 1.35;
}

.application-page .legal-document h3 {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--primitive-deep);
    font-size: var(--primitive-font-base);
    font-weight: 600;
    line-height: 1.4;
}

.application-page .legal-document :is(p, li) {
    color: var(--color-copy);
    font-size: 16px;
    line-height: 1.65;
}

.application-page .legal-document :is(ul, ol) {
    padding-left: 1.25em;
}

.application-page .legal-document a {
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

@media (min-width: 860px) {
    .application-page .legal-shell {
        display: grid;
        grid-template-columns: var(--legal-index-width) minmax(0, 1fr);
        gap: clamp(46px, 6vw, 76px);
        align-items: start;
        margin-top: clamp(42px, 6vw, 68px);
    }

    .application-page .legal-index {
        position: sticky;
        top: calc(var(--presentation-header-height) + 24px);
        margin-bottom: 0;
    }

    .application-page .legal-nav {
        display: grid;
        overflow: visible;
    }

    .application-page .legal-nav a {
        min-width: 0;
        min-height: 50px;
        padding: 12px 4px;
        background-image: var(--separator-rule);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100% 2px;
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .application-page .legal-nav a:last-child {
        background-image: none;
    }
}

/* The referral programme is an application page, not a second homepage. */
.application-page .referral-hero,
.application-page .referral-program-content {
    width: min(100%, 760px);
}

.application-page .referral-hero {
    display: block;
    padding-block: var(--space-8);
}

.application-page .referral-hero__intro {
    text-align: center;
}

.application-page .referral-hero h1 {
    font-size: var(--primitive-font-plus-plus);
}

.application-page .referral-hero h1::after {
    display: none;
}

.application-page .referral-hero__description,
.application-page .referral-program-content p {
    color: var(--color-copy);
    font-size: var(--primitive-font-base);
    line-height: 1.55;
}

.application-page .referral-highlight {
    margin-top: var(--space-6);
    padding: var(--space-4) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: var(--separator-rule), var(--separator-rule);
    background-position: top, bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    color: var(--primitive-deep);
    text-align: center;
}

.application-page .referral-highlight p + p {
    margin-top: var(--space-3);
    padding-top: 0;
    border: 0;
    color: var(--primitive-deep);
}

.application-page .referral-program-content h2 {
    font-size: var(--primitive-font-plus);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
}

.application-page .referral-how,
.application-page .referral-conditions,
.application-page .referral-condition,
.application-page .referral-cta {
    border: 0;
    border-radius: 0;
    background-image: var(--separator-rule);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 2px;
}

.application-page .referral-cta {
    padding: var(--space-8) 0 0;
}

.application-page .referral-steps li::before {
    border-width: 1px;
    background: transparent;
    color: var(--primitive-deep);
    font-family: var(--font-amount);
    font-weight: 400;
}

.application-page .presentation-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-8);
    font-size: var(--primitive-font-base);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

/* Public lists use the same light surface instead of a separate dark theme. */
.application-page.public-profile-page {
    background: var(--color-background);
    color: var(--primitive-deep);
}

.application-page .public-profile {
    flex-basis: 144px;
    color: var(--primitive-deep);
}

.application-page .public-profile h1 {
    font-family: var(--font-body);
    font-size: var(--primitive-font-plus-plus);
    font-weight: 500;
}

.application-page :is(.public-profile__share, .public-profile__close) {
    color: var(--primitive-deep);
}

.application-page .public-profile-list {
    border-radius: 0;
    background: var(--color-background);
    color: var(--primitive-deep);
}

.application-page .public-pack-row {
    border: 0;
    background-image: var(--separator-rule);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
}

/* Presentation footer markup is retained, with the UI kit's light compact skin. */
.application-page .site-footer.site-footer--presentation {
    border: 0;
    background: var(--color-background);
    background-image: var(--separator-rule);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    color: var(--primitive-deep);
}

.application-page .site-footer.site-footer--presentation::before {
    display: none;
}

.application-page .site-footer--presentation .site-footer__presentation-inner {
    width: min(calc(100% - (2 * var(--space-4))), var(--content-max));
    padding: 24px 0 max(18px, env(safe-area-inset-bottom));
    color: var(--primitive-deep);
    font-size: var(--primitive-font-average);
}

.application-page .site-footer__presentation-grid {
    gap: var(--space-4);
}

.application-page .site-footer--presentation .site-footer__presentation-wordmark {
    color: var(--primitive-deep);
    font-size: var(--primitive-font-very-big);
    letter-spacing: -.03em;
    line-height: 1;
}

.application-page .site-footer__presentation-brand {
    gap: var(--space-3);
}

.application-page .site-footer__presentation-brand p,
.application-page .site-footer--presentation .site-footer__presentation-services a,
.application-page .site-footer__presentation-meta {
    color: var(--color-copy-muted);
}

.application-page .site-footer__presentation-group {
    padding-top: var(--space-4);
    border: 0;
    background-image: var(--separator-rule);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 2px;
}

.application-page .site-footer--presentation .site-footer__presentation-links {
    border: 0;
}

.application-page .site-footer--presentation .site-footer__presentation-links .site-footer__presentation-link {
    min-height: 44px;
    border: 0;
    background-image: var(--separator-rule);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    color: var(--primitive-deep);
}

.application-page .site-footer__presentation-link > span:last-child,
.application-page .site-footer--presentation .site-footer__age-link {
    color: var(--primitive-deep);
}

.application-page .site-footer--presentation .site-footer__presentation-contact {
    padding: 0 var(--space-4);
}

.application-page .site-footer__presentation-meta {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border: 0;
    background-image: var(--separator-rule);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 2px;
}

.application-page .site-footer--presentation a:focus-visible,
.application-page .site-footer--presentation .site-footer__presentation-contact:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

@media (min-width: 900px) {
    .application-page .referral-hero {
        display: block;
        padding-block: var(--space-12);
    }

    .application-page .referral-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .application-page .site-footer--presentation .site-footer__presentation-inner {
        padding-block: var(--space-8);
    }

    .application-page .site-footer__presentation-grid {
        grid-template-columns: minmax(160px, .7fr) minmax(420px, 1.7fr) minmax(200px, .8fr);
        gap: var(--space-6);
    }

    .application-page .site-footer__presentation-brand {
        padding-right: var(--space-4);
        border: 0;
    }
}

@media (max-width: 700px) {
    .application-page .auth-choice-layout__panel .auth-screen,
    .application-page .auth-screen {
        padding: var(--space-6) var(--space-4) 0;
    }

    .application-page .auth-screen__content {
        padding-bottom: var(--space-6);
    }

    .application-page :is(.identity-result, .email-validation-result, .email-pending) {
        gap: var(--space-4);
    }

    .application-page .referral-hero,
    .application-page .referral-program-content,
    .application-page .legal-layout {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

    .application-page .referral-hero {
        padding-block: var(--space-6);
    }

    .application-page .referral-steps,
    .application-page .referral-conditions {
        gap: var(--space-4);
        margin-top: var(--space-6);
    }

    .application-page .referral-condition {
        padding-block: var(--space-4);
    }

    .application-page .button,
    .application-page .presentation-join {
        padding-inline: var(--space-4);
        font-size: var(--primitive-font-average);
    }

    .application-page .site-footer__presentation-meta {
        margin-top: var(--space-4);
    }
}

@media (max-width: 1039px) and (max-height: 700px) {
    .application-page .site-footer--presentation .site-footer__presentation-inner {
        padding-top: 20px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .application-page .site-footer__presentation-grid {
        gap: var(--space-3);
    }
}

@media (min-width: 560px) and (max-width: 1039px) and (max-height: 700px) {
    .application-page .site-footer__presentation-group {
        padding-top: 0;
        background-image: none;
    }
}

@media (min-width: 480px) and (max-width: 699px) and (max-height: 700px) and (orientation: landscape) {
    .application-page .site-footer__presentation-group {
        padding-top: 0;
        background-image: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .application-page *,
    .application-page *::before,
    .application-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}