/* ═══════════════════════════════════════════════════════════════════════════
   AUTH SUITE KIT  (.ait-*)   — login / register / forgot / reset
   ---------------------------------------------------------------------------
   Consumed by resources/views/livewire/public/auth/{login,register,
   forgot-password,reset-password}.blade.php and route-gated in
   layouts/auth.blade.php, so the rest of the install doesn't pay for it.

   The page around the form (2026-09-23): §3 is the full-bleed sky
   (partials/auth-sky.blade.php) — the HOME HERO's sky, token for token: white
   (#0E0E11 at night) with its two breathing glows, stars, sparkles and orbit.
   A saturated-blue version shipped first and was rejected as off-theme.
   §4 is the brand side (partials/auth-brand.blade.php). §5–§9, the form
   itself, are the original design.

   Was an inline <style> duplicated into every auth render; now one cacheable
   file. Loads AFTER custom.{ltr,rtl}.css and reads its --aits-* tokens, but
   every token has a literal fallback so the kit still renders standalone.

   CONTRACT NOTES (learned the hard way on the .crs-/.hpx kits):
     • Private --ait-* namespace. Never write bare --aits-*-ink: those have no
       dark twin and render ink-on-ink the moment the user flips theme.
     • Every colour declared here has a `body.theme-dark` twin further down.
     • Links AND buttons get an explicit `color`. Several page kits declare
       `a{color:inherit}` and would otherwise wash this one out.
     • Logical properties only (inset-inline, margin-inline, padding-block…)
       so one file serves LTR and RTL.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
.ait-auth{
    --ait-primary:var(--aits-blue,#3680ED);
    --ait-primary-deep:var(--aits-blue-dark,#2060C0);
    --ait-primary-light:var(--aits-blue-light,#60A4F5);
    --ait-tint:var(--aits-blue-tint,#EAF2FD);
    --ait-line-brand:var(--aits-blue-line,#CFE0FA);
    --ait-grad:linear-gradient(135deg,var(--ait-primary-light) 0%,var(--ait-primary) 52%,var(--ait-primary-deep) 100%);

    --ait-ink:var(--aits-ink,#111111);
    --ait-body:var(--aits-txt,#444444);
    --ait-muted:var(--aits-mut,#666666);
    --ait-faint:var(--aits-faint,#999999);

    --ait-card:var(--aits-card,#FFFFFF);
    --ait-line:var(--aits-line,#ECECEC);
    --ait-line-strong:var(--aits-line-strong,#DADADA);
    --ait-field:var(--aits-surface-2,#FAFAFA);

    /* Semantic hues get private ink tokens — the public --aits-*-ink set has
       no dark twin (see kit contract). */
    --ait-ok:#0CA678;      --ait-ok-ink:#087F5B;  --ait-ok-soft:rgba(12,166,120,.10);  --ait-ok-line:rgba(12,166,120,.26);
    --ait-bad:#E03131;     --ait-bad-ink:#B71C1C; --ait-bad-soft:rgba(224,49,49,.09);  --ait-bad-line:rgba(224,49,49,.24);

    --ait-ring:0 0 0 4px rgba(54,128,237,.16);
    --ait-ring-bad:0 0 0 4px rgba(224,49,49,.15);
    --ait-glow:rgba(54,128,237,.14);
    --ait-sheen:rgba(255,255,255,.32);

    --ait-shadow:0 28px 68px -26px rgba(15,23,42,.20);
    --ait-shadow-sm:0 6px 20px -10px rgba(15,23,42,.14);
    --ait-shadow-brand:0 16px 32px -14px rgba(54,128,237,.62);

    --ait-r:24px;
    --ait-r-md:14px;
    --ait-r-sm:11px;

    --ait-e:var(--ease,cubic-bezier(.16,1,.3,1));
    --ait-t:var(--t,.18s);
    --ait-t-slow:.42s;
}

/* ── 2. Page shell ───────────────────────────────────────────────────────── */

/* The full-bleed backdrop (.page-content positioning, the dark-mode
   container fix) lives with the sky in assets/css/auth-sky.css. */

