/*!
 * Nativa Theme — Sign-in, register and password screens
 *
 * TWO ARRANGEMENTS, and which one a buyer gets depends on their core. Where the
 * guest layout resolves the auth body through theme_view() this package ships
 * `partials/auth-shell` and the page is the one centred column on a patterned
 * canvas the design was drawn as — see THE CENTRED SHELL at the foot of this
 * file. On an older core the product still draws its split screen (brand pane
 * left, card right) and the rules in the middle of this file REPAINT it, which is
 * what the whole package used to do. Neither set is dead and neither is a
 * fallback for a bug: they are two cores.
 *
 * WHAT NEITHER OF THEM TOUCHES. The form is the PRODUCT'S markup travelling in
 * $slot — the heading, the error bag, the fields, the reCAPTCHA, the password
 * reveal, the submit, the signups switch. Nothing in this package adds, removes
 * or moves a control, which is the only reason all of that keeps working exactly
 * as it does on every other design. The `.rf-*` rules below repaint them and
 * apply on both arrangements.
 *
 * WHY A SECOND FILE next to portal.css. The portal is a token repaint — a dozen
 * variables and the compiled bundle does the rest. Auth is the one client
 * surface the design draws differently enough (pill fields, ink button, warm
 * card on warm paper) that it needs real rules, and mixing the two would bury
 * the twelve tokens that matter under three hundred lines that only apply to
 * three URLs.
 *
 * WHAT THIS FILE MAY NOT DO
 * —————————————————————————
 *   · It never declares --brand. The operator's colour is seeded last by the
 *     shell; every accent below is var(--brand) so a reseller who picked blue
 *     gets a blue-accented Nativa rather than our yellow on their front door.
 *     The INK is not a brand colour — it is the design's typographic black and
 *     is the same for everyone, exactly as it is on the landing page.
 *   · It declares its tokens for BOTH themes. The sign-in page carries the
 *     light/dark toggle, so a theme that only dresses one of them leaves the
 *     visitor pressing a switch that half-works — the same rule the content
 *     pages follow in parts/92-dark.css.
 *
 * FONTS. landing.css is not loaded on these pages, so the @font-face block that
 * normally lives in parts/00-base.css is repeated here. The URLs are identical,
 * so a visitor who arrived from the landing reuses the cached file and this
 * costs nothing.
 *
 * Link: public/portal.css          — the token repaint of the portal behind this
 *       public/parts/30-login.css  — the landing's own sign-in card
 */

