/* auth.css: the A3 Giant Title sign-in screens. Everything is scoped under .auth so it never leaks into app screens.
 * Night when html[data-theme="dark"], otherwise Day. */
.auth{--ink:#16233F;--ink-2:#3E4A63;--gold:#8A6216;--glass:rgba(255,255,255,.62);--glass-line:rgba(255,255,255,.85);
  --veil-top:rgba(234,242,250,.5);--veil-bot:rgba(250,246,236,.92);--sky:url(../assets/x/app-premium-sky-day-tall.webp);--sky-w:url(../assets/x/app-premium-sky-day-wide.webp);
  --apple-bg:#000;--apple-ink:#fff;--field:rgba(255,255,255,.78);--sheet:rgba(250,247,240,.82);--glow:rgba(255,236,190,.95);--shadow:rgba(20,28,50,.45);
  --primary-ink:#fff;--check-ink:#fff;--dock:380px;--bw:40%;
  --top:max(var(--st,20px),env(safe-area-inset-top));--bot:max(var(--sb,12px),env(safe-area-inset-bottom));
  position:fixed;inset:0;z-index:60;overflow:hidden;container-type:size;color:var(--ink);background:#0b1224;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;display:block;padding:0}
html[data-theme="dark"] .auth{--ink:#F6F1E2;--ink-2:#C9CCD8;--gold:#E2C069;--glass:rgba(255,255,255,.10);--glass-line:rgba(255,255,255,.28);
  --veil-top:rgba(10,17,34,.35);--veil-bot:rgba(8,13,28,.9);--sky:url(../assets/x/app-premium-sky-night-tall.webp);--sky-w:url(../assets/x/app-premium-sky-night-wide.webp);
  --apple-bg:#fff;--apple-ink:#000;--field:rgba(255,255,255,.08);--sheet:rgba(13,20,40,.74);--glow:rgba(255,206,120,.55);--shadow:rgba(0,0,0,.75);
  --primary-ink:#131F3C;--check-ink:#131F3C}
.auth[hidden]{display:none}
body.plus:not(.classic) #auth.auth{position:fixed;z-index:60}
.auth *{box-sizing:border-box}
.auth button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
.auth a{color:inherit}
.auth button:focus-visible,.auth a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.auth .ax-sky{position:absolute;inset:-6%;background:var(--sky) 50% 42%/cover;animation:ax-drift 40s ease-in-out infinite alternate}
@keyframes ax-drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.10) translate(-2%,-1.5%)}}
.auth .ax-veil{position:absolute;inset:0;background:linear-gradient(180deg,var(--veil-top) 0%,transparent 30%,transparent 58%,var(--veil-bot) 82%)}
.auth .ax-glow{position:absolute;left:50%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--glow),transparent 72%);animation:ax-pulse 7s ease-in-out infinite}
@keyframes ax-pulse{50%{opacity:.65}}
/* Hardcover book matching the landing page: official cover on the front face, blank spine and page block in 3D. */
.auth .ax-book{position:absolute;aspect-ratio:5/8;transform-style:preserve-3d}
.auth .ax-book img{position:relative;display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0 2px 2px 0;box-shadow:0 2px 4px var(--shadow),0 30px 60px -12px var(--shadow)}
html[data-theme="dark"] .auth .ax-book img{box-shadow:0 0 60px rgba(255,206,120,.28),0 30px 60px -12px var(--shadow)}
.auth .ax-book::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:0 2px 2px 0;background:linear-gradient(90deg,rgba(0,0,0,.16) 0,rgba(255,255,255,.35) 1.2%,rgba(0,0,0,.10) 3.2%,rgba(0,0,0,0) 5%,rgba(0,0,0,0) 92%,rgba(0,0,0,.06) 100%)}
.auth .ax-book .spine,.auth .ax-book .pages{position:absolute;top:0;height:100%;width:16%}
.auth .ax-book .spine{left:0;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#b9b2a2 0,#e4dfd2 16%,#f1ede3 46%,#ddd7c9 78%,#aaa392 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.auth .ax-book .pages{right:0;top:1.2%;height:97.6%;width:15%;transform-origin:100% 50%;transform:rotateY(-90deg);background:repeating-linear-gradient(90deg,#f3ecdc 0 1px,#e2d8c3 1px 2px),#efe7d6;box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35)}
@keyframes ax-rise{from{opacity:0;transform:translateY(12px)}}

/* Welcome: giant gold title, the cover turning in front of its lower edge, the buttons docked at the bottom */
.auth.ax-welcome.w0{--dock:262px;--bw:52%}
.auth.ax-welcome.w1{--dock:324px;--bw:46%}
.auth.ax-welcome.w2{--dock:382px;--bw:40%}
.auth.ax-welcome .ax-glow{top:44%;width:130%}
.auth .ax-over{position:absolute;z-index:2;left:0;right:0;top:calc(var(--top) + 5.5%);margin:0;padding:0;text-align:center;animation:ax-rise .8s ease-out both;color:var(--ink)}
.auth .ax-small{display:block;font:500 15px var(--serif);letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase}
.auth .ax-big{display:block;text-transform:uppercase;margin-top:2px;font:600 22cqw/1 var(--serif);letter-spacing:.02em;
  background:linear-gradient(100deg,#9E711B 0%,#D4AF5A 30%,#FFF1C4 45%,#D4AF5A 60%,#9E711B 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ax-shimmer 8s ease-in-out infinite;filter:drop-shadow(0 2px 10px rgba(255,255,255,.35))}
html[data-theme="dark"] .auth .ax-big{filter:drop-shadow(0 4px 18px rgba(0,0,0,.55))}
@keyframes ax-shimmer{0%,50%{background-position:100% 0}100%{background-position:-50% 0}}
.auth.ax-welcome .ax-book{z-index:3;left:50%;top:calc(var(--top) + 5.5% + 30px + 20cqw);
  width:min(var(--bw),max(56px,calc((100cqh - var(--top) - 5.5cqh - 30px - 20cqw - var(--bot) - 14px - var(--dock) - 14px) / 1.6)));
  transform:translateX(-50%) perspective(900px) rotateY(-16deg) rotateZ(2deg);animation:ax-sway 12s ease-in-out infinite}
@keyframes ax-sway{50%{transform:translateX(-50%) perspective(900px) rotateY(14deg) rotateZ(-2deg)}}

.auth .ax-dock{position:absolute;z-index:5;left:24px;right:24px;bottom:calc(var(--bot) + 14px);display:grid;gap:12px;animation:ax-rise .6s .5s ease-out both}
.auth .ax-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;min-height:44px;border-radius:27px;border:1px solid var(--glass-line);
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  font:600 17px var(--sans);color:var(--ink);width:100%;text-align:center}
.auth .ax-btn.apple{background:var(--apple-bg);color:var(--apple-ink);border-color:var(--apple-bg)}
.auth .ax-btn.primary{background:var(--ink);color:var(--primary-ink);border-color:var(--ink)}
.auth .ax-btn[disabled]{opacity:.6}
.auth .ax-btn.ghost{background:transparent;border-color:var(--gold);color:var(--ink);height:46px;font-weight:600}
.auth .ax-link{display:block;text-align:center;font:600 15px var(--sans);color:var(--ink);padding:12px 0;min-height:44px}
.auth .ax-link b{color:var(--gold);font-weight:600}
.auth .ax-legal{margin:2px 0 0;text-align:center;font:400 12px/1.5 var(--sans);color:var(--ink-2);text-wrap:balance}
.auth .ax-legal a{text-decoration:underline;text-underline-offset:2px;display:inline-block;min-height:24px}
.auth .nw{white-space:nowrap}
.auth .ax-msg{margin:0;text-align:center;font:500 15px/1.45 var(--sans);color:var(--ink);text-wrap:balance}
.auth .ax-msg:empty{display:none}
.auth .ax-dock .ax-msg{background:var(--sheet);border-radius:16px;padding:8px 14px}

/* form screens: the title shrinks to a header, the cover turns small beneath it, a glass sheet rises with the fields */
.auth.ax-form .ax-glow{top:24%;width:110%}
.auth .ax-hdr{position:absolute;z-index:2;left:0;right:0;top:calc(var(--top) + 54px);text-align:center;animation:ax-rise .6s ease-out both;color:var(--ink)}
.auth .ax-hdr .ax-small{font-size:13px}
.auth .ax-hdr .ax-big{font-size:15cqw}
.auth.ax-form .ax-book{z-index:3;left:50%;top:calc(var(--top) + 54px + 22px + 13cqw);height:clamp(64px,calc(100cqh - var(--top) - 54px - 22px - 13cqw - 470px),120px);
  transform:translateX(-50%) perspective(700px) rotateY(-16deg) rotateZ(2deg);animation:ax-sway 12s ease-in-out infinite}
.auth.ax-form .ax-top{z-index:6}
.auth .ax-top{position:absolute;left:16px;right:16px;top:calc(var(--top) + 6px);display:flex;align-items:center;justify-content:space-between}
.auth .ax-round{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;border:1px solid var(--glass-line);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink)}
.auth .ax-sheet{position:absolute;z-index:5;left:0;right:0;bottom:var(--kb,0px);max-height:calc(var(--vvh,100cqh) - var(--top) - 8px);overflow-y:auto;
  padding:30px 24px calc(var(--bot) + 16px);border-radius:30px 30px 0 0;background:var(--sheet);
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);border-top:1px solid var(--glass-line);display:grid;gap:14px;align-content:start;animation:ax-rise .5s ease-out both}
.auth .ax-sheet form{display:grid;gap:14px;margin:0}
.auth .ax-sheet h1{margin:0 0 4px;padding:0;font:500 34px/1.1 var(--serif);text-align:center;letter-spacing:.01em;color:var(--ink);text-wrap:balance}
.auth .ax-fld{display:grid;gap:6px;margin:0}
.auth .ax-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth .ax-two .ax-fld{min-width:0}
.auth .ax-fld span{font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding-left:20px}
.auth .ax-fld input{display:block;width:100%;height:54px;min-height:54px;margin:0;border-radius:27px;border:1px solid var(--glass-line);background:var(--field);
  padding:0 20px;font:400 17px var(--sans);color:var(--ink);outline:none;box-shadow:none;-webkit-appearance:none;appearance:none}