.ait-auth{
    padding-block:clamp(36px,5vw,72px);
    font-family:var(--font,inherit);

    /* ── The home hero's palette (read off .hpx on the live home page,
       2026-09-23), so this page and that hero are the same sky. Light here;
       the dark values are in §12. Set as tokens, NOT as `color` on .ait-auth:
       the form card declares no colour of its own and would inherit it. */
    --ait-sky-spark:var(--aits-blue,#3680ED);     /* the headline's sparkle — same colour as the sky's */

    --ait-hero-ink:var(--ait-ink);                /* headline, perk titles */
    --ait-hero-sub:#6B7686;                       /* --hpx-ink-3: lead, descriptions */
    --ait-accent-a:var(--aits-blue,#3680ED);      /* the home title's accent ramp */
    --ait-accent-b:var(--aits-blue-dark,#2060C0);
    --ait-accent-c:#1B5BB5;                       /* --hpx-brand-ink */

    --ait-glass-bg:rgba(255,255,255,.86);         /* the home badge's glass */
    --ait-badge-glow:rgba(54,128,237,.28);        /* --hpx-brand-glow */
    --ait-hairline-a:#CFE0FA;                     /* --hpx-brand-line */
    --ait-hairline-b:#E7ECF3;                     /* --hpx-line */
    --ait-hairline-c:#BAE6FD;                     /* --hpx-t-violet-line */
    --ait-chip-bg:#EAF2FD;
    --ait-chip-line:#CFE0FA;
    --ait-chip-ink:#1B5BB5;

    --ait-perk-bg:#FFFFFF;                        /* --hpx-card */
    --ait-perk-line:#E7ECF3;
    --ait-perk-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 28px -18px rgba(16,24,40,.18);
    --ait-perk-hover-shadow:0 2px 6px rgba(16,24,40,.05),0 22px 44px -20px rgba(54,128,237,.35);
    --ait-perk-edge:linear-gradient(135deg,rgba(54,128,237,.75),rgba(54,128,237,.08) 40%,rgba(54,128,237,.08) 60%,rgba(56,189,248,.7));
    --ait-sweep:rgba(234,242,253,.95);

    /* The house sparkle — four points with CONCAVE sides, the same path the
       home hero masks (homepage.css §HERO-ORB-SPARK). Not a plus sign. */
    --ait-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c1.6 6.2 3.4 8 9.6 9.6C15.4 13.6 13.6 15.4 12 21.6 10.4 15.4 8.6 13.6 2.4 12 8.6 10.4 10.4 8.6 12 2.4z'/%3E%3C/svg%3E");
    --ait-swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 15C48 5 128 3 197 9' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Desktop: the sky fills the first screen under the header (124px with the
   announcement bar, plus the container's 2×32px) so the footer never peeks
   into it, and the composition centres vertically inside it. */
@media (min-width:992px){
    .ait-auth{
        display:flex;
        flex-direction:column;
        justify-content:center;
        min-height:calc(100vh - 188px);
        min-height:calc(100svh - 188px);
    }
}

.ait-auth__inner{
    width:100%;              /* a column-flex child with auto margins would shrink-wrap */
    max-width:1200px;
    margin-inline:auto;
}

/* ── 3. The sky ───────────────────────────────────────────────────────────
   Moved to assets/css/auth-sky.css (2026-09-23) so /verify-email, which does
   not load this kit, can carry the same backdrop. partials/auth-sky.blade.php
   is the markup; both are route-gated in layouts/auth.blade.php. */

/* ── 4. Brand side: hero + perks ─────────────────────────────────────────── */

/* Desktop: hero over perks on the left, the card spanning both rows on the
   right. The hero sinks to the bottom of its row and the perks rise to the
   top of theirs, so the pair stays together and centres against a taller
   card — the extra height lands equally in both rows. */
.ait-auth__grid{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    grid-template-areas:
        "hero  card"
        "perks card";
    column-gap:clamp(40px,5.5vw,96px);
    row-gap:30px;
}
.ait-hero{
    grid-area:hero;
    align-self:end;
    max-width:560px;
    color:var(--ait-hero-ink);
}
.ait-perks{
    grid-area:perks;
    align-self:start;
    max-width:540px;
}
.ait-card-wrap{
    grid-area:card;
    align-self:center;
    position:relative;
}

/* Badge — the home hero badge: a glass pill on a gradient hairline (::before,
   always drawn), the mark in its own tinted chip. ::after is the light sweep
   that crosses on hover. */
.ait-hero__badge{
    position:relative;
    isolation:isolate;
    display:inline-flex;
    align-items:center;
    gap:9px;
    max-width:100%;
    margin-block-end:22px;
    padding-block:7px;
    padding-inline:7px 17px;
    border-radius:999px;
    background-color:var(--ait-glass-bg);
    background-image:linear-gradient(135deg,rgba(255,255,255,.5) 0%,transparent 52%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(16,24,40,.04),0 10px 24px -14px var(--ait-badge-glow);
    -webkit-backdrop-filter:blur(20px);
            backdrop-filter:blur(20px);
    color:var(--ait-hero-ink);
    font-size:13.5px;
    font-weight:640;
    line-height:1.3;
    letter-spacing:-.004em;
    overflow:hidden;
    transition:transform var(--ait-t-slow) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e);
}
.ait-hero__badge::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,var(--ait-hairline-a) 0%,var(--ait-hairline-b) 42%,var(--ait-hairline-b) 58%,var(--ait-hairline-c) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
}
.ait-hero__badge::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(110deg,transparent 30%,var(--ait-sweep) 50%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .8s var(--ait-e);
}
.ait-hero__badge:hover{
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 4px rgba(16,24,40,.05),0 16px 30px -14px var(--ait-badge-glow);
}
.ait-hero__badge:hover::after{ transform:translateX(120%); }

.ait-hero__badge-ico{
    display:inline-grid;
    place-items:center;
    flex:0 0 auto;
    width:24px;
    height:24px;
    border-radius:8px;
    background-color:var(--ait-chip-bg);
    box-shadow:inset 0 0 0 1px var(--ait-chip-line);
    color:var(--ait-chip-ink);
    transition:transform var(--ait-t-slow) var(--ait-e);
}
.ait-hero__badge-ico svg{
    width:15px;
    height:15px;
    animation:ait-badge-twinkle 3.2s ease-in-out infinite;
}
@keyframes ait-badge-twinkle{
    0%,100%{ opacity:1;   transform:scale(1); }
    50%    { opacity:.55; transform:scale(.85); }
}
.ait-hero__badge:hover .ait-hero__badge-ico{ transform:rotate(-12deg) scale(1.08); }
.ait-hero__badge-text{ min-width:0; }

/* Three-class chain on purpose. custom.ltr.css ships
   `body:not(.admin-shell):not(.theme-dark) h1,h2 {font-weight:700;
   letter-spacing:-.02em; line-height:1.2}` (0,2,2) plus a both-themes
   `body:not(.admin-shell) h1,h2,h3 {letter-spacing:-.015em}` (0,1,2).
   A bare class (0,1,0) loses to both and the headline silently reverts to
   1.2 leading. Same reason for the other hero text below. */
.ait-auth .ait-hero .ait-hero__title{
    margin:0 0 20px;
    font-size:clamp(40px,4.4vw,62px);   /* the home display size */
    font-weight:800;
    line-height:1.06;
    letter-spacing:-.032em;
    color:var(--ait-hero-ink);
    text-wrap:balance;
}
.ait-hero__title-lead{ display:block; }

/* The accent word: the home headline's gradient (brand → 600 → ink), a
   hand-drawn swoosh that draws in under it (::before) and a twinkling house
   sparkle at its shoulder (::after). A solid `color` comes first so an engine
   without background-clip:text still shows readable brand-blue type. */
.ait-hero__accent{
    position:relative;
    display:inline-block;
    padding-inline-end:.06em;
    color:var(--ait-accent-a);
    background:linear-gradient(100deg,var(--ait-accent-a) 6%,var(--ait-accent-b) 58%,var(--ait-accent-c) 100%);
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .ait-hero__accent{ -webkit-text-fill-color:currentColor; }
}
.ait-hero__accent::before{
    content:"";
    position:absolute;
    inset-inline:.02em .1em;
    inset-block-end:-.16em;
    height:.2em;
    background:linear-gradient(90deg,var(--ait-accent-a),var(--ait-accent-c));
    -webkit-mask:var(--ait-swoosh) center/100% 100% no-repeat;
            mask:var(--ait-swoosh) center/100% 100% no-repeat;
    opacity:.45;
    clip-path:inset(0 100% 0 0);
    animation:ait-swoosh .9s var(--ait-e) .55s forwards;
    pointer-events:none;
}
@keyframes ait-swoosh{ to{ clip-path:inset(0 0 0 0); } }
.ait-hero__accent::after{
    content:"";
    position:absolute;
    inset-block-start:-.06em;
    inset-inline-end:-.4em;
    width:.32em;
    aspect-ratio:1;
    background:var(--ait-sky-spark);
    -webkit-mask:var(--ait-star) center/contain no-repeat;
            mask:var(--ait-star) center/contain no-repeat;
    animation:ait-twinkle 3.8s ease-in-out infinite;
    pointer-events:none;
}
@keyframes ait-twinkle{
    0%,100%{ opacity:.5; transform:scale(.82) rotate(0deg); }
    50%    { opacity:1;  transform:scale(1.08) rotate(18deg); }
}

.ait-auth .ait-hero .ait-hero__lead{
    max-width:470px;
    margin:0;
    font-size:clamp(15.5px,1.25vw,17.5px);
    line-height:1.65;
    color:var(--ait-hero-sub);
    text-wrap:pretty;
}
@media (max-width:991.98px){
    .ait-auth .ait-hero .ait-hero__lead{ text-wrap:balance; }   /* centred: even lines */
}

/* Perks — cards on the page. ::before is a brand gradient hairline that
   lights up on hover, ::after a light sweep that crosses; the icon tile turns
   brand-solid and tilts. */
.ait-auth .ait-perks__list{
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}
.ait-perk{
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    gap:16px;
    padding-block:14px;
    padding-inline:14px 18px;
    border-radius:18px;
    background:var(--ait-perk-bg);
    box-shadow:inset 0 0 0 1px var(--ait-perk-line),var(--ait-perk-shadow);
    overflow:hidden;
    transition:transform var(--ait-t-slow) var(--ait-e),
               box-shadow var(--ait-t-slow) var(--ait-e);
}
.ait-perk::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:var(--ait-perk-edge);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:0;
    transition:opacity var(--ait-t-slow) var(--ait-e);
    pointer-events:none;
}
.ait-perk::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(105deg,transparent 20%,var(--ait-sweep) 50%,transparent 80%);
    transform:translateX(-110%);
    transition:transform .9s var(--ait-e);
}
.ait-perk:hover{
    transform:translateY(-3px);
    box-shadow:inset 0 0 0 1px transparent,var(--ait-perk-hover-shadow);
}
.ait-perk:hover::before{ opacity:1; }
.ait-perk:hover::after{ transform:translateX(110%); }

.ait-perk__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:14px;
    background:var(--ait-chip-bg);
    box-shadow:inset 0 0 0 1px var(--ait-chip-line);
    color:var(--ait-primary);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1),
               background var(--ait-t) var(--ait-e),
               color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t-slow) var(--ait-e);
}
.ait-perk__icon svg{ width:22px; height:22px; }
.ait-perk:hover .ait-perk__icon{
    transform:rotate(-8deg) scale(1.08);
    background:var(--ait-grad);
    color:#fff;
    box-shadow:0 10px 20px -10px rgba(54,128,237,.72);
}