/* ── Poppins, served from the package (SIL Open Font License 1.1) ─────────── */
@font-face {
    font-family: 'Nativa Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nativa Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nativa Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nativa Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   TOKENS — the few values these three pages need
   ============================================================ */

/*
 * Declared on the element that carries the theme identity, so they are scoped
 * to this design and cannot leak into a panel wearing another one. Same
 * argument as portal.css: an attribute selector on the root beats the bundle's
 * :root because the bundle's tokens sit inside a Tailwind cascade layer.
 */
[data-theme="nativa"] {
    --nva-ink: #1b1b1b;
    --nva-ink-soft: #3a3a3a;
    --nva-muted: #6b6b6b;
    /* The design's own hint grey is #9a9a9a, which measures 2.8:1 on the card —
       fine for the 20px numbers it labels on the landing, too low for the 12px
       "or continue with email" rule here. Deepened to the lightest grey that
       clears 4.5:1 at that size, which keeps the whisper without printing it in
       a colour a visitor has to lean in to read. */
    --nva-faint: #6f6f6f;
    --nva-card: #fff;
    --nva-field: #faf8f0;
    --nva-field: color-mix(in srgb, var(--brand) 4%, #fff);
    --nva-line: #f0ead2;
    --nva-line: color-mix(in srgb, var(--brand) 12%, #ece9e0);
    --nva-line-soft: #eee8d2;
    --nva-line-soft: color-mix(in srgb, var(--brand) 9%, #eeebe2);
    /* The amber the landing uses for the same job. Mixed further towards black
       than the landing's 80% because these are CONTROLS on a light surface —
       "Forgot password?", "Create one", the badge, the chip captions — and the
       landing's shade measures 2.5:1 there. A link a visitor cannot read is a
       road they do not take.

       56% → 52%, and the four points are measured rather than tidied. The card
       of the centred shell is GLASS (86% white over warm paper), not the pure
       #fff the old figure was taken against, and that alone dropped the whole
       family to 4.47:1 — under AA by three hundredths, which is exactly the kind
       of miss nobody sees and every checker reports. At 52% the same four read
       5.04:1. It goes the other way from the obvious: the percentage is how much
       BRAND is in the mix, so raising it lightens. The compatibility path gets
       the same shade a little deeper on white, which is a gain, not a change of
       behaviour. */
    --nva-deep: #85670a;
    --nva-deep: color-mix(in srgb, var(--brand) 52%, #000);
    --nva-font: 'Nativa Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* The card's own elevation: the design lifts it off the paper with a wide,
       very soft shadow rather than a border. */
    --nva-card-shadow: 0 24px 60px rgba(0, 0, 0, .10);

    /* ── The centred shell (partials/auth-shell) ──────────────────────────────
       The canvas the card floats on, its hairline grid and the tiles beside it.
       The design was drawn DARK, so the honest reading of these four is: the
       .dark block below is the design, and this block is our answer for the
       light half the export does not have — same geometry, this package's own
       warm paper instead of near-black. The alternative was to let the sign-in
       page ignore the light/dark switch, which is the "control with no effect"
       this product has already been rejected for once. */
    --nva-canvas: #fbf6e6;
    --nva-canvas: color-mix(in srgb, var(--brand) 7%, #fdfaf2);
    /* The grid is INK at a very low alpha on paper and LIGHT at a very low alpha
       on near-black — it is a texture, so it has to be the opposite of whatever
       it sits on rather than one fixed colour.

       The alpha is NOT the export's, and the reason is measured. An ornament is
       judged by how far it stands off the field it sits on RELATIVE to that
       field, and a low alpha does not buy the same amount of that on paper as it
       does on near-black: the dark canvas reads 17,16,11, so 3.5% of light lifts
       it by nearly half again (43.6% Weber), while 5.5% of ink on a 253,246,225
       paper moves it by a twentieth (10.7%) — a hairline nobody can see. Raised
       until the light half lands in the same neighbourhood the dark one already
       occupied; 12% measures 23%. The contrast RATIO a text checker reports is
       useless here and says the opposite (1.11 light against 1.07 dark), which
       is why a clean contrast sweep and an invisible ornament are not a
       contradiction. */
    --nva-canvas-line: rgba(27, 27, 27, .12);
    --nva-glass: rgba(255, 255, 255, .86);
    --nva-glass-line: rgba(27, 27, 27, .06);
    --nva-glass-shadow: 0 40px 100px -28px rgba(70, 58, 12, .28);
    --nva-chip: rgba(255, 255, 255, .78);
    /* Same correction, same reason: .07 measured 13.8% against the tile's own
       glass where the dark half has 58.2%. And the tile cannot be rescued by its
       FILL on this side — white at any alpha over warm paper tops out around 8%,
       so on paper the figure is held by its edge and its shadow, which is the
       pattern the rest of this design already uses for a white card on cream. */
    --nva-chip-line: rgba(27, 27, 27, .16);
    /* Warm and two-part on paper: the wide soft drop alone spreads its darkness
       over 50px and defines nothing, so a short near shadow carries the edge. On
       near-black the export's single drop is what the design draws. */
    --nva-chip-shadow: 0 18px 40px -14px rgba(70, 58, 12, .24), 0 2px 6px rgba(70, 58, 12, .07);
    /* The dashed ring. NOT the brand at a low alpha here: brand yellow on warm
       cream is a difference of HUE and barely one of lightness — measured, the
       brand at FULL strength only reaches 34.8%, so no alpha of it could have
       worked. The deepened brand is the same hue an operator chose with the
       lightness this side needs; 36% measures 37.4%. */
    --nva-ring: color-mix(in srgb, var(--nva-deep) 36%, transparent);
    /* The copyright, and the only grey on this page small enough (11px) to need
       checking rather than eyeballing: the export's #55555A measures 3.0:1 on
       its own canvas, below the 4.5:1 a caption that size needs. Both halves of
       this token are the nearest value that clears it — measured on the canvas
       they actually sit on, which is why the light one is a warm grey and not
       the export's cool #55555A. */
    --nva-foot: #716c63;
    /* The badge label. NOT var(--brand): the design's yellow on the design's
       near-black clears 10:1, and the same yellow on this block's cream is 1.6:1
       — the pill would read as an empty outline. This is the same deepened brand
       the links on the card already use, so it follows an operator's own hue. */
    --nva-badge-ink: var(--nva-deep);
}

/*
 * Dark. The design has no dark mode — it was drawn in light — so this half is
 * ours to answer for, and the rule is the one the content pages already follow:
 * warm dark, never neutral grey, so the two public surfaces belong to the same
 * site. The ink inverts to a warm cream; what stays brand-coloured is checked
 * for contrast rather than assumed (a brand accent on an inverted surface is
 * the one combination that reliably falls below 4.5:1).
 */
.dark[data-theme="nativa"] {
    --nva-ink: #ffffff;
    --nva-ink-soft: #f5f5f5;
    --nva-muted: #b7b7b8;
    --nva-faint: #9a9a9b;
    --nva-card: #1c1524;
    --nva-field: #16111c;
    --nva-line: #5c2e78;
    --nva-line-soft: #3d2054;

    /* The link colour has to climb, not deepen: #c99a00 on a dark card is the
       1.3:1 case the FAQ page already hit. Mixing the brand towards white keeps
       the operator's hue and clears the threshold. */
    --nva-deep: #ce6bff;

    --nva-card-shadow: 0 24px 60px rgba(0, 0, 0, .45);

    /* ── The centred shell, as the design was actually drawn ──────────────────
       These are the export's own values. The canvas carries a little of the
       operator's colour rather than being a flat near-black, for the reason the
       portal's dark mode already gives: a warm dark belongs to the same site as
       the landing, a neutral grey belongs to nobody. With the factory brand the
       mix lands on the design's #0b0b0c to within a byte. */
    --nva-canvas: #0e0b16;
    --nva-canvas-line: rgba(255, 255, 255, .035);
    --nva-glass: rgba(18, 18, 20, .82);
    --nva-glass: color-mix(in srgb, var(--brand) 5%, rgba(17, 17, 19, .84));
    --nva-glass-line: rgba(255, 255, 255, .07);
    --nva-glass-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8);
    --nva-chip: rgba(20, 20, 22, .75);
    --nva-chip: color-mix(in srgb, var(--brand) 5%, rgba(19, 19, 21, .78));
    --nva-chip-line: rgba(255, 255, 255, .08);
    /* The two the light half had to correct are declared here with the export's
       own figures, unchanged: on near-black these already stand off the canvas
       (58.2% and 90% measured), so this side is the design and the other side is
       the answer to it. */
    --nva-chip-shadow: 0 20px 50px -10px rgba(0, 0, 0, .28);
    --nva-ring: color-mix(in srgb, var(--brand) 26%, transparent);
    /* The export's #55555A is 3.0:1 on its canvas; raised to the nearest warm
       grey that clears 4.5:1 at 11px. */
    --nva-foot: #8b857b;
    /* Here the design's own yellow IS the right answer — brand on near-black is
       the combination it was drawn as, and it measures well clear. */
    --nva-badge-ink: var(--brand);
}

/* ============================================================
   BRAND PANE (left)
   ============================================================ */

/*
 * The design's pane is INK with one brand-coloured ring cut off by the edge —
 * not the brand-gradient the product ships. The ring is drawn on the pane's own
 * ::after (the product uses it for a faint grid, which this replaces) so no
 * extra element is needed, and it is painted with var(--brand): on a reseller
 * who chose their own colour the ring follows them.
 */
:where([data-theme="nativa"]) .rf-auth-brand {
    background: #151515;
}

:where([data-theme="nativa"]) .rf-auth-brand::after {
    content: '';
    position: absolute;
    inset: auto auto auto 44%;
    top: -96px;
    width: 292px;
    height: 292px;
    margin-inline-start: -146px;
    border: 30px solid var(--brand);
    border-radius: 50%;

    /* Dimmed, and measured rather than guessed: at full strength a brand ring
       behind white type is a headline fighting a wheel, and the design shows it
       as a whisper — dark enough that on a blue or purple brand it still reads
       as texture instead of a second subject. */
    opacity: .26;
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}

/* A single warm glow low on the pane, in place of the product's three
   brand-tinted blobs — those read as a purple/blue haze that the ink design
   does not have. */
:where([data-theme="nativa"]) .rf-auth-blobs {
    background: radial-gradient(760px 420px at 18% 108%,
                color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%);
    mix-blend-mode: normal;
    opacity: 1;
}

/* Headline in the display face, at the design's weight. */
:where([data-theme="nativa"]) .rf-auth-brand h2 {
    font-family: var(--nva-font);
    font-weight: 700;
    letter-spacing: -.02em;
}

/* The feature bullets: the design tints the icon with the brand and keeps the
   tile dark, where the product paints both in white. */
:where([data-theme="nativa"]) .rf-auth-brand li > span:first-child {
    background: rgba(255, 255, 255, .06);
    color: var(--brand);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
    border-radius: 14px;
}

/* ============================================================
   FORM CARD (right)
   ============================================================ */

:where([data-theme="nativa"]) .rf-auth-card {
    background: var(--nva-card);
    border: 0;
    border-radius: 26px;
    box-shadow: var(--nva-card-shadow);
    padding: 34px 30px;
}

@media (min-width: 640px) {
    :where([data-theme="nativa"]) .rf-auth-card { padding: 38px 36px; }
}

:where([data-theme="nativa"]) .rf-auth-title {
    font-family: var(--nva-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--nva-ink);
}

:where([data-theme="nativa"]) .rf-auth-sub {
    font-size: 14px;
    color: var(--nva-muted);
}

:where([data-theme="nativa"]) .rf-auth-foot {
    font-size: 14px;
    color: var(--nva-muted);
}

/* The one accent link of the card, in the deepened brand the landing uses for
   the same job ("Sign up" under its own login block). */
:where([data-theme="nativa"]) .rf-auth-link {
    color: var(--nva-deep);
    font-weight: 600;
}

/* ── Social row ── */

:where([data-theme="nativa"]) .rf-social-btn {
    border-radius: 999px;
    border: 1.5px solid var(--nva-line-soft);
    background: var(--nva-card);
    color: var(--nva-ink);
    padding: 13px 20px;
    font-family: var(--nva-font);
}

:where([data-theme="nativa"]) .rf-social-btn:hover {
    background: var(--nva-field);
    border-color: var(--nva-line);
}

/*
 * Facebook keeps its own blue — it is the platform's mark, not our palette, and
 * both designs draw it filled. It has to be restated here: the product paints it
 * from inside a cascade layer, and the unlayered rule above would otherwise
 * repaint it card-coloured with only the Facebook glyph left to tell you what it
 * was. Same trap as the brand seed on the landing, seen from the other side.
 *
 * THE SHADE IS FACEBOOK'S PRESSED BLUE, not its resting one, and the reason is
 * measured: white on #1877F2 is 4.23:1 — under AA for a 14px label, on a button
 * on the front door of the panel. #166FE5 is the blue Facebook itself uses for
 * the pressed state of the same button and clears it at 4.73:1, so the fix costs
 * the platform nothing recognisable and invents no colour of ours. Found by
 * sweeping this page after the shell was rebuilt; it is NOT a regression from
 * that work — the rule was byte-for-byte the same before it — which is why the
 * hover below moves with it rather than being left a shade above its resting
 * state.
 */
:where([data-theme="nativa"]) .rf-social-facebook {
    background: #166FE5;
    border-color: #166FE5;
    color: #fff;
}

:where([data-theme="nativa"]) .rf-social-facebook:hover {
    background: #0C63D4;
    border-color: #0C63D4;
    color: #fff;
}

:where([data-theme="nativa"]) .rf-social-divider {
    color: var(--nva-faint);
    font-size: 12px;
}

:where([data-theme="nativa"]) .rf-social-divider::before,
:where([data-theme="nativa"]) .rf-social-divider::after {
    background: var(--nva-line);
}

/* ── Fields ── */

:where([data-theme="nativa"]) .rf-label {
    font-family: var(--nva-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--nva-ink);
}

:where([data-theme="nativa"]) .rf-input {
    background: var(--nva-field);
    border: 1px solid var(--nva-line);
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 14px;
    color: var(--nva-ink);
}

:where([data-theme="nativa"]) .rf-input::placeholder {
    color: var(--nva-faint);
}

/*
 * Focus ring. NOT in :where() — the bundle's own focus rule is a plain class
 * selector, so a zero-specificity reset would lose to it and the field would
 * keep the stock ring while wearing Nativa's shape.
 */
[data-theme="nativa"] .rf-input:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}

:where([data-theme="nativa"]) .rf-checkbox {
    accent-color: var(--brand);
    border-radius: 6px;
}

/* ── Primary button ── */

/*
 * The design's submit is the INK pill, not the brand pill the bundle paints.
 * Specificity note, same as the focus ring: .rf-btn-primary is a class rule in
 * the bundle, so this one is written flat to win. In dark mode ink-on-ink would
 * disappear, so the button inverts to the brand with ink type — the reading the
 * rest of the design already uses when a surface flips.
 */
[data-theme="nativa"] .rf-btn-primary {
    background: var(--nva-ink);
    border-color: var(--nva-ink);
    color: #fff;
    border-radius: 999px;
    font-family: var(--nva-font);
    font-weight: 600;
    box-shadow: none;
}

[data-theme="nativa"] .rf-btn-primary:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.dark[data-theme="nativa"] .rf-btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--color-on-primary, #1b1b1b);
}

.dark[data-theme="nativa"] .rf-btn-primary:hover {
    background: color-mix(in srgb, var(--brand) 88%, #fff);
    border-color: color-mix(in srgb, var(--brand) 88%, #fff);
}

/* The sign-in submit is a full-width pill in the design, and the product
   already sizes it with rf-btn-lg; only its height needs the design's value. */
:where([data-theme="nativa"]) .rf-btn-lg {
    padding-block: 15px;
    font-size: 15px;
}

/* ── Mobile logo row (the brand pane is hidden below lg) ── */

:where([data-theme="nativa"]) [data-rf-brand-name] {
    font-family: var(--nva-font);
    font-weight: 700;
    color: var(--nva-ink);
}

/* ============================================================
   FURNITURE AROUND THE CARD
   ------------------------------------------------------------
   Three pieces the design draws outside the form: the page switch and the way
   home above the card, the reassurance strip below it, and the line of social
   proof at the foot of the brand pane. Their markup rides the product's
   guest.card_before / guest.card_after / guest.brand_footer slots, so nothing
   here reaches inside the form — see resources/views/auth/*.blade.php.
   ============================================================ */

/* ── Page switch + back to home ── */

:where([data-theme="nativa"]) .nv-auth-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    font-family: var(--nva-font);
}

:where([data-theme="nativa"]) .nv-auth-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    background: var(--nva-card);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

:where([data-theme="nativa"]) .nv-auth-tab {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nva-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

:where([data-theme="nativa"]) .nv-auth-tab:hover {
    color: var(--nva-ink);
}

/* The active tab: the design's ink pill with the label in the brand colour —
   the treatment every other brand accent on a dark surface gets in this package
   (the feature icons of the brand pane, the icons of the strip below it). An
   operator whose brand is very dark gets a quiet accent here, exactly as they
   do there.

   WHY THERE IS NO LIGHTNESS FLOOR, because the attempt is instructive:
   `color: var(--brand); color: hsl(from var(--brand) h s max(l, 56%));` looks
   like the progressive pair this file already uses for color-mix a hundred
   lines up, and it is not the same thing at all. A declaration whose value
   contains var() cannot be judged when the sheet is parsed, so the browser
   keeps it and discards the one before it; the substitution then fails at
   computed-value time, and an inherited property that fails there does not fall
   back to the declaration it replaced — it INHERITS. The label came out in the
   ink of its own pill: invisible, on the one control that says which page you
   are on. The rule this leaves: a two-declaration fallback only works when the
   newer value is literal enough for the parser to reject it. Anything carrying
   var() needs @supports — and in this case @supports would have answered false
   here anyway, since a channel keyword inside max() is not landed yet. */
:where([data-theme="nativa"]) .nv-auth-tab.is-on {
    background: #1b1b1b;
    color: var(--brand);
}

/* Dark: the ink pill would vanish into a dark bar, so the active tab becomes
   the brand pill and takes the pairing the operator's own colour ships with. */
.dark[data-theme="nativa"] .nv-auth-tabs {
    background: var(--nva-card);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
}

.dark[data-theme="nativa"] .nv-auth-tab.is-on {
    background: var(--brand);
    color: var(--color-on-primary, #1b1b1b);
}

:where([data-theme="nativa"]) .nv-auth-home {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--nva-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

:where([data-theme="nativa"]) .nv-auth-home:hover {
    color: var(--nva-ink);
}

/* The switch and the card share a width, so below the card's own breakpoint the
   row wraps rather than squeezing the two tabs into two lines of text. */
@media (max-width: 400px) {
    :where([data-theme="nativa"]) .nv-auth-top {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ── Reassurance strip ── */

:where([data-theme="nativa"]) .nv-auth-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 22px;
    margin-top: 18px;
    font-family: var(--nva-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nva-muted);
}

:where([data-theme="nativa"]) .nv-auth-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The icon carries the brand; the words stay in the page's reading grey, which
   is the pairing the design draws and the one that measures. */
:where([data-theme="nativa"]) .nv-auth-trust-item i {
    color: var(--nva-deep);
}

.dark[data-theme="nativa"] .nv-auth-trust-item i {
    color: var(--brand);
}

/* ── Social proof (foot of the brand pane) ── */

:where([data-theme="nativa"]) .nv-auth-proof {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--nva-font);
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}

:where([data-theme="nativa"]) .nv-auth-proof b {
    font-weight: 700;
    color: #fff;
}

/* Four overlapping discs. The design uses photographs of people; a package that
   shipped those would be putting strangers' faces on the buyer's front door, so
   this is the same silhouette drawn in the pane's own palette. */
:where([data-theme="nativa"]) .nv-auth-faces {
    display: inline-flex;
    align-items: center;
}

:where([data-theme="nativa"]) .nv-auth-faces i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #1b1b1b;
    background: linear-gradient(140deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12));
}

:where([data-theme="nativa"]) .nv-auth-faces i + i {
    margin-inline-start: -11px;
}

/* The last disc carries the brand, the way the design ends the row on colour. */
:where([data-theme="nativa"]) .nv-auth-faces i:last-child {
    background: var(--brand);
}

/* The pane itself is hidden below lg, so this row never reaches a phone. Where
   the pane first appears it is narrow enough that the line would crowd the
   copyright, and the whole block steps aside — not just its words. Hiding the
   sentence alone left four unexplained discs in the corner of the pane, which
   is worse than the line being absent: an ornament that has lost the thing it
   was ornamenting. With the block gone the copyright simply sits where the
   product always put it. */
@media (max-width: 1150px) {
    :where([data-theme="nativa"]) .nv-auth-proof {
        display: none;
    }
}

/* ============================================================
   THE CENTRED SHELL  (resources/views/partials/auth-shell.blade.php)
   ------------------------------------------------------------
   The arrangement this design was drawn as, and the reason the package now
   replaces the auth BODY instead of decorating it: there is no pane to stand
   beside, the header spans the page, the canvas sits behind everything and the
   copyright is at the bottom of the viewport. None of those positions can be
   reached from three slots around a card.

   Everything above this block still applies — the fields, the labels, the social
   buttons, the submit, the headings and the links are the PRODUCT'S markup
   travelling in $slot, and they are repainted by the `.rf-*` rules further up.
   That is what keeps the reveal toggle, the error bag and the reCAPTCHA working
   exactly as they do on a factory skin.

   The `.rf-auth-brand` / `.rf-auth-blobs` / `.rf-auth-card` rules further up are
   NOT dead: on a core too old to resolve the auth body through a theme the
   product still draws its split screen and this package still repaints it.
   ============================================================ */

/* The canvas colour has to reach the element that can overscroll, or a rubber
   band at the top of a phone flashes the browser's white. Scoped with :has so it
   only applies where our shell is the thing being drawn — on the compatibility
   path the product's split screen owns the viewport and must keep its own
   background. */
:where([data-theme="nativa"]) body:has(.nv-auth-page) {
    background: var(--nva-canvas);
}

:where([data-theme="nativa"]) .nv-auth-page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--nva-canvas);
    color: var(--nva-ink);
    font-family: var(--nva-font);
}

/* ── Canvas: hairline grid, faded out towards the edges ── */

:where([data-theme="nativa"]) .nv-auth-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--nva-canvas-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nva-canvas-line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 80%);
}

/* One broad glow in the operator's own colour, which is what stops this page
   being a grey grid with a form on it. */
:where([data-theme="nativa"]) .nv-auth-halo {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 900px;
    height: 900px;
    max-width: 180vw;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(circle,
                color-mix(in srgb, var(--brand) 16%, transparent) 0%,
                color-mix(in srgb, var(--brand) 5%, transparent) 35%,
                transparent 65%);
}

/* The slow dashed ring. Sized in px like the design, so it is drawn only where
   there is room for it OUTSIDE the card — below that width it would sit under
   the fields as a stray arc, which is the "decorative accent that becomes a
   background on a phone" this package has already had to fix once. */
:where([data-theme="nativa"]) .nv-auth-ring {
    display: none;
}

@media (min-width: 1101px) {
    :where([data-theme="nativa"]) .nv-auth-ring {
        display: block;
        position: absolute;
        left: 50%;
        top: 46%;
        width: 760px;
        height: 760px;
        margin-left: -380px;
        margin-top: -380px;
        border: 1px dashed var(--nva-ring);
        border-radius: 50%;
        pointer-events: none;
        animation: nvAuthSpin 80s linear infinite;
    }
}

@keyframes nvAuthSpin { to { transform: rotate(360deg); } }
@keyframes nvAuthFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes nvAuthPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Nothing on this page needs to move for it to work, so a visitor who asked the
   operating system for less motion gets all three held still rather than slowed
   down. */
@media (prefers-reduced-motion: reduce) {
    :where([data-theme="nativa"]) .nv-auth-ring,
    :where([data-theme="nativa"]) .nv-auth-chip,
    :where([data-theme="nativa"]) .nv-auth-dot {
        animation: none !important;
    }
}

/* ── The floating figures ── */

/* Below the width where they would overlap the card they are not moved, they are
   GONE: four tiles stacked above a login form are not the ornament the design
   drew, and the figures they carry are marketing rather than anything a visitor
   needs in order to sign in. */
:where([data-theme="nativa"]) .nv-auth-chips {
    display: none;
}

@media (min-width: 1101px) {
    :where([data-theme="nativa"]) .nv-auth-chips {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }
}

:where([data-theme="nativa"]) .nv-auth-chip {
    position: absolute;
    min-width: 170px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--nva-chip);
    border: 1px solid var(--nva-chip-line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--nva-chip-shadow);
    animation: nvAuthFloat 6s ease-in-out infinite;
}