.auth .ax-fld input::placeholder{color:var(--ink-2);opacity:.8}
.auth .ax-fld input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,90,.3);outline:none}
.auth .ax-row{display:flex;justify-content:flex-end;margin-top:-4px}
.auth .ax-row button{font:600 14px var(--sans);color:var(--gold);padding:10px 4px;min-height:44px;display:flex;align-items:center}
.auth .ax-note{margin:-6px 0 0 20px;font:400 13px var(--sans);color:var(--ink-2)}
.auth .ax-ck{position:relative;display:flex;gap:12px;align-items:center;min-height:44px;font:500 15px/1.4 var(--sans);cursor:pointer;margin:0;color:var(--ink)}
.auth .ax-ck input{position:absolute;opacity:0;width:44px;height:44px;left:-6px;top:0;margin:0;padding:0}
.auth .ax-ck i{flex:none;width:26px;height:26px;border-radius:13px;border:1.5px solid var(--gold);display:grid;place-items:center;color:transparent}
.auth .ax-ck input:checked+i{background:var(--gold);color:var(--check-ink)}
.auth .ax-ck input:focus-visible+i{outline:2px solid var(--gold);outline-offset:2px}
.auth .ax-ck a,.auth .ax-legal2 a{color:var(--gold);font-weight:600;text-decoration:none}
.auth .ax-legal2{margin:-4px 0 0;font:400 13px var(--sans);color:var(--ink-2);text-align:center}
.auth .ax-code{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 4px}
.auth .ax-code span{height:62px;border-radius:31px;border:1px solid var(--glass-line);background:var(--field);display:grid;place-items:center;font:500 30px var(--serif);font-variant-numeric:lining-nums;color:var(--ink)}
.auth .ax-code span.cur{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,90,.3)}
.auth .ax-code span.cur::after{content:"";width:2px;height:28px;background:var(--gold);animation:ax-blink 1.1s steps(1) infinite}
.auth .ax-code span.cur:not(:empty)::after{display:none}
.auth .ax-code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;background:none;font-size:16px;caret-color:transparent;color:transparent}
@keyframes ax-blink{50%{opacity:0}}
@container (max-height:740px){.auth.ax-form .ax-book{display:none}}
/* keyboard open: the sheet rides above it, the cover steps aside */
.auth.ax-kb .ax-book,.auth.ax-kb .ax-glow{display:none}
.auth.ax-kb .ax-sheet{padding-bottom:16px}