.ait-perk__body{ display:block; min-width:0; }
.ait-auth .ait-perk .ait-perk__title{
    display:block;
    margin-block-end:3px;
    font-size:15.5px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.01em;
    color:var(--ait-hero-ink);
}
.ait-auth .ait-perk .ait-perk__desc{
    display:block;
    font-size:13.75px;
    line-height:1.5;
    color:var(--ait-hero-sub);
}

/* Reassurance strip under the perks. */
.ait-auth .ait-trust{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 20px;
    margin-block-start:22px;
    padding-block-start:18px;
    border-block-start:1px solid var(--ait-perk-line);
    font-size:13px;
    color:var(--ait-hero-sub);
}
.ait-auth .ait-trust__item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}
.ait-auth .ait-trust__item svg{ width:16px; height:16px; flex:0 0 auto; color:var(--ait-ok); }
.ait-auth .ait-trust__link{
    position:relative;
    color:var(--ait-primary);
    font-weight:700;
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
/* A resting stub of underline says "link"; hover draws it full width. */
.ait-auth .ait-trust__link::after{
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-end:-3px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
    opacity:.55;
    transform:scaleX(.35);
    transition:transform var(--ait-t-slow) var(--ait-e),opacity var(--ait-t) var(--ait-e);
}
.ait-auth .ait-trust__link:hover{ color:var(--ait-primary-deep); text-decoration:none; }
.ait-auth .ait-trust__link:hover::after{ opacity:1; transform:scaleX(1); }
.ait-auth .ait-trust__link:focus-visible{
    outline:2px solid var(--ait-primary);
    outline-offset:4px;
    border-radius:4px;
}

/* ── 5. Form card ────────────────────────────────────────────────────────── */
.ait-card-wrap{ display:flex; justify-content:center; }

.ait-card{
    position:relative;
    isolation:isolate;
    width:100%;
    max-width:468px;
    padding:clamp(26px,3vw,40px);
    border:1px solid var(--ait-line);
    border-radius:var(--ait-r);
    background:var(--ait-card);
    box-shadow:var(--ait-shadow);
    transition:box-shadow var(--ait-t-slow) var(--ait-e),
               transform var(--ait-t-slow) var(--ait-e);
}
/* Gradient hairline that brightens while the user is filling the form. */
.ait-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(150deg,rgba(96,164,245,.65),rgba(96,164,245,0) 34%,rgba(96,164,245,0) 64%,rgba(54,128,237,.45));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:.5;
    transition:opacity var(--ait-t-slow) var(--ait-e);
    pointer-events:none;
}
.ait-card:hover{ box-shadow:0 34px 78px -28px rgba(15,23,42,.26); }
.ait-card:hover::before,
.ait-card:focus-within::before{ opacity:1; }