/* The design's four anchors, two per side, with the drift deliberately out of
   phase so they do not bob as one block. Logical properties, so an RTL locale
   mirrors the arrangement instead of stacking all four down one edge. */
:where([data-theme="nativa"]) .nv-auth-chip-1 { inset-inline-start: 9%;  top: 26%;    animation-delay: 0s; }
:where([data-theme="nativa"]) .nv-auth-chip-2 { inset-inline-start: 13%; bottom: 22%; animation-delay: 1.2s; }
:where([data-theme="nativa"]) .nv-auth-chip-3 { inset-inline-end: 10%;   top: 22%;    animation-delay: .6s; }
:where([data-theme="nativa"]) .nv-auth-chip-4 { inset-inline-end: 13%;   bottom: 26%; animation-delay: 1.8s; }

:where([data-theme="nativa"]) .nv-auth-chip-k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nva-faint);
}

:where([data-theme="nativa"]) .nv-auth-chip-v {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--nva-ink);
}

:where([data-theme="nativa"]) .nv-auth-chip-n {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nva-deep);
}

/* ── The core's light/dark switch ──
   The product pins it to the corner of the VIEWPORT so it survives a design
   that replaces the whole body of this page — which is exactly what this theme
   does. That means it lands on top of OUR header: measured at 1200px, the
   switch ran 1142→1178 and "Back to home" ended at 1144, so the two overlapped.

   The core left the position in one class precisely so a design could place it,
   and this is that. Not wrapped in :where(): this is not an element reset, it
   has to BEAT `.rf-guest-theme` (0,1,0), so it is deliberately more specific
   rather than relying on which stylesheet the shell prints last.

   The numbers are the header's own: the same gutter clamp, and 29px top, which
   centres a 36px button in a header that measures 94. `.nv-auth-home` is moved
   aside by the switch's width plus air — reserving the space in OUR control is
   what keeps this correct in every language, where "Back to home" is a
   different length. */

