/* Auth pages: log in, sign up, missing password and the redirector after logout, join and upgrade
   (views/landing/v2/auth and the pages on it). The home page's parallax footer scene lifted out of the footer and
   turned into the whole page: same layers, same artboard (1376 x 1554), same layer attributes. Nothing scrolls on
   these pages, so the engine in javascripts/v2/auth.js runs the progress once on load as an entrance and the pointer
   keeps the depth alive afterwards. Loads over tokens.css, base.css and marks.css of the shell */

/* The page must not be its own scroll container. Chromium promotes a scrollable element to its own compositing
   layer once the pointer enters it, and a backdrop-filter inside can then only sample what is inside that layer. The
   scene is a fixed sibling outside it, so the glass card would collapse to flat white on hover. Letting the document
   scroll keeps the fixed scene in the card's backdrop */
html{min-height:100%}
body{margin:0;min-height:100%;background:#aebcdf}

/* ---------------------------------------------------------------
   the scene
   --------------------------------------------------------------- */
.fx{position:fixed;inset:0;z-index:0;container-type:inline-size;
     background:linear-gradient(180deg,#f2f4fa 0%,#aebcdf 34%,#e8d9c8 60%,#fdb958 72%,#8fae62 86%,#2a3618 100%)}
.fx-clip{position:absolute;inset:0;overflow:hidden}
/* the cloud stack is open at the top so clouds can drift in from above */
.fx-cloudclip{position:absolute;inset:0;overflow-x:clip;overflow-y:visible;pointer-events:none;
     --fx-h:clamp(130svh,112.94vw,180svh)}
/* The five clouds are drawn at very different heights on the artboard, so one shared nudge cannot serve them. Each
   gets its own, sized so every cloud lands between the window's cut at 19.7% of the scene and the first ridge at
   38.7%. `translate` is its own property, so it composes with the transform the engine writes on the same element */
.fx-cloudclip .fx-layer{inset:0 0 30% 0;translate:0 calc(var(--cd,0) * var(--fx-h))}
.fx-layer.cd-hi{--cd:.19}    /* rc1, the high thin band, nearly off the top */
.fx-layer.cd-mid{--cd:.06}   /* lc2 */
/* lc1, rc3 and rc2 already sit low enough and take no drop at all */

/* The viewport is usually landscape and the artboard is portrait, so the scene is sized from whichever axis needs
   more (never shorter than 130svh, never narrower than the window) and its top is anchored at a fixed fraction, which
   puts the same band on screen everywhere: sky and clouds from 22%, the ridges from 38.7%, grass below. The grass
   layer is transparent down to about 73.6% of the artboard, so the window runs from 22% to 77.6% of the scene at
   every size. Past 16:10 the width holds at 100% rather than following the artboard, so the scene stretches slightly
   sideways instead of losing its foreground */
.fx-scene{position:absolute;left:50%;container-type:inline-size;
     --fx-h:clamp(130svh,112.94vw,180svh);--fx-top:.22;
     top:calc(-1 * var(--fx-top) * var(--fx-h));
     height:var(--fx-h);
     width:max(100%,calc(var(--fx-h) * 1376 / 1554));
     transform:translateX(-50%)}
.fx-layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.fx-layer img{position:absolute;height:auto}

img.fx-sky{left:0;      top:.77%;   width:100%}
img.fx-h4 {left:0;      bottom:0;   width:100%}
img.fx-h3 {left:0;      bottom:0;   width:100%}
img.fx-h2 {left:0;      bottom:0;   width:100%}
img.fx-g1 {left:0;      bottom:0;   width:100%}
/* Only the outer vertical edge of each cloud is cropped hard, the other three fade out. Every cut sits 11% of the
   scene beyond its edge, wider than anything the entrance, the drift and the lean can spend.
   Width comes off the scene's height, not its width: past 16:9 the scene stretches sideways and a width-relative
   cloud grew with it, so its foot dropped onto the ridge. Sized from the height a cloud keeps its artboard
   proportions at any stretch. Each is anchored by its own cropped edge, left or right */
img.fx-lc2{left:-11%;  top:17.86%; width:calc(.3919 * var(--fx-h))}
img.fx-lc1{left:-11%;  top:2.14%;  width:calc(.3102 * var(--fx-h))}
img.fx-rc3{right:-11%; top:25.43%; width:calc(.4402 * var(--fx-h))}
img.fx-rc2{right:-11%; top:32.57%; width:calc(.3462 * var(--fx-h))}
img.fx-rc1{right:-11%; top:1.86%;  width:calc(.5219 * var(--fx-h))}

@keyframes fxdriftA{from{transform:translateX(-2.1%)}to{transform:translateX(2.1%)}}
@keyframes fxdriftB{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
img.fx-lc1{animation:fxdriftA 46s -12s ease-in-out infinite alternate}
img.fx-lc2{animation:fxdriftB 58s -30s ease-in-out infinite alternate}
img.fx-rc1{animation:fxdriftA 40s  -6s ease-in-out infinite alternate}
img.fx-rc2{animation:fxdriftB 52s -22s ease-in-out infinite alternate}
img.fx-rc3{animation:fxdriftA 64s -40s ease-in-out infinite alternate}

/* a breath of haze right behind the card so the type stays readable wherever the ridge line happens to fall */
.fx-haze{position:absolute;inset:0;z-index:1;pointer-events:none;
     background:radial-gradient(46% 42% at 50% 48%,rgba(255,255,255,.46),rgba(255,255,255,0) 74%)}

/* ---------------------------------------------------------------
   the card
   --------------------------------------------------------------- */
/* three rows: the card is centred in the middle one, the sign-off sits on the floor of the last one */
.page{position:relative;z-index:2;min-height:100svh;display:grid;
     grid-template-rows:1fr auto 1fr;justify-items:center;
     padding:24px var(--gutter) 52px}

/* Nothing here may animate opacity or transform. An ancestor below 1 opacity (or with a transform) forms a new
   backdrop root and the card's backdrop-filter can then only sample what is inside it, which is nothing, the scene
   being a fixed sibling. The card arrives on `translate`, its own property, and never fades */
.auth{grid-row:2;align-self:center;width:100%;max-width:412px}
.authcard{animation:rise .75s .1s var(--ease) both}
@keyframes rise{from{translate:0 16px}to{translate:0 0}}
/* the sign-off has no backdrop-filter, so it can fade */
@keyframes settle{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Liquid glass. Translucent enough that the ridge line reads through it, blurred enough that nothing behind competes
   with the type. Both the specular pass and the fill are layers of one background rather than a pseudo-element: a
   second painted layer on top of a backdrop-filter gets its own compositing surface and Chrome re-rasterises it
   whenever anything in the card moves, which made the glass shimmer. Not .card, base.css gives that a white hover
   fill that would kill the glass */
.authcard{position:relative;border-radius:var(--r-lg);
     padding:36px 32px 24px;text-align:center;
     display:flex;flex-direction:column;gap:14px;
     /* top layer: a light falling from the top-left. bottom layer: the card sits on open sky at the top and busy
        grass at the foot, so the fill thickens downward and the type holds contrast */
     background:
       linear-gradient(148deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.07) 38%,
             rgba(255,255,255,0) 62%,rgba(255,255,255,.09) 100%),
       linear-gradient(180deg,rgba(255,255,255,.62) 0%,
             rgba(255,255,255,.71) 46%,rgba(255,255,255,.82) 100%);
     backdrop-filter:blur(44px) saturate(1.85);
     -webkit-backdrop-filter:blur(44px) saturate(1.85);
     box-shadow:0 30px 64px -28px rgba(14,28,10,.5),
                0 2px 6px rgba(14,28,10,.07),
                inset 0 0 0 1px rgba(255,255,255,.5),
                inset 0 1px 0 rgba(255,255,255,.9)}
/* no backdrop-filter (older Firefox): a near-solid card */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .authcard{background:rgba(255,255,255,.93)}}

/* The X mark, common/v2/mark, drawn by its Lottie through marks.js (the .lot box takes the static mark's place).
   No hover transform: scaling anything inside a backdrop-filter element re-renders the whole pane, the hover replays
   the draw and that is enough */
.authcard__mark{display:block;width:64px;height:64px;margin:0 auto 16px}
.authcard__mark .mark:not(.is-lottie),.authcard__mark .lot{display:block;width:100%;height:100%}

/* an institution's own logo in place of the X on its member page */
.authcard__logo{display:block;margin:0 auto 16px;line-height:0}
.authcard__logo img{max-height:64px;max-width:220px;height:auto;width:auto}

.authcard h1{font-size:26px;line-height:1.2;margin-bottom:22px}
/* the join page's line under the title, a note in the card */
.authcard__lead{margin:-14px 0 18px;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* alerts of the auth pages, common/v2/alerts. Flat, no icon font on the v2 shell */
.auth-alerts{display:flex;flex-direction:column;gap:8px;margin:-8px 0 16px;text-align:left}
.auth-alert{font-size:14px;font-weight:500;line-height:1.45;padding:11px 16px;border-radius:var(--r-sm);
     color:var(--ink);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--border)}
.auth-alert--error{color:#9b2a1f;background:#fdece9;box-shadow:inset 0 0 0 1px #f3c7c0}
.auth-alert--success{color:#1f5d2e;background:#e8f5ea;box-shadow:inset 0 0 0 1px #bfe0c5}
.auth-alert--promo{color:#7a4b00;background:var(--orange-10);box-shadow:inset 0 0 0 1px var(--orange-20)}
.auth-alert a{font-weight:700;color:inherit;text-decoration:underline;margin-left:4px}

/* the fields are glass too, a stop brighter than the card so they still read as the thing you type into */
.field{display:flex;align-items:center;width:100%;padding:0 20px;
     background:rgba(255,255,255,.93);
     border-radius:var(--pill);box-shadow:inset 0 0 0 1px var(--border);
     transition:box-shadow .2s var(--ease),background-color .2s var(--ease)}
.field + .field{margin-top:11px}
.field:focus-within{background:#fff;box-shadow:inset 0 0 0 2px var(--blue)}
.field.is-invalid{box-shadow:inset 0 0 0 2px #d9463a}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
     font-size:16px;color:var(--ink);padding:13px 0}
.field input::placeholder{color:var(--muted)}
.field .peek{flex:none;border:0;background:none;padding:6px;margin-right:-6px;
     cursor:pointer;color:var(--muted);line-height:0}
.field .peek:hover{color:var(--ink-2)}

/* Autofill. Chrome paints the input blue, Safari and Firefox yellow, a square box inside the pill, with
   background-color and color !important so neither can be overridden. The delayed transition keeps the
   input see-through and -webkit-text-fill-color, which none of them set, keeps the text ink. Instead the
   pill flashes sky blue with white text once, timed like the coupon bar, the keyframes have no ends so
   it returns to whatever the pill is (glass, or white while focused). White and ink measure the same on
   sky by APCA (Lc 55 and 54), the white reads lighter */
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);
     transition:background-color 0s 99999s,color 0s 99999s}
.field:has(input:-webkit-autofill){animation:fieldFlash 1.5s ease-in-out .5s}
.field:has(input:-webkit-autofill) :is(input,.peek){animation:fieldInkFlash 1.5s ease-in-out .5s}
@keyframes fieldFlash{30%,50%{background-color:var(--sky)}}
@keyframes fieldInkFlash{30%,50%{color:#fff;-webkit-text-fill-color:#fff;caret-color:#fff}}
@media (prefers-reduced-motion:reduce){
  .field:has(input:-webkit-autofill),.field:has(input:-webkit-autofill) :is(input,.peek){animation:none}
}

/* the phone field of the member page, intl-tel-input puts its flag picker inside the pill */
.field--phone{padding-left:0}
.field--phone .iti{display:flex;width:100%}
.field--phone .iti__flag-container{position:relative}
.field--phone .iti__selected-flag{padding:0 12px 0 18px;border-radius:var(--pill) 0 0 var(--pill)}
.field--phone input{padding-left:0!important}
/* a line under a field, the member page's domain hint */
.field-note{margin:8px 0 0 20px;text-align:left;font-size:13px;color:#b3261e}
/* the terms line of the pre purchase page */
.agree{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0 20px;text-align:left;font-size:13px;line-height:1.5;color:var(--ink-2)}
.agree input{flex:none;margin:3px 0 0;accent-color:var(--blue)}
.agree a{color:var(--blue)}
/* the message page's buttons side by side, not the stacked full width of the forms */
.authcard__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
.authcard .authcard__actions .btn{width:auto;margin-top:0;padding:11px 24px;font-size:15px}

.forgot{display:block;margin-top:12px;text-align:left;font-size:13px;
     font-weight:600;color:var(--blue)}
.forgot:hover{color:var(--blue-dark)}

.authcard .btn-primary{width:100%;margin-top:20px;padding:13px 24px;font-size:16px}
.rule{display:flex;align-items:center;gap:14px;margin:20px 0}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:rgba(18,18,18,.14)}
.authcard .btn-white{width:100%;padding:11px 24px;background:rgba(255,255,255,.86);
     border-color:rgba(255,255,255,.95)}
.authcard .btn-white:hover{background:#fff;border-color:#fff}

/* the redirector's countdown line */
.authcard__wait{margin:-6px 0 4px;font-size:16px;color:var(--ink-2)}

.authcard__foot{margin-top:18px;padding-top:18px;border-top:1px solid rgba(18,18,18,.12);
     font-size:16px;color:var(--ink-2)}
.authcard__foot a{font-weight:700;color:var(--ink)}
.authcard__foot a:hover{color:var(--blue)}

/* ---- the sign-off on the floor of the page --------------------------- */
/* The lockup of common/v2/lockup in white: the wordmark follows the colour, the mark's fills are overridden. A
   filter chain on a hovered element gets re-rasterised and the brand colours flash back through, so the link has no
   hover state at all */
.sign{grid-row:3;align-self:end;display:flex;flex-direction:column;align-items:center;
     gap:14px;padding-top:30px;text-align:center;
     animation:settle .8s .35s var(--ease) both}
.sign a{display:block;color:#fff;line-height:0;filter:drop-shadow(0 2px 12px rgba(20,40,16,.42))}
.sign .brand-lockup{--brand-h:34px}
.sign .mark path{fill:#fff}

/* In a short, wide window the scene is scaled up so much that the visible slice is nearly all grass, so the card
   tightens up to leave the sky in view */
@media (max-height:860px){
  .authcard{padding:28px 28px 22px;gap:11px}
  .authcard__mark{width:54px;height:54px;margin-bottom:11px}
  .authcard h1{font-size:24px;margin-bottom:13px}
  .authcard .btn-primary{margin-top:13px}
  .rule{margin:10px 0}
  .authcard__foot{margin-top:13px;padding-top:12px}
  .sign{padding-top:20px}
  .sign .brand-lockup{--brand-h:29px}
  .page{padding-bottom:36px}}
@media (max-height:620px){.authcard{padding:20px 22px 18px}.authcard h1{margin-bottom:12px}}
@media (max-width:420px){.authcard{padding:28px 22px 24px}}
@media (prefers-reduced-motion:reduce){.authcard,.sign{animation:none}}