.ait-card__head{
    text-align:center;
    margin-block-end:24px;
}

.ait-card__icon{
    position:relative;
    display:grid;
    place-items:center;
    width:58px; height:58px;
    margin:0 auto 16px;
    border-radius:18px;
    color:#fff;
    background:var(--ait-grad);
    box-shadow:0 12px 24px -12px rgba(54,128,237,.55);
}
.ait-card__icon svg{ width:26px; height:26px; }

.ait-auth .ait-card .ait-card__title{
    margin:0 0 7px;
    font-size:clamp(21px,2.2vw,25px);
    font-weight:800;
    letter-spacing:-.022em;
    line-height:1.2;
    color:var(--ait-ink);
}
.ait-card__subtitle{
    margin:0 auto;
    max-width:34ch;
    font-size:14px;
    line-height:1.55;
    color:var(--ait-muted);
}

/* ── 6. Fields ───────────────────────────────────────────────────────────── */
.ait-field{ margin-block-end:17px; }

.ait-label{
    display:block;
    margin-block-end:8px;
    font-size:13.5px;
    font-weight:650;
    letter-spacing:-.005em;
    color:var(--ait-ink);
}

.ait-input{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding-inline:15px;
    border:1.5px solid var(--ait-line);
    border-radius:var(--ait-r-md);
    background:var(--ait-field);
    transition:border-color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e),
               background var(--ait-t) var(--ait-e);
}
/* Accent that wipes across the bottom edge as the field takes focus. */
.ait-input::after{
    content:"";
    position:absolute;
    inset-inline:12px;
    inset-block-end:-1.5px;
    height:2px;
    border-radius:2px;
    background:var(--ait-grad);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--ait-t-slow) var(--ait-e);
}
.ait-input:hover{ border-color:var(--ait-line-strong); }
.ait-input:focus-within{
    border-color:var(--ait-primary);
    background:var(--ait-card);
    box-shadow:var(--ait-ring);
}
.ait-input:focus-within::after{ transform:scaleX(1); }

.ait-input__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    color:var(--ait-faint);
    transition:color var(--ait-t) var(--ait-e), transform var(--ait-t) var(--ait-e);
}
.ait-input__icon svg{ width:19px; height:19px; }
.ait-input:focus-within .ait-input__icon{ color:var(--ait-primary); transform:scale(1.06); }

.ait-input input{
    flex:1 1 auto;
    min-width:0;
    height:48px;
    padding:0;
    border:0;
    outline:none;
    box-shadow:none;
    background:transparent;
    font-size:15px;
    font-family:inherit;
    color:var(--ait-ink);
}
.ait-input input::placeholder{ color:var(--ait-faint); }
.ait-input input:disabled{ color:var(--ait-muted); cursor:not-allowed; }
.ait-input input:-webkit-autofill{
    -webkit-text-fill-color:var(--ait-ink);
    transition:background-color 9999s ease-out;
}

.ait-input__toggle{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    padding:6px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--ait-faint);
    cursor:pointer;
    transition:color var(--ait-t) var(--ait-e), background var(--ait-t) var(--ait-e);
}
.ait-input__toggle:hover{ color:var(--ait-primary); background:var(--ait-tint); }
.ait-input__toggle:focus-visible{ outline:none; box-shadow:var(--ait-ring); color:var(--ait-primary); }
.ait-input__toggle svg{ width:19px; height:19px; }
.ait-input__toggle .ait-eye-off{ display:none; }
.ait-input__toggle[data-shown="1"] .ait-eye-on{ display:none; }
.ait-input__toggle[data-shown="1"] .ait-eye-off{ display:block; }

.ait-input.is-invalid{ border-color:var(--ait-bad); background:var(--ait-bad-soft); }
.ait-input.is-invalid .ait-input__icon{ color:var(--ait-bad); }
.ait-input.is-invalid:focus-within{ box-shadow:var(--ait-ring-bad); }
.ait-input.is-invalid::after{ background:var(--ait-bad); }

/* Password rule checklist */
.ait-rules{
    display:grid;
    gap:8px;
    /* 1px/2px of padding in place of the old 2px side margin: overflow is
       clipped for the fold below, and a met rule scales its tick to 1.12. */
    margin:12px 0 0;
    padding:1px 2px;
    max-height:160px;
    overflow:hidden;
    opacity:1;
    transition:max-height .34s var(--ait-e),
               opacity .26s var(--ait-e),
               margin .34s var(--ait-e),
               padding .34s var(--ait-e);
}
/* Folded away until the person starts typing a password (2026-09-23,
   user request). CSS-only on purpose: `:placeholder-shown` is true exactly
   while the field is empty, so there is no JS state for Livewire's DOM morph
   to strip on a round trip, and a failed submit (which keeps the typed value)
   keeps the list open. It relies on the field having a placeholder; with
   none it simply stays open, as before. Not visibility:hidden, so the rules
   stay in the accessibility tree (the input points at them with
   aria-describedby). `data-filled="1"` (set by auth-scripts on input) can
   only force it OPEN — a backstop for fills that Chrome's :has() invalidation
   misses; nothing but an empty field folds it. */