[data-theme="nativa"] .rf-guest-theme {
    top: 29px;
    inset-inline-end: clamp(20px, 4vw, 56px);
    /* --nva-glass is the floating-surface token, declared in BOTH modes, and
       the fallbacks are not ceremony. The first version of this reached for a
       token that does not exist on this page, and a declaration whose value
       contains var() cannot be judged at parse time: the browser KEEPS it and
       throws away the one it replaced, then the substitution fails later. The
       core's own background went with it and the button was left with no fill
       at all over whatever the design had painted. Measured, not read — the
       rule was in the sheet and the computed value was rgba(0,0,0,0). */
    background: var(--nva-glass, var(--color-surface));
    border-color: var(--nva-glass-line, var(--color-border));
    color: var(--nva-ink-soft, var(--color-text-muted));
}

[data-theme="nativa"] .rf-guest-theme:hover {
    color: var(--nva-ink, var(--color-text));
}

/* The room the switch needs, reserved on the HEADER and not on the link.
   Moving `.nv-auth-home` was the first attempt and it came up 6px short at
   390px — something more specific already sets a margin on it, so the value
   silently did less than it said. Padding the header pushes ALL of its
   content, whatever the design puts in there later, and it tracks the same
   gutter clamp so the reservation shrinks with it on a phone. */
