/* Dark backdrop behind the sheets (edit profile hero, card layout, blog): the deepest step. The edit profile has three layers, one palette step
   each: backdrop gray-950, sheet (chrome / page tone) gray-900, cards gray-800. */
[theme=dark] { --app-backdrop-back: var(--p-gray-950); }

/* Wide-screen layouts for Candidate.Shared, loaded by every host (MAUI app, web).
   Phones (< 768px wide, or short windows such as a phone in landscape) are not touched by anything below.
     tablet   >= 768px: bottom bar stays, content is a centred column
     sidebar  >= 768px: the bottom bar becomes a sidebar and the content gets wider
     desktop  >= 1024px: login/onboarding get a brand panel, Opportunities and Agenda use columns
   Pages mark themselves wide with .nw-page-wide; everything else keeps a reading width. */

/* ParallaxHero pages (edit profile...), every width: a gray backdrop behind the hero, a white sheet, and gray cards on it in the
   light theme. In the dark theme the gray tokens get lighter, so the backdrop is set darker than the sheet explicitly. */
body > #app .parallax-hero { background: var(--s-gray-100); }
[theme=dark] body > #app .parallax-hero { background: var(--app-backdrop-back); }
body > #app .parallax-hero__sheet,
body > #app .blog-post-page__sheet { background: var(--app-chrome-back, #fff); }
body > #app .blog-post-page__hero-overlay { background: var(--app-chrome-back, #fff); }
/* background-color, not the shorthand, and not the progress card: that one paints its own gradient as a background-image. */
[theme=light] body > #app .parallax-hero__sheet .nw-card:not(.progress-gradient-card) { background-color: var(--app-page-back); }

/* Layouts that render the bar only for the desktop sidebar (DesktopOnly) hide it everywhere else. */
/* Agenda's day sheet, every width, same split as the edit profile sheet: a white sheet (the chrome tone) with gray cards on it in the
   light theme. In dark the chrome tone equals the page tone, so the cards keep their own colour there. */
/* body > #app: the component's own scoped rule would win otherwise. */
body > #app .agenda-bottom-sheet { background: var(--app-chrome-back, #fff); }
[theme=light] body > #app .agenda-bottom-sheet .nw-card-appointments-container { background-color: var(--app-page-back); }

/* Inner edit-profile views (EditProfileLayout): the form sits in a white card. On a phone the card is the whole view (white, no gray
   anywhere); from 768px the page keeps Home's gray around a centred white card. */
.nw-edit-profile-card { background: var(--app-chrome-back, #fff); min-height: 100%; }
/* Cards inside that white card (the settings menus, the edit profile sub-views) are the page gray, light theme, as in the edit profile menu.
   background-color rather than the shorthand, and not the progress card, which paints a gradient background-image. */
/* The chat (MessagesDetail) fills the card and scrolls its own message list, so the card needs a definite height (not min-height) and the page
   a flex share of it; the input stays pinned at the bottom of the card. A phone: the whole view. */
body > #app .nw-edit-profile-card:has(> .messages-page) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
body > #app .nw-edit-profile-card > .messages-page { flex: 1 1 auto; height: auto; min-height: 0; }

/* Incentives live in the edit-profile card too: their top bar is part of the card's flow like NwMobileHeader (not floating over it), the module's
   own scroller stops owning the viewport height, and the full-viewport gradient is a band at the top of the card. */
body > #app .nw-edit-profile-card { position: relative; }
body > #app .nw-edit-profile-card .incentive-nav-bar {
    position: sticky;
    inset: 0 auto auto 0;
    background: var(--app-chrome-back);
    border-bottom: 0;
    padding-inline: var(--spacing-mobile, 1.25rem);
    z-index: var(--nw-z-floating-header);
}
body > #app .nw-edit-profile-card .incentive-nav-bar__bg { display: none; }
body > #app .nw-edit-profile-card .incentive-page { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
body > #app .nw-edit-profile-card .incentive-content-frame { padding-top: 0; }
body > #app .nw-edit-profile-card .incentive-gradient-bg { position: absolute; inset: 0 0 auto 0; height: 18rem; }

[theme=light] body > #app .nw-edit-profile-card .nw-card:not(.progress-gradient-card) { background-color: var(--app-page-back); }
/* Inputs in that layout, light: loose on the white card they are gray (the default is white = invisible); inside the gray .nw-card they are
   white (the default gray there = invisible). The tokens are set on the layout card so every input type (text, select, date, textarea...) follows. */
[theme=light] body > #app .nw-edit-profile-card {
    --nw-input-back: var(--p-gray-100);
    --nw-surface-input-back: var(--p-gray-100);
    --nw-card-input-back: var(--p-gray-50);
}