.ait-input:has(input:placeholder-shown) + .ait-rules:not([data-filled="1"]){
    max-height:0;
    margin-block-start:0;
    padding-block:0;
    opacity:0;
}
.ait-rule{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12.8px;
    color:var(--ait-muted);
    transition:color var(--ait-t) var(--ait-e);
}
.ait-rule__tick{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:17px; height:17px;
    border-radius:50%;
    background:var(--ait-line);
    color:var(--ait-card);
    transition:background var(--ait-t) var(--ait-e),
               transform var(--ait-t) var(--ait-e),
               color var(--ait-t) var(--ait-e);
}
.ait-rule__tick svg{ width:10px; height:10px; }
.ait-rule[data-ok="1"]{ color:var(--ait-ok-ink); font-weight:650; }
.ait-rule[data-ok="1"] .ait-rule__tick{
    background:var(--ait-ok);
    color:#fff;
    transform:scale(1.12);
}

/* ── 7. Utility rows ─────────────────────────────────────────────────────── */
.ait-row-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin:6px 2px 20px;
}

.ait-check{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin:0;
    font-size:13.5px;
    color:var(--ait-body);
    cursor:pointer;
    user-select:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-check:hover{ color:var(--ait-ink); }
/* Native input restyled in place — no extra markup, so nothing can end up
   visually hidden behind a decorative span. */
.ait-check input{
    -webkit-appearance:none;
            appearance:none;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:18px; height:18px;
    margin:0;
    border:1.5px solid var(--ait-line-strong);
    border-radius:6px;
    background:var(--ait-card);
    cursor:pointer;
    transition:background var(--ait-t) var(--ait-e),
               border-color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e);
}
.ait-check input::before{
    content:"";
    width:10px; height:10px;
    background:#fff;
    clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
    transform:scale(0);
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-check input:hover{ border-color:var(--ait-primary); }
.ait-check input:focus-visible{ outline:none; box-shadow:var(--ait-ring); }
.ait-check input:checked{ background:var(--ait-grad); border-color:transparent; }
.ait-check input:checked::before{ transform:scale(1); }

/* Opt-in line on /register (newsletter). Its label runs to two lines, so the
   box pins to the first line instead of centring on the block. */
.ait-check--consent{
    display:flex;
    align-items:flex-start;
    margin-block-end:18px;
    line-height:1.45;
}
.ait-check--consent input{ margin-block-start:1px; }

.ait-auth .ait-link{
    position:relative;
    font-size:13.5px;
    font-weight:650;
    color:var(--ait-primary);
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-auth .ait-link::after{
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-end:-3px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:center right;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-auth .ait-link:hover{ color:var(--ait-primary-deep); text-decoration:none; }
.ait-auth .ait-link:hover::after{ transform:scaleX(1); transform-origin:center left; }
.ait-auth .ait-link:focus-visible{ outline:none; box-shadow:var(--ait-ring); border-radius:4px; }

/* ── 8. Buttons ──────────────────────────────────────────────────────────── */
.ait-auth .ait-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:53px;
    padding-inline:20px;
    border:0;
    border-radius:var(--ait-r-md);
    overflow:hidden;
    background:var(--ait-grad);
    color:#fff;
    font-family:inherit;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:-.01em;
    text-decoration:none;
    cursor:pointer;
    box-shadow:var(--ait-shadow-brand);
    transition:transform var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e),
               filter var(--ait-t) var(--ait-e);
}
/* Specular sweep on hover. */
.ait-auth .ait-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,transparent 22%,var(--ait-sheen) 48%,transparent 72%);
    transform:translateX(-125%);
    transition:transform .72s var(--ait-e);
}
.ait-auth .ait-btn > *{ position:relative; z-index:1; }
.ait-auth .ait-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
    box-shadow:0 22px 40px -14px rgba(54,128,237,.72);
    color:#fff;
}
.ait-auth .ait-btn:hover::before{ transform:translateX(125%); }
.ait-auth .ait-btn:active{ transform:translateY(0); box-shadow:var(--ait-shadow-brand); }
.ait-auth .ait-btn:focus-visible{ outline:none; box-shadow:var(--ait-ring),var(--ait-shadow-brand); }
.ait-auth .ait-btn:disabled{ opacity:.72; cursor:progress; transform:none; }
.ait-auth .ait-btn:disabled::before{ transform:translateX(-125%); }
.ait-auth .ait-btn .spinner-border{ width:1.05rem; height:1.05rem; border-width:.15em; }

/* Divider */
.ait-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin-block:22px;
    font-size:12.25px;
    font-weight:650;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ait-faint);
}
.ait-divider::before,
.ait-divider::after{
    content:"";
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--ait-line),transparent);
}

/* Social buttons — each provider tints its own hover wash. */
.ait-social{ display:grid; gap:10px; }