[data-theme="nativa"] .nv-auth-head {
    padding-inline-end: calc(clamp(20px, 4vw, 56px) + 52px);
}

/* On a phone that reservation is not enough on its own: the logo and the link
   are both nowrap, so the row simply OVERFLOWS its own padding and the link
   ends up under the switch — measured at 390px, the last 6px of "Back to home"
   were covered. Logo 190 + gap 16 + link 114 = 320 in the 298 the row had.

   What gives is the LOGO, which at 390px was taking half the screen anyway. The
   link keeps its words: it is the only way back out of this page, and dropping
   its label to fit a switch would be trading one control for another. */
@media (max-width: 480px) {
    [data-theme="nativa"] .nv-auth-logo { height: 30px; }
    [data-theme="nativa"] .nv-auth-head { gap: 10px; }
}

/* ── Header ── */

:where([data-theme="nativa"]) .nv-auth-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px clamp(20px, 4vw, 56px);
}

:where([data-theme="nativa"]) .nv-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

:where([data-theme="nativa"]) .nv-auth-logo {
    display: block;
    height: 38px;
    max-width: 190px;
    object-fit: contain;
}

/* The initial the product falls back to when no logo has been uploaded. The ink
   is --color-on-primary, which the product computes for the operator's own
   brand: a hardcoded white here measures 1.1:1 on a yellow or lime panel, which
   is a letter that is in the HTML and not on the screen. */