@media (max-width: 767.98px), (max-height: 599.98px) {
    .nw-edit-profile-layout .nw-mobile-main-layout { background: var(--app-chrome-back, #fff); }
    body > #app .nw-mobile-bottom-actions--desk-only { display: none; }
}

/* ─────────────── tablet and desktop: centred content column ─────────────── */

@media (min-width: 768px) and (min-height: 600px) {
    body > #app {
        container-type: inline-size;
        --desk-content-width: 44rem;
    }

    body > #app .nw-mobile-body,
    body > #app .nw-mobile-header {
        --desk-pad: max(0px, calc((100cqw - var(--desk-content-width)) / 2));
    }

    body > #app .nw-mobile-body { padding-inline: var(--desk-pad); }

    body > #app .nw-mobile-header { padding-inline: calc(var(--desk-pad) + var(--spacing-mobile, 1.25rem)); }

    /* Fixed bars (incentives, hero pages) and fixed action footers line up with the content column. */
    body > #app .incentive-nav-bar,
    body > #app .incentive-content-frame__actions {
        padding-inline: calc(max(0px, (100cqw - var(--desk-content-width)) / 2) + var(--spacing-mobile, 1.25rem));
    }

    /* ParallaxHero (edit profile...): the hero image runs edge to edge over a light-gray page, and the sheet is a centred card
       of its own tone so the two never blend. */
    body > #app .nw-mobile-body:has(.parallax-hero),
    body > #app .nw-mobile-body:has(.blog-post-page) { padding-inline: 0; }
    body > #app .parallax-hero__sheet {
        /* A gutter on each side keeps the card off the sidebar (and the window edge) on narrow windows; a phone is < 768px and
           this block does not apply there, so it can still touch the edges. */
        width: min(calc(100% - 3rem), var(--desk-content-width));
        margin-inline: auto;
        box-sizing: border-box;
        box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, 0.25);
    }

    /* News article (BlogPostDetail): same card as the edit profile main page, over the gray page. */
    body > #app .blog-post-page__sheet {
        width: min(calc(100% - 3rem), var(--desk-content-width));
        margin-inline: auto;
        margin-bottom: 1.5rem;
        box-sizing: border-box;
        border-radius: 1.5rem;
        box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, 0.25);
    }
    body > #app .blog-post-page { background: var(--app-page-back); }
    [theme=dark] body > #app .blog-post-page { background: var(--app-backdrop-back); }

    /* Quick guide card (a popover in the top layer, positioned against the window): same width and position as the content column,
       i.e. the edit profile sheet. --wt-shift is how far the card moved from its default 1rem inset, so the arrow keeps pointing
       at the highlighted element. */
    body > #app .walkthrough-card {
        --wt-shift: max(0px, calc((100vw - 2rem - var(--desk-content-width)) / 2));
        max-width: var(--desk-content-width);
        margin-inline: auto;
    }
    body > #app .walkthrough-card .walkthrough-card-arrow { margin-left: calc(-1 * var(--wt-shift)); }

    /* AppPlainLayout (interviews, delete account): a centred content column. */
    body > #app .nw-plain-page { width: min(100%, var(--desk-content-width)); margin-inline: auto; }

    /* Sub-page headers live inside the body: pull them back out so the bar spans the whole area. */
    body > #app .nw-mobile-body > .nw-mobile-header {
        margin-inline: calc(-1 * var(--desk-pad));
        width: calc(100% + 2 * var(--desk-pad));
    }
}