@container (max-height:700px){
  .auth.ax-welcome.w0{--dock:216px}.auth.ax-welcome.w1{--dock:268px}.auth.ax-welcome.w2{--dock:322px}
  .auth.ax-welcome .ax-dock{gap:8px}
  .auth.ax-welcome .ax-btn{height:48px;border-radius:24px}
  .auth.ax-welcome .ax-link{padding:6px 0}
}
/* landscape: title and cover left, buttons right */
@media (orientation:landscape) and (max-height:520px){
  .auth{--top:max(var(--st,20px),env(safe-area-inset-top));--bot:max(var(--sb,20px),env(safe-area-inset-bottom))}
  .auth .ax-sky{background-image:var(--sky-w)}
  .auth .ax-veil{background:linear-gradient(90deg,var(--veil-top) 0,transparent 40%,var(--veil-bot) 72%),linear-gradient(180deg,var(--veil-top),transparent 60%)}
  .auth.ax-welcome .ax-over{right:auto;left:calc(env(safe-area-inset-left) + 40px);width:44%;top:22px}
  .auth.ax-welcome .ax-small{font-size:13px}
  .auth.ax-welcome .ax-big{font-size:76px}
  .auth.ax-welcome .ax-book{left:calc(env(safe-area-inset-left) + 40px + 22%);top:118px;width:auto;height:230px}
  .auth.ax-welcome .ax-glow{top:60%;left:26%;width:60%}
  .auth .ax-dock{left:auto;right:calc(env(safe-area-inset-right) + 60px);width:340px;top:50%;bottom:auto;transform:translateY(-50%);gap:10px;animation:none}
  .auth .ax-btn{height:50px;border-radius:25px}
  .auth .ax-link{padding:6px 0}
  /* form screens in landscape: title and cover on the left, the sheet on the right */
  .auth.ax-form .ax-hdr{right:auto;left:calc(env(safe-area-inset-left) + 24px);width:40%;top:calc(var(--top) + 52px)}
  .auth.ax-form .ax-hdr .ax-big{font-size:64px}
  .auth.ax-form .ax-book{display:none}
  .auth .ax-sheet{left:auto;right:0;width:min(58%,460px);top:0;bottom:0;max-height:none;border-radius:30px 0 0 30px;padding-top:max(20px,var(--top))}
  .auth.ax-kb .ax-sheet{bottom:var(--kb,0px);top:auto;max-height:var(--vvh)}
  .auth .ax-sheet{gap:8px;padding:max(12px,var(--top)) 22px 12px}
  .auth .ax-sheet form{gap:8px}
  .auth .ax-sheet h1{font-size:24px;margin:0}
  .auth .ax-fld{gap:3px}
  .auth .ax-fld span{font-size:11px}
  .auth .ax-fld input{height:44px;min-height:44px;border-radius:22px;font-size:16px}
  .auth .ax-sheet .ax-btn{height:46px}
  .auth .ax-note{margin:-2px 0 0 20px;font-size:12px}
  .auth .ax-code span{height:50px;font-size:26px}
  .auth .ax-link,.auth .ax-row button{padding:2px 0;min-height:44px}
  .auth .ax-row{margin-top:-6px}
  .auth .ax-legal2{margin:0}
}
@media (prefers-reduced-motion:reduce){.auth *,.auth *::before,.auth *::after{animation:none!important;transition:none!important}}

/* Needs Attention list on the Account page */
.attn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.attn-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }

/* Crash screen (T3.10): shown only when a script error leaves nothing on screen */
.crash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px 16px; background: var(--canvas); }