:where([data-theme="nativa"]) .nv-auth-tile {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--brand);
    color: var(--color-on-primary, #fff);
    font-weight: 800;
    font-size: 17px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 35%, transparent);
}

:where([data-theme="nativa"]) .nv-auth-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

:where([data-theme="nativa"]) .nv-auth-name-t {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--nva-ink);
}

:where([data-theme="nativa"]) .nv-auth-name-s {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .32em;
    color: var(--nva-muted);
}

/* ── Main column ── */

:where([data-theme="nativa"]) .nv-auth-main {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 40px;
}

:where([data-theme="nativa"]) .nv-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nva-badge-ink);
    text-align: center;
}

:where([data-theme="nativa"]) .nv-auth-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
    animation: nvAuthPulse 1.6s ease-in-out infinite;
}

/* ── The card ── */

:where([data-theme="nativa"]) .nv-auth-wrap {
    position: relative;
    width: 100%;
    max-width: 440px;
}

/* The gradient hairline the design fades from the brand colour to nothing. A
   sibling and not a border, because a border cannot hold a gradient; it is
   inset -1px so it reads as the card's own edge rather than a ring around it. */
:where([data-theme="nativa"]) .nv-auth-edge {
    position: absolute;
    inset: -1px;
    border-radius: 29px;
    pointer-events: none;
    background: linear-gradient(160deg,
                color-mix(in srgb, var(--brand) 55%, transparent),
                transparent 38%,
                transparent 70%,
                color-mix(in srgb, var(--nva-ink) 22%, transparent));
}