/* ─────────────── sidebar (>= 768px) + wider content ─────────────── */

@media (min-width: 768px) and (min-height: 600px) {
    /* Home is one vertical column; the progress card would stretch the whole width, so it gets a maximum. */
    body > #app .nw-page-home .progress-gradient-card { max-width: 36rem; }

    body > #app { --desk-content-width: 52rem; }
    body:has(.nw-page-wide) > #app { --desk-content-width: 80rem; }

    /* Any page that renders the bottom bar gets the sidebar: content makes room for it. */
    body:has(.nw-mobile-bottom-actions) > #app {
        padding-left: 16rem;
        box-sizing: border-box;
        /* The 5rem reserved above the floating bottom bar is not needed: the bar is now the sidebar. */
        --bottom-actions-safe-space: var(--safe-bottom, 0px);
    }

    /* #app is the containing block of fixed bars and its padding is the sidebar: start them after it. */
    body:has(.nw-mobile-bottom-actions) > #app .incentive-nav-bar,
    body:has(.nw-mobile-bottom-actions) > #app .incentive-content-frame__actions,
    body:has(.nw-mobile-bottom-actions) > #app .parallax-hero__status-bar { left: 16rem; }
    body:has(.nw-mobile-bottom-actions) > #app .walkthrough-card {
        left: 17rem;
        --wt-shift: calc(16rem + max(0px, (100vw - 18rem - var(--desk-content-width)) / 2));
    }
    /* Hero pages (edit profile): the title bar that replaces the hero on scroll and the back button belong to the same card as the sheet,
       so they take the card's edges. --card-edge is the gap between the sidebar and the card (the card is min(100% - 3rem, column)). */
    body:has(.nw-mobile-bottom-actions) > #app { --card-edge: calc((100cqw - min(100cqw - 3rem, var(--desk-content-width))) / 2); }
    body:has(.nw-mobile-bottom-actions) > #app .parallax-hero__banner,
    body:has(.nw-mobile-bottom-actions) > #app .blog-post-page__banner {
        /* --hero-card-left / --hero-card-width are measured from the card by heroCollapse.js; the calc is only the first-paint fallback. */
        left: var(--hero-card-left, calc(16rem + var(--card-edge)));
        width: var(--hero-card-width, auto);
        right: var(--card-edge);
        padding-left: 4rem;
        padding-right: 1rem;
        /* Like the sub-view headers: the card's top corners, no shadow (its bottom edge is the page's own hairline once scrolled). */
        border-radius: 1.5rem 1.5rem 0 0;
        box-shadow: none;
    }
    body:has(.nw-mobile-bottom-actions) > #app .nw-button.parallax-hero__back-btn,
    body:has(.nw-mobile-bottom-actions) > #app .nw-button.blog-post-page__back-btn {
        left: calc(var(--hero-card-left, calc(16rem + var(--card-edge))) + var(--spacing-mobile, 1.25rem) - 0.5rem);
    }
    /* The share button mirrors it on the card's right edge. */
    body:has(.nw-mobile-bottom-actions) > #app .nw-button.blog-post-page__share-btn {
        left: auto;
        right: calc(var(--card-edge) + var(--spacing-mobile, 1.25rem) - 0.5rem);
    }

    /* Edit profile main page: same grouping as the inner views, keeping the hero as is (full width, the sheet overlapping its bottom).
       The sheet becomes a whole card: all corners rounded and a gap under it where the gray page shows. */
    body > #app .edit-profile-page__scroll .parallax-hero__sheet {
        border-radius: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Dark theme: the page behind the card is the same near-black as behind the edit profile sheet (--app-backdrop-back, darker than the card), so the
       settings and the edit profile sub-views match the edit profile main page. */
    [theme=dark] body > #app .nw-edit-profile-layout .nw-mobile-main-layout { background: var(--app-backdrop-back); }

    /* Edit profile inner views: gray page, centred white card with a gutter on each side; its header keeps the card's own padding. */
    body > #app .nw-edit-profile-layout .nw-mobile-body { padding-inline: 0; }
    body > #app .nw-edit-profile-card {
        width: min(calc(100% - 3rem), var(--desk-content-width));
        min-height: calc(100% - 3rem);
        margin: 1.5rem auto;
        border-radius: 1.5rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 28px -16px rgba(0, 0, 0, 0.18);
    }
    /* overflow hidden: the chat wallpaper and the input bar follow the card's rounded corners. */
    body > #app .nw-edit-profile-card:has(> .messages-page) { height: calc(100% - 3rem); min-height: 0; overflow: hidden; }
    body > #app .nw-edit-profile-card .nw-mobile-header {
        padding-inline: var(--spacing-mobile, 1.25rem);
        border-radius: 1.5rem 1.5rem 0 0;
    }

    /* Job description: content in the column; its fixed top bar starts after the sidebar and its content follows the column. */
    body > #app .jd-scroll { box-sizing: border-box; padding-inline: max(0px, calc((100cqw - var(--desk-content-width)) / 2)); }
    body:has(.nw-mobile-bottom-actions) > #app .jd-topbar {
        left: 16rem;
        padding-inline: calc(max(0px, (100cqw - var(--desk-content-width)) / 2) + var(--spacing-mobile, 1.25rem));
    }

    /* Tech interview: its layers are position:fixed against the window, so they start after the sidebar and follow the content
       column (--ti-edge is the gap between the sidebar and the column). */
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview { --ti-edge: max(0px, calc((100cqw - var(--desk-content-width)) / 2)); }
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview::before,
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview__top-bar,
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview__bottom-bar,
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview-call.is-finished,
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview-call__congrats-bg { left: 16rem; }
    body:has(.nw-mobile-bottom-actions) > #app .nw-button.tech-interview__back-btn {
        left: calc(16rem + var(--ti-edge) + var(--spacing-mobile) - 0.5rem);
    }
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview__title {
        left: calc(16rem + var(--ti-edge) + var(--spacing-mobile) + var(--tech-interview-scroll, 0) * (4.25rem - var(--spacing-mobile)));
        right: calc(var(--ti-edge) + var(--spacing-mobile));
    }
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview__title.is-selected,
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview__subtitle { left: calc(16rem + var(--ti-edge) + 4.25rem); }
    body:has(.nw-mobile-bottom-actions) > #app .tech-interview__subtitle { right: calc(var(--ti-edge) + var(--spacing-mobile)); }
    body:has(.nw-mobile-bottom-actions) > #app .nw-button.tech-interview-call__hangup-btn { left: calc(16rem + 50cqw); }

    /* Sidebar look follows NwoorkUI's NwSidebar (not the component itself): 20px wordmark, 1rem side padding, 2.5rem items with a
       0.625rem radius, 2.5rem icon cell, accent-tint selected (no hover colour), white surface. Its expanded width is 18.75rem; here it stays
       16rem so a 768px tablet keeps room for the content. */
    body > #app .nw-mobile-bottom-actions {
        --sb-item-height: 2.5rem;
        --sb-gap: 0.25rem;
        position: fixed;
        inset: 0 auto 0 0;
        width: 16rem;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: var(--safe-top, 0px) 1rem var(--safe-bottom, 0px);
        box-sizing: border-box;
        background: var(--app-chrome-back, #fff);
        color: var(--s-text-1, var(--app-text-main));
        border-right: 1px solid var(--s-gray-100, #ececec);
        pointer-events: auto;
        container-type: normal;
    }

    /* Logo cell: wordmark 20px high, aligned with the icons below. */
    body > #app .nw-mobile-bottom-actions::before {
        content: "";
        display: block;
        flex: none;
        /* As tall as the page header on the right (4.5rem), so the two bars line up. */
        height: 4.5rem;
        margin: 0 0 1rem;
        background: url("/assets/img/logo-light.svg") 0.5rem center / auto 20px no-repeat;
    }
    [theme=dark] body > #app .nw-mobile-bottom-actions::before { background-image: url("/assets/img/logo-dark.svg"); }

    /* The incentive sparkles sit over the icon, not the label. */
    body > #app .nw-mobile-bottom-actions .incentive-sparkles { left: 1.25rem; top: 0; }

    body > #app .nw-mobile-bottom-actions__safe { display: none; }

    body > #app .nw-mobile-bottom-actions__bar {
        display: block;
        margin: 0;
        padding: 0;
        width: auto;
        max-width: none;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    body > #app .nw-mobile-bottom-actions__track {
        --pill-gap: var(--sb-gap);
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: var(--sb-item-height);
        row-gap: var(--pill-gap);
    }

    /* The pill slides vertically under the active item. */
    body > #app .nw-mobile-bottom-actions__pill {
        top: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: var(--sb-item-height);
        border-radius: 0.625rem;
        background: var(--s-accent-tint, var(--s-gray-100));
        transform: translateY(calc(var(--active-index) * (var(--sb-item-height) + var(--pill-gap))));
    }

    body > #app .nw-mobile-bottom-actions__item {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        min-width: 0;
        padding: 0;
        height: var(--sb-item-height);
        box-sizing: border-box;
        border-radius: 0.625rem;
        color: var(--s-text-1, var(--app-text-main));
        transition: color 0.15s ease-in, background-color 0.15s ease-in;
    }

    /* Icon cell is 2.5rem wide, like .nw-sidebar-menu__item-icon, and idle icons use the main colour. */
    body > #app .nw-mobile-bottom-actions__icon {
        width: 2.5rem;
        height: var(--sb-item-height);
        color: var(--s-main-500, #6d1be6);
    }
    /* The filled (active) icons are the app's own SVGs and carry no size of their own: pin them to the library icons' 1.5rem. */
    body > #app .nw-mobile-bottom-actions__icon > svg { width: 1.5rem; height: 1.5rem; flex: none; }

    body > #app .nw-mobile-bottom-actions__label {
        display: flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
        font-size: var(--nw-font-size-sm, 0.875rem);
        font-weight: 600;
        text-align: left;
        text-transform: uppercase;
        text-wrap: nowrap;
    }

    body > #app .nw-mobile-bottom-actions__item--active,
    body > #app .nw-mobile-bottom-actions__item--active:hover { color: var(--s-main-500, #6d1be6); }

    /* The logo moves into the sidebar. */
    body > #app .nw-mobile-header > img { display: none; }
}