.ait-auth .ait-social__btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    width:100%;
    min-height:51px;
    padding-inline:16px;
    border:1.5px solid var(--ait-line);
    border-radius:var(--ait-r-md);
    overflow:hidden;
    background:var(--ait-card);
    color:var(--ait-ink);
    font-size:14.5px;
    font-weight:650;
    text-decoration:none;
    transition:transform var(--ait-t) var(--ait-e),
               border-color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e),
               color var(--ait-t) var(--ait-e);
    --ait-brand-wash:rgba(54,128,237,.08);
    --ait-brand-line:var(--ait-line-brand);
}
.ait-auth .ait-social__btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--ait-brand-wash);
    opacity:0;
    transition:opacity var(--ait-t) var(--ait-e);
}
.ait-auth .ait-social__btn > *{ position:relative; z-index:1; }
.ait-auth .ait-social__btn svg,
.ait-auth .ait-social__btn img{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:20px; height:20px;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-auth .ait-social__btn:hover{
    transform:translateY(-2px);
    border-color:var(--ait-brand-line);
    box-shadow:0 14px 26px -14px rgba(15,23,42,.30);
    color:var(--ait-ink);
    text-decoration:none;
}
.ait-auth .ait-social__btn:hover::before{ opacity:1; }
.ait-auth .ait-social__btn:hover svg,
.ait-auth .ait-social__btn:hover img{ transform:scale(1.12); }
.ait-auth .ait-social__btn:active{ transform:translateY(0); }
.ait-auth .ait-social__btn:focus-visible{ outline:none; box-shadow:var(--ait-ring); }

.ait-auth .ait-social__btn.is-google  { --ait-brand-wash:rgba(66,133,244,.09);  --ait-brand-line:rgba(66,133,244,.42); }
.ait-auth .ait-social__btn.is-facebook{ --ait-brand-wash:rgba(24,119,242,.09);  --ait-brand-line:rgba(24,119,242,.42); }
.ait-auth .ait-social__btn.is-github  { --ait-brand-wash:rgba(24,23,23,.07);    --ait-brand-line:rgba(24,23,23,.34); }
.ait-auth .ait-social__btn.is-apple   { --ait-brand-wash:rgba(0,0,0,.06);       --ait-brand-line:rgba(0,0,0,.32); }
/* Microsoft's mark is four colours, so neither one can carry the wash. The
   blue square (#00A4EF) is the closest thing it has to a primary. */
.ait-auth .ait-social__btn.is-microsoft{ --ait-brand-wash:rgba(0,164,239,.09);  --ait-brand-line:rgba(0,164,239,.42); }

/* When only two providers are enabled they read better side by side. */
@media (min-width:420px){
    .ait-social.is-pair{ grid-template-columns:1fr 1fr; }
    .ait-social.is-pair .ait-social__btn{ padding-inline:10px; font-size:14px; }
}

/* ── 9. Notes, alerts, foot ──────────────────────────────────────────────── */
.ait-note{
    display:flex;
    align-items:center;
    gap:13px;
    margin-block-start:20px;
    padding:14px 16px;
    border:1px solid var(--ait-line);
    border-radius:var(--ait-r-md);
    background:var(--ait-field);
    transition:border-color var(--ait-t) var(--ait-e), background var(--ait-t) var(--ait-e);
}
.ait-note:hover{ border-color:var(--ait-line-brand); background:var(--ait-tint); }
.ait-note__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:40px; height:40px;
    border-radius:12px;
    background:var(--ait-tint);
    color:var(--ait-primary);
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-note:hover .ait-note__icon{ transform:translateX(-2px) scale(1.05); }
.ait-note__icon svg{ width:19px; height:19px; }
.ait-note__title{ margin:0 0 2px; font-size:13.5px; font-weight:700; color:var(--ait-ink); }
.ait-note__text{ margin:0; font-size:13px; color:var(--ait-body); }
.ait-auth .ait-note__text a{
    color:var(--ait-primary);
    font-weight:650;
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-auth .ait-note__text a:hover{ color:var(--ait-primary-deep); }

/* Re-skin the Tabler/Bootstrap alerts the shared x-auth-* components emit. */
.ait-auth .alert{
    margin-block-end:17px;
    padding:13px 15px;
    border:1px solid transparent;
    border-radius:var(--ait-r-sm);
    font-size:13.5px;
    line-height:1.5;
}
.ait-auth .alert-success{
    background:var(--ait-ok-soft);
    border-color:var(--ait-ok-line);
    color:var(--ait-ok-ink);
}
.ait-auth .alert-danger{
    background:var(--ait-bad-soft);
    border-color:var(--ait-bad-line);
    color:var(--ait-bad-ink);
}
.ait-auth .alert .font-medium{ margin-block-end:5px; font-weight:700; }
.ait-auth .alert ul{ margin:0; padding-inline-start:18px; }
.ait-auth .alert li + li{ margin-block-start:3px; }

/* Every captcha vendor draws a fixed-width iframe (reCAPTCHA 304px,
   Turnstile/hCaptcha 300px) — centre it under the fields and stop it forcing a
   horizontal scrollbar on the narrowest phones. Covers all three widget
   classes App\Support\Captcha can emit: this used to target .g-recaptcha
   only, so the live Turnstile widget sat flush left. */
.ait-auth .g-recaptcha,
.ait-auth .cf-turnstile,
.ait-auth .h-captcha{
    display:flex;
    justify-content:center;
    width:100%;
}
@media (max-width:359.98px){
    .ait-auth .g-recaptcha,
    .ait-auth .cf-turnstile,
    .ait-auth .h-captcha{ transform:scale(.88); transform-origin:top center; }
}

.ait-card__foot{
    margin-block-start:24px;
    padding-block-start:20px;
    border-block-start:1px solid var(--ait-line);
    text-align:center;
    font-size:14px;
    color:var(--ait-body);
}
.ait-auth .ait-card__foot a{
    position:relative;
    margin-inline-start:4px;
    color:var(--ait-primary);
    font-weight:700;
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-auth .ait-card__foot a::after{
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-end:-2px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:center right;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-auth .ait-card__foot a:hover{ color:var(--ait-primary-deep); text-decoration:none; }
.ait-auth .ait-card__foot a:hover::after{ transform:scaleX(1); transform-origin:center left; }

/* ── 10. Entrance motion ─────────────────────────────────────────────────── */
.ait-hero,
.ait-card{ animation:ait-rise .62s var(--ait-e) both; }
.ait-card{ animation-delay:.09s; }
/* `backwards`, not `both`, on anything that lifts on hover: a filled
   `to{transform:none}` would pin the element and swallow its :hover transform. */
.ait-perk{
    animation:ait-rise .6s var(--ait-e) backwards;
    animation-delay:calc(.2s + var(--ait-i,0) * .08s);
}
.ait-auth .ait-trust{ animation:ait-rise .6s var(--ait-e) .46s backwards; }
@keyframes ait-rise{
    from{ opacity:0; transform:translateY(16px); }
    to  { opacity:1; transform:none; }
}

/* ── 11. Responsive ──────────────────────────────────────────────────────── */

/* Small desktop / large tablet — tighten the gutter before stacking. */
@media (max-width:1199.98px){
    .ait-auth__grid{ column-gap:clamp(28px,4vw,48px); }
}

/* Tablet portrait — one column in reading order: hero, FORM, perks. */
@media (max-width:991.98px){
    .ait-auth__grid{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:
            "hero"
            "card"
            "perks";
        row-gap:30px;
        justify-items:center;
    }
    .ait-hero{
        align-self:auto;
        max-width:640px;
        text-align:center;
    }
    .ait-auth .ait-hero .ait-hero__lead{ margin-inline:auto; }
    .ait-perks{
        align-self:auto;
        width:100%;
        max-width:760px;
    }
    .ait-auth .ait-perks__list{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:14px;
    }
    .ait-perk{
        flex-direction:column;
        align-items:center;
        gap:12px;
        padding:20px 16px;
        text-align:center;
    }
    .ait-auth .ait-trust{ justify-content:center; }

    .ait-card-wrap{ width:100%; }
    .ait-card{ max-width:520px; }
}

/* Large phone / small tablet — perks back to one readable column. */
@media (max-width:767.98px){
    .ait-auth .ait-hero .ait-hero__title{ font-size:clamp(32px,7.4vw,44px); }
    .ait-auth .ait-perks__list{
        grid-template-columns:minmax(0,1fr);
        max-width:520px;
        margin-inline:auto;
        gap:10px;
    }
    .ait-perk{
        flex-direction:row;
        align-items:center;
        gap:14px;
        padding-block:13px;
        padding-inline:13px 16px;
        text-align:start;
    }
}

/* Phone */
@media (max-width:575.98px){
    .ait-auth{ padding-block:24px 32px; }
    .ait-auth__grid{ row-gap:24px; }
    .ait-hero__badge{
        margin-block-end:16px;
        padding-block:5px;
        padding-inline:6px 12px;
        font-size:12.5px;
    }
    .ait-hero__badge-ico{ width:22px; height:22px; border-radius:7px; }
    .ait-hero__badge-ico svg{ width:13px; height:13px; }
    .ait-auth .ait-hero .ait-hero__title{ margin-block-end:14px; font-size:clamp(30px,9vw,38px); }
    .ait-auth .ait-hero .ait-hero__lead{ font-size:15px; }
    .ait-perk__icon{ width:42px; height:42px; border-radius:13px; }
    .ait-perk__icon svg{ width:20px; height:20px; }
    .ait-auth .ait-trust{ gap:8px 14px; font-size:12.5px; }

    .ait-card{
        padding:24px 19px;
        border-radius:20px;
        box-shadow:0 18px 44px -22px rgba(15,23,42,.22);
    }
    .ait-card__icon{ width:52px; height:52px; border-radius:16px; }
    .ait-card__icon svg{ width:24px; height:24px; }
    .ait-card__title{ font-size:20.5px; }
    .ait-card__subtitle{ font-size:13.5px; }
    .ait-input{ min-height:50px; }
    .ait-input input{ height:46px; font-size:16px; } /* 16px = no iOS zoom on focus */
    .ait-auth .ait-btn{ min-height:51px; font-size:15px; }
    .ait-auth .ait-social__btn{ min-height:49px; font-size:14px; }
    .ait-row-between{ margin-block-end:18px; }
}

@media (max-width:379.98px){
    .ait-card{ padding:20px 15px; }
    .ait-auth .ait-hero .ait-hero__title{ font-size:28px; }
    .ait-auth .ait-social__btn{ gap:8px; font-size:13.25px; }
}

/* Coarse pointers never hover — retire the lifts and sweeps so a tap never
   leaves a stuck transform, and give the hit targets a little more room. */
@media (hover:none){
    .ait-auth .ait-btn:hover,
    .ait-auth .ait-social__btn:hover,
    .ait-perk:hover,
    .ait-hero__badge:hover,
    .ait-perk:hover .ait-perk__icon,
    .ait-hero__badge:hover .ait-hero__badge-ico{ transform:none; }
    .ait-auth .ait-btn:hover::before{ transform:translateX(-125%); }
    .ait-perk:hover::after{ transform:translateX(-110%); }
    .ait-hero__badge:hover::after{ transform:translateX(-120%); }
    .ait-auth .ait-btn:active{ filter:brightness(.96); }
    .ait-auth .ait-social__btn:active{ background:var(--ait-field); }
}

/* ── 12. Dark twins ──────────────────────────────────────────────────────── */
body.theme-dark .ait-auth{
    --ait-field:var(--aits-surface-3,var(--dk-surface-3,#1D1D22));
    --ait-faint:var(--dk-text-4,#71767F);
    --ait-ring:0 0 0 4px rgba(96,164,245,.26);
    --ait-ring-bad:0 0 0 4px rgba(224,49,49,.24);
    --ait-glow:rgba(54,128,237,.20);
    --ait-sheen:rgba(255,255,255,.20);

    /* Dark ink twins — the light-mode values are unreadable on #17171A. */
    --ait-ok-ink:#6BE3B8;   --ait-ok-soft:rgba(12,166,120,.14);  --ait-ok-line:rgba(107,227,184,.26);
    --ait-bad-ink:#FF8A8A;  --ait-bad-soft:rgba(224,49,49,.14);  --ait-bad-line:rgba(255,138,138,.26);

    --ait-shadow:0 28px 68px -26px rgba(0,0,0,.72);
    --ait-shadow-sm:0 8px 24px rgba(0,0,0,.5);
    --ait-shadow-brand:0 16px 32px -16px rgba(0,0,0,.7);

    /* The home hero at night (.hpx under body.theme-dark, read 2026-09-23). */
    --ait-sky-spark:#DCEAFF;

    --ait-hero-ink:#F4F5F7;
    --ait-hero-sub:#9AA0AB;
    --ait-accent-a:#60A4F5;
    --ait-accent-b:#4A8FE8;
    --ait-accent-c:#8CBEFA;

    --ait-glass-bg:rgba(23,23,27,.78);
    --ait-badge-glow:rgba(96,164,245,.32);
    --ait-hairline-a:rgba(96,164,245,.28);
    --ait-hairline-b:rgba(255,255,255,.10);
    --ait-hairline-c:rgba(56,189,248,.32);
    --ait-chip-bg:rgba(54,128,237,.16);
    --ait-chip-line:rgba(96,164,245,.28);
    --ait-chip-ink:#8CBEFA;

    --ait-perk-bg:var(--aits-card,var(--dk-surface-2,#17171B));
    --ait-perk-line:rgba(255,255,255,.10);
    --ait-perk-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -18px rgba(0,0,0,.7);
    --ait-perk-hover-shadow:0 2px 6px rgba(0,0,0,.45),0 22px 44px -20px rgba(0,0,0,.8);
    --ait-perk-edge:linear-gradient(135deg,rgba(96,164,245,.7),rgba(96,164,245,.08) 40%,rgba(96,164,245,.08) 60%,rgba(125,211,252,.6));
    --ait-sweep:rgba(255,255,255,.06);
}
/* The home badge's night finish: a fainter sheen and a shadow instead of a glow. */
body.theme-dark .ait-hero__badge{
    background-image:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 52%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.4),0 12px 26px -14px rgba(0,0,0,.7);
}
body.theme-dark .ait-hero__badge:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 4px rgba(0,0,0,.45),0 16px 30px -14px rgba(0,0,0,.75);
}
body.theme-dark .ait-perk__icon{ color:var(--ait-chip-ink); }
body.theme-dark .ait-perk:hover .ait-perk__icon{ color:#fff; box-shadow:0 10px 20px -10px rgba(0,0,0,.7); }
body.theme-dark .ait-trust__item svg{ color:#6BE3B8; }

/* The deep tone is unreadable on a dark surface — links flip to the light
   brand blue (trap 3 of the kit contract). */
body.theme-dark .ait-auth .ait-link:hover,
body.theme-dark .ait-auth .ait-card__foot a:hover,
body.theme-dark .ait-auth .ait-note__text a:hover,
body.theme-dark .ait-auth .ait-trust__link:hover{ color:#8FC0F8; }
body.theme-dark .ait-auth .ait-link,
body.theme-dark .ait-auth .ait-card__foot a,
body.theme-dark .ait-auth .ait-note__text a,
body.theme-dark .ait-auth .ait-trust__link{ color:var(--ait-primary-light); }
body.theme-dark .ait-auth .ait-trust__link:focus-visible{ outline-color:var(--ait-primary-light); }

body.theme-dark .ait-card:hover{ box-shadow:0 34px 78px -28px rgba(0,0,0,.8); }
body.theme-dark .ait-card__icon{ box-shadow:0 14px 28px -10px rgba(0,0,0,.65); }

body.theme-dark .ait-input:focus-within{ background:var(--aits-surface-2,var(--dk-surface-2,#17171B)); }
body.theme-dark .ait-input input:-webkit-autofill{
    -webkit-text-fill-color:var(--ait-ink);
    -webkit-box-shadow:0 0 0 1000px var(--aits-surface-3,var(--dk-surface-3,#1D1D22)) inset;
}
body.theme-dark .ait-input__toggle:hover{ color:var(--ait-primary-light); }

body.theme-dark .ait-rule__tick{ background:rgba(255,255,255,.11); }
body.theme-dark .ait-rule[data-ok="1"] .ait-rule__tick{ color:var(--dk-bg,#0E0E11); }

body.theme-dark .ait-check input{ background:var(--aits-surface-3,var(--dk-surface-3,#1D1D22)); }
body.theme-dark .ait-check input:hover{ border-color:var(--ait-primary-light); }

body.theme-dark .ait-auth .ait-btn:hover{ box-shadow:0 22px 40px -16px rgba(0,0,0,.78); }

/* GitHub's #181717 mark and Apple's #000 mark are invisible on the dark card. */
body.theme-dark .ait-auth .ait-social__btn svg [fill="#181717"],
body.theme-dark .ait-auth .ait-social__btn svg [fill="#000000"],
body.theme-dark .ait-auth .ait-social__btn svg [fill="#000"]{ fill:var(--ait-ink); }
body.theme-dark .ait-auth .ait-social__btn{ background:var(--aits-card,var(--dk-surface-2,#17171B)); }
body.theme-dark .ait-auth .ait-social__btn:hover{ box-shadow:0 14px 26px -14px rgba(0,0,0,.8); }
body.theme-dark .ait-auth .ait-social__btn.is-github{ --ait-brand-wash:rgba(255,255,255,.07); --ait-brand-line:rgba(255,255,255,.30); }
body.theme-dark .ait-auth .ait-social__btn.is-apple { --ait-brand-wash:rgba(255,255,255,.06); --ait-brand-line:rgba(255,255,255,.26); }

body.theme-dark .ait-note:hover{ border-color:var(--ait-line-brand); }
body.theme-dark .ait-note__icon{ color:var(--ait-primary-light); }

@media (max-width:575.98px){
    body.theme-dark .ait-card{ box-shadow:0 18px 44px -22px rgba(0,0,0,.75); }
}

/* ── 13. Motion preferences ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .ait-hero,
    .ait-perk,
    .ait-auth .ait-trust,
    .ait-card{ animation:none; opacity:1; transform:none; }

    /* Every infinite loop is switched off BY NAME. The duration clamp below
       would otherwise spin them 100,000 times a second — a strobe, the exact
       opposite of what this query asks for. (The sky's own loops are stopped
       in auth-sky.css.) */
    .ait-hero__badge-ico svg,
    .ait-hero__accent::after{ animation:none; }
    .ait-hero__accent::before{ animation:none; clip-path:none; }

    .ait-auth *,
    .ait-auth *::before,
    .ait-auth *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }
    .ait-auth .ait-btn:hover,
    .ait-auth .ait-social__btn:hover,
    .ait-perk:hover,
    .ait-hero__badge:hover{ transform:none; }
}

/* System colours replace every fill — the sky would be noise under them, and
   transparent gradient type must fall back to real text colour. */
@media (forced-colors:active){
    .ait-hero__accent::before,
    .ait-hero__accent::after{ display:none; }
    .ait-hero__accent{ background:none; -webkit-text-fill-color:currentColor; }
}

/* ── 14. Print ───────────────────────────────────────────────────────────── */
@media print{
    .ait-hero__accent{ background:none; -webkit-text-fill-color:currentColor; }
    .ait-card{ box-shadow:none; border-color:#DADADA; }
}