:where([data-theme="nativa"]) .nv-auth-card {
    position: relative;
    border-radius: 28px;
    padding: 32px 32px 28px;
    background: var(--nva-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--nva-glass-shadow), inset 0 1px 0 var(--nva-glass-line);
}

@media (max-width: 420px) {
    :where([data-theme="nativa"]) .nv-auth-card {
        border-radius: 22px;
        padding: 24px 20px 22px;
    }
    :where([data-theme="nativa"]) .nv-auth-edge { border-radius: 23px; }
}

/* The switch, INSIDE the card on this shell. The rules further up style it as a
   rounded pill for the compatibility path, where it floats above the card on
   open paper; here the design draws it as a square-cornered segmented control
   filling the card's width, so those three properties are restated. */
:where([data-theme="nativa"]) .nv-auth-card .nv-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    margin-bottom: 26px;
    padding: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--nva-ink) 7%, transparent);
    border: 1px solid var(--nva-glass-line);
    box-shadow: none;
}

:where([data-theme="nativa"]) .nv-auth-card .nv-auth-tab {
    padding: 10px;
    border-radius: 10px;
    font-size: 13.5px;
    text-align: center;
}

/* ── Reassurance strip + copyright ── */

/* On this shell the strip is centred under the card rather than left-aligned
   beneath a narrow column. */