/* ─────────────── desktop: page layouts ─────────────── */

@media (min-width: 1024px) and (min-height: 600px) {
    /* Opportunities: a flat run of headings and cards. Headings take the full row, cards flow into as many columns as fit. */
    body > #app .nw-page-opps {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
        column-gap: 1.5rem;
        row-gap: 1.25rem;
        align-content: start;
        align-items: start;
    }
    body > #app .nw-page-opps > :not(.job-border) { grid-column: 1 / -1; }

    /* Agenda: calendar and the selected day side by side, equal width. */
    @media (min-width: 1024px) {
        body > #app .agenda-drag-container.nw-page-wide {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: auto 1fr;
            column-gap: 1.5rem;
            align-content: start;
            padding: 1rem max(1.5rem, var(--desk-pad)) 2rem;
        }
        body > #app .agenda-drag-container.nw-page-wide .agenda-weekday-row { grid-column: 1; grid-row: 1; max-width: none; }
        body > #app .agenda-drag-container.nw-page-wide .agenda-page { display: contents; }
        body > #app .agenda-drag-container.nw-page-wide .calendar-grid { grid-column: 1; grid-row: 2; }
        body > #app .agenda-drag-container.nw-page-wide .agenda-bottom-sheet {
            grid-column: 2;
            grid-row: 1 / span 2;
            max-width: none;
            height: auto;
            align-self: stretch;
            border-radius: 1.5rem;
        }
        body > #app .agenda-drag-container.nw-page-wide .agenda-drag-notch { display: none; }
    }
}

/* ─────────────── sign-in and onboarding (AuthShell) ───────────────
   Mirrors the candidate site's create-account page (NwoorkWeb /crear-cuenta).
   Phones in the app: the wrappers vanish and the screen is untouched.
   Tablet >= 768px: the screen sits in a centred card over the brand background.
   Desktop >= 960px: the brand panel (copy and, in the onboarding, the step list) appears beside the card.
   In a browser (.nw-auth-shell--web) the site header is added from tablet width up; phones never get the shell. */

.nw-auth-shell,
.nw-auth-card { display: contents; }

.nw-auth-aside,
.nw-auth-foot,
.nw-auth-bg,
.nw-auth-hdr,
.nw-auth-drawer { display: none; }

.nw-auth-shell {
    --auth-pad: clamp(20px, 5vw, 64px);
    /* Breathing room between the card edge and the screen inside it. */
    --auth-card-px: 1.5rem;
    --auth-card-py: 1rem;
}

@media (min-width: 768px) and (min-height: 600px) {
    body > #app { min-height: 100dvh; }

    .nw-auth-shell {
        --auth-hdr: 0px;
        --auth-card-height: min(calc(100dvh - 4rem), 45rem);
        position: fixed;
        inset: 0;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        justify-items: center;
        box-sizing: border-box;
        padding: 2rem max(var(--auth-pad), calc((100% - 1600px) / 2 + var(--auth-pad)));
        overflow: auto;
        background: #2b0a66;
    }

    .nw-auth-shell .nw-auth-bg { display: block; }

    .nw-auth-shell .nw-auth-card {
        --nw-viewport-height: calc(var(--auth-card-height) - 2 * var(--auth-card-py));
        display: block;
        box-sizing: border-box;
        padding: var(--auth-card-py) var(--auth-card-px);
        position: relative;
        z-index: 1;
        width: min(100%, 36rem);
        height: var(--auth-card-height);
        overflow: hidden;
        border-radius: 1.5rem;
        background: var(--nw-surface-back, #fff);
        box-shadow: 0 40px 80px -40px rgba(10, 0, 40, 0.6);
        /* Makes the card the containing block of position:fixed content, so sheets and headers stay inside it. */
        transform: translateZ(0);
    }

    /* The congratulations screen draws its own padded, rounded gradient: the card keeps only a small rim around it. */
    .nw-auth-shell .nw-auth-card:has(.ob-congrats) { --auth-card-px: 0.5rem; --auth-card-py: 0.5rem; }

    /* The loader page and the web splash show the background on their own, outside the card mode. */
    .nw-auth-bg--splash { display: block; }

    .nw-auth-shell--web {
        --auth-hdr: 76px;
        --auth-card-height: min(calc(100dvh - var(--auth-hdr) - 6rem), 45rem);
        padding-block: calc(var(--auth-hdr) + 2rem) 4rem;
    }

    /* Copyright and version float, centred, on one line at the very bottom of the window; the welcome screen's own copy is hidden. */
    .nw-auth-foot {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0.625rem;
        z-index: 2;
        margin: 0;
        text-align: center;
        white-space: nowrap;
        font-family: 'Open Sans', system-ui, sans-serif;
        font-size: 0.75rem;
        line-height: 1rem;
        color: rgba(255, 255, 255, 0.55);
        pointer-events: none;
    }

    .nw-auth-shell .nw-welcome-foot { display: none; }

    /* Shown only together with the card, so phones get the plain screen. */
    .nw-auth-shell--web .nw-auth-hdr { display: block; }
    .nw-auth-shell--web .nw-auth-drawer { display: flex; }
}

@media (min-width: 960px) and (min-height: 600px) {
    .nw-auth-shell {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        justify-items: stretch;
        column-gap: 3rem;
    }

    .nw-auth-shell { --auth-card-px: 2.5rem; --auth-card-py: 2rem; }

    .nw-auth-shell .nw-auth-card { width: auto; }

    .nw-auth-aside {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        position: relative;
        z-index: 1;
        color: #fff;
    }

    .nw-auth-aside__title {
        margin: 0;
        font-family: 'Poppins', system-ui, sans-serif;
        font-weight: 600;
        font-size: clamp(2.5rem, 3.4vw, 3.5rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
        color: #fff;
    }

    .nw-auth-aside__lead {
        margin: 0;
        max-width: 30ch;
        font-size: 1.25rem;
        line-height: 1.5;
        color: #f1e9fa;
    }

    .nw-auth-steps {
        list-style: none;
        margin: 0.5rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .nw-auth-steps__item {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        font-family: 'Poppins', system-ui, sans-serif;
        font-weight: 600;
        font-size: 1.125rem;
        color: rgba(255, 255, 255, 0.55);
        transition: color 0.3s;
    }

    .nw-auth-steps__dot {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        font-size: 0.9375rem;
        transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    }

    .nw-auth-steps__item--current,
    .nw-auth-steps__item--done { color: #fff; }

    .nw-auth-steps__item--current .nw-auth-steps__dot {
        border-color: #fff;
        background: rgba(255, 255, 255, 0.16);
    }

    .nw-auth-steps__item--done .nw-auth-steps__dot {
        background: #fff;
        border-color: #fff;
        color: #5a2591;
    }
}

/* Copy / form split grows toward 50/50 as the window widens: 40/60 > 45/55 > 50/50 */
@media (min-width: 1280px) and (min-height: 600px) {
    .nw-auth-shell {
        grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
        column-gap: 4rem;
    }
}

@media (min-width: 1600px) and (min-height: 600px) {
    .nw-auth-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Brand background: photo, two glows and grain, as on the site. */
.nw-auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #2b0a66;
    pointer-events: none;
}

.nw-auth-bg__img {
    position: absolute;
    inset: -6%;
    background: url("/assets/img/bg-purple.jpg") 70% 50% / cover no-repeat;
    animation: nw-auth-bgdrift 26s ease-in-out infinite alternate;
    will-change: transform;
}

.nw-auth-bg__glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 900px;
    max-height: 900px;
    right: -12%;
    top: -20%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(155, 94, 255, 0.55), rgba(155, 94, 255, 0));
    filter: blur(20px);
    mix-blend-mode: screen;
    animation: nw-auth-glowmove 18s ease-in-out infinite alternate;
}

.nw-auth-bg__glow--b {
    left: -18%;
    bottom: -35%;
    right: auto;
    top: auto;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(closest-side, rgba(115, 49, 184, 0.6), rgba(115, 49, 184, 0));
    animation-duration: 22s;
    animation-delay: -6s;
}

.nw-auth-bg__grain {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: radial-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}

@keyframes nw-auth-bgdrift {
    0% { transform: scale(1.04) translate(0, 0); }
    50% { transform: scale(1.12) translate(-2%, 1.5%); }
    100% { transform: scale(1.06) translate(1.5%, -1%); }
}

@keyframes nw-auth-glowmove {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-8%, 10%) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .nw-auth-bg__img,
    .nw-auth-bg__glow { animation: none; }
}

/* Site header (browser only): white on the dark background, as nwoork.cl's candidate header. */
.nw-auth-shell--web .nw-auth-hdr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    color: #fff;
    font-family: 'Open Sans', system-ui, sans-serif;
    line-height: 1.5;
}