:where([data-theme="nativa"]) .nv-auth-main .nv-auth-trust {
    justify-content: center;
    margin-top: 24px;
}

:where([data-theme="nativa"]) .nv-auth-foot {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 14px 20px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--nva-foot);
}

/* ── The compatibility row, with the switch now an @include ── */

/* The row used to ship an empty <span> so `space-between` had two children when
   the switch declined to draw itself. The switch is a shared partial now, so the
   layout answers for that instead of the markup carrying a placeholder node
   whose only job was to hold a gap.

   Bounded to ABOVE the wrap breakpoint, and the bound is the point: this block
   is printed after the 400px query with the same specificity, so written flat
   it silently killed the `center` that query asks for — on a 390px screen the
   header stayed pinned right while the rule that centres it sat in the file
   looking correct. Disjoint conditions, so neither one has to win a race. */
@media (min-width: 401px) {
    :where([data-theme="nativa"]) .nv-auth-top {
        justify-content: flex-end;
    }
}

:where([data-theme="nativa"]) .nv-auth-top .nv-auth-tabs {
    margin-inline-end: auto;
}

/* The two control heights the export states outright: 52px fields and a 54px
   submit. Scoped to THIS shell rather than raised on the `.rf-*` rules above,
   and that is not timidity — those rules also dress the compatibility path,
   where the card is narrower and floats on open paper, and their current heights
   were measured there. One design, two arrangements: each gets the size it was
   drawn at, instead of one number being right in one place and inherited in the
   other.

   Height and not padding, because the field is what the design dimensions — a
   padding that happens to add up to 52 today stops adding up the moment the font
   or the border changes. */
:where([data-theme="nativa"]) .nv-auth-card .rf-input {
    height: 52px;
    padding-block: 0;
}

:where([data-theme="nativa"]) .nv-auth-card .rf-btn-lg {
    min-height: 54px;
    padding-block: 0;
}

/* The active tab INSIDE the card is the design's BRAND pill, not the ink pill
   the rules above draw. Both are right where they are: on the compatibility path
   the switch floats on open paper, where an ink pill is what separates it from
   the page; here it sits in a recessed track inside the card, and the export
   fills that track with the brand and prints the label in the dark.

   The label is --color-on-primary, the tint the PRODUCT computes for whatever
   brand the operator picked, never a hardcoded dark: the design's yellow takes
   near-black, and a panel branded navy would need the opposite. That is the same
   token the brand initial in the header uses, and the reason neither of them can
   become a label that is in the HTML and not on the screen. */
:where([data-theme="nativa"]) .nv-auth-card .nv-auth-tab.is-on {
    background: var(--brand);
    color: var(--color-on-primary, #1b1b1b);
}

/* The submit INSIDE the centred card is the export's brand button in BOTH modes.
   The rules above make it ink in light and brand in dark, which is right for the
   compatibility path — an ink pill is what lifts it off open paper — and is not
   what this design draws: its card has one brand pill at the top (the active
   tab) and one brand button at the bottom, and an ink slab between them reads as
   a different page.

   Written flat, not with :where(), because the rules it has to beat are flat too
   (0,2,0 against this 0,3,0). The ink is --color-on-primary, the tint the PRODUCT
   computes for whatever brand the operator picked — the same token the tab pill
   and the header initial use, and the reason none of the three can become a
   label that is in the HTML and not on the screen.

   The glow is the brand's own, mixed rather than the export's literal amber, so
   a panel branded blue gets a blue lift instead of a yellow halo under a blue
   button. And the hover is defined RELATIVE to that resting colour, never as a
   named surface: a hover painted with a surface token is a coin flip the day
   someone puts the control somewhere else — which is exactly how a Copy button
   ended up invisible on the API page. */
[data-theme="nativa"] .nv-auth-card .rf-btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--color-on-primary, #1b1b1b);
    box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--brand) 55%, transparent);
}

[data-theme="nativa"] .nv-auth-card .rf-btn-primary:hover {
    background: color-mix(in srgb, var(--brand) 86%, #fff);
    border-color: color-mix(in srgb, var(--brand) 86%, #fff);
    box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}