.nw-auth-hdr__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 76px;
    box-sizing: border-box;
    max-width: 1600px;
    margin: 0 auto;
    padding-inline: var(--auth-pad);
}

.nw-auth-hdr a { color: inherit; text-decoration: none; }

.nw-auth-hdr__logo { display: block; width: 112px; }
.nw-auth-hdr__logo img { display: block; width: 100%; height: auto; }

.nw-auth-hdr__nav { display: flex; gap: 4px; }

.nw-auth-hdr__nav a,
.nw-auth-hdr__uni a,
.nw-auth-hdr__btn { white-space: nowrap; }

.nw-auth-hdr__nav a {
    font-weight: 600;
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 999px;
    transition: background-color 0.2s;
}

.nw-auth-hdr__nav a:hover { background: rgba(255, 255, 255, 0.14); }

.nw-auth-hdr__right { display: flex; align-items: center; gap: 10px; }

.nw-auth-hdr__uni {
    display: flex;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.nw-auth-hdr__uni a {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
}

.nw-auth-hdr__uni a[aria-current="page"] {
    background: #fff;
    color: #2d2926;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.nw-auth-hdr__dl { position: relative; display: inline-flex; }

.nw-auth-hdr__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #2d2926;
    font: 700 14px 'Open Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s;
}

.nw-auth-hdr__btn:hover { background: #f3ea5d; }
.nw-auth-hdr__btn svg { width: 18px; height: 18px; flex: none; }

.nw-auth-hdr__pop {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: max-content;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    color: #2d2926;
    box-shadow: 0 20px 50px -12px rgba(45, 41, 38, 0.35);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.nw-auth-hdr__dl.is-open .nw-auth-hdr__pop { opacity: 1; transform: none; pointer-events: auto; }
.nw-auth-hdr__pop small { font-size: 13px; color: #5e5e5e; font-weight: 600; }
.nw-auth-hdr__pop a { display: block; line-height: 0; }
.nw-auth-hdr__pop img { display: block; height: 48px; width: auto; }

.nw-auth-hdr__burger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nw-auth-hdr__burger span,
.nw-auth-hdr__burger span::before,
.nw-auth-hdr__burger span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.nw-auth-hdr__burger span { position: relative; }
.nw-auth-hdr__burger span::before,
.nw-auth-hdr__burger span::after { content: ""; position: absolute; left: 0; }
.nw-auth-hdr__burger span::before { top: -6px; }
.nw-auth-hdr__burger span::after { top: 6px; }
.nw-auth-hdr__burger.is-open span { background: transparent; }
.nw-auth-hdr__burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nw-auth-hdr__burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.nw-auth-shell--web .nw-auth-drawer {
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 3svh, 24px);
    position: fixed;
    inset: 0;
    z-index: 45;
    box-sizing: border-box;
    padding: 96px var(--auth-pad) 40px;
    background: #7331b8;
    color: #fff;
    clip-path: circle(0 at calc(100% - 44px) 38px);
    visibility: hidden;
    transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.nw-auth-shell--web .nw-auth-drawer.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; }

.nw-auth-drawer a {
    color: inherit;
    text-decoration: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 9vw, 56px);
    line-height: 1.25;
}

@media (max-width: 959px) {
    .nw-auth-hdr__nav,
    .nw-auth-hdr__uni,
    .nw-auth-hdr__dl { display: none; }

    .nw-auth-hdr__burger { display: flex; }
}

/* Full-screen pages that use the sign-in layout by default (the "/" splash, app update, under construction) are not
   sign-in screens: no card, no brand panel, no site header, they fill the window as on a phone. Must stay after the AuthShell rules. */
.nw-auth-shell:has(.nw-loading-page, .au-page, .uc-page),
.nw-auth-shell:has(.nw-loading-page, .au-page, .uc-page) .nw-auth-card {
    display: contents;
}

.nw-auth-shell:has(.nw-loading-page, .au-page, .uc-page) > :is(.nw-auth-aside, .nw-auth-foot, .nw-auth-bg, .nw-auth-hdr, .nw-auth-drawer) { display: none; }

/* Agenda's purple background runs edge to edge; its own padding keeps the content in the column. */
@media (min-width: 1024px) and (min-height: 600px) {
    body > #app .nw-mobile-body:has(.agenda-drag-container.nw-page-wide) { padding-inline: 0; }
}