/* The native app's Paytone/Epilogue type, bird and flat colours, adapted to the web. */
.auth-loading { display:none; margin:auto; padding:24px; font-weight:600; }
body[data-auth="pending"] .auth-loading { display:block; }
body[data-auth="pending"] > .chrome, body[data-auth="pending"] > main,
body[data-auth="required"] > .chrome, body[data-auth="required"] > main { display:none; }
.gate {
  --auth-paper:oklch(99% .004 225); --auth-ink:oklch(22% .012 230);
  --auth-sky:oklch(94% .035 225); --auth-muted:oklch(44% .025 230);
  position:fixed; inset:0; z-index:70; overflow:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:1fr 1fr; color:var(--auth-ink); background:var(--auth-paper);
}
.auth-story { background:var(--auth-sky); padding:32px clamp(24px,4.5vw,80px); display:flex; flex-direction:column; gap:32px; min-height:100%; }
.auth-header { display:flex; align-items:center; gap:12px; }
.auth-back { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; color:inherit; border:1px solid color-mix(in oklch,var(--auth-ink) 25%,transparent); border-radius:50%; }
.auth-back:hover { background:var(--auth-paper); }
.auth-back svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.auth-brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.auth-brand > span { font-family:var(--display); font-size:21px; white-space:nowrap; }
.auth-story-body { margin-block:auto; padding-top:16px; }
.auth-eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.auth-story h1 { font-size:clamp(36px,4.3vw,68px); line-height:1.1; letter-spacing:-.035em; margin-top:20px; }
.auth-story h1 em { font-style:normal; position:relative; white-space:nowrap; }
.auth-story h1 em::after { content:""; position:absolute; height:5px; background:var(--blue); inset:auto 0 -6px; border-radius:50%; transform:rotate(-4deg); }
.auth-intro { font-size:15px; line-height:1.8; margin-top:24px; color:var(--auth-muted); }
.auth-art { height:300px; position:relative; max-width:420px; margin:16px auto 0; }
.auth-art img { position:absolute; width:280px; height:280px; object-fit:contain; left:50%; top:0; transform:translateX(-50%) rotate(-7deg); }
.auth-stage { position:absolute; width:82%; height:72px; border:2px solid var(--auth-ink); background:var(--blue-400); border-radius:50%; bottom:26px; left:9%; transform:rotate(-7deg); }
.auth-note { position:absolute; font-family:var(--display); font-size:56px; }
.auth-note-one { left:4%; top:12%; transform:rotate(-15deg); }
.auth-note-two { right:4%; top:25%; transform:rotate(16deg); color:oklch(44% .10 235); }
.auth-side { padding:40px clamp(24px,5vw,88px) 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:32px; }
.auth-panel { width:100%; max-width:400px; margin-block:auto; }
.auth-heading { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.auth-heading .auth-eyebrow { color:var(--auth-muted); font-size:10px; }
.auth-heading h2 { font-size:36px; line-height:1.2; letter-spacing:-.025em; }
.auth-heading > p:last-child { font-size:13px; line-height:1.6; color:var(--auth-muted); max-width:42ch; }
.auth-providers { display:flex; flex-direction:column; gap:12px; }
.auth-provider { border:1.5px solid var(--auth-ink); border-radius:12px; min-height:50px; display:flex; align-items:center; justify-content:center; gap:12px; font-size:14px; font-weight:600; background:var(--auth-paper); transition:background .15s,transform .15s; }
.auth-provider svg { width:20px; height:20px; flex:none; }
.auth-provider:hover { background:var(--auth-sky); }
.auth-provider:active { transform:translateY(2px); }
.auth-divider { display:flex; align-items:center; gap:16px; color:var(--auth-muted); font-size:11px; margin-block:24px; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:oklch(86% .014 225); }
.gate-form { display:flex; flex-direction:column; gap:18px; }
.auth-field { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:600; }
.auth-field input { width:100%; min-height:50px; padding:12px 14px; font-size:16px; font-weight:400; border:1.5px solid oklch(68% .02 225); border-radius:10px; background:var(--auth-paper); }
.auth-field input::placeholder { color:oklch(49% .02 225); }
.auth-field input:focus { border-color:var(--auth-ink); }
.auth-field-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:24px; }
.auth-text-button { padding:4px 0; text-decoration:underline; text-underline-offset:3px; color:inherit; font-size:inherit; font-weight:600; }
.auth-password { position:relative; }
.auth-password input { padding-right:64px; }
.auth-password button { position:absolute; right:4px; top:3px; min-height:44px; min-width:52px; font-size:11px; font-weight:600; }
.auth-hint { color:var(--auth-muted); font-size:11px; font-weight:400; }
.auth-error,.auth-status { padding:12px; font-size:12px; line-height:1.6; border-radius:8px; }
.auth-error { background:oklch(95% .025 25); color:oklch(39% .14 25); }
.auth-status { background:oklch(94% .028 150); color:oklch(34% .065 150); }
.auth-submit { min-height:52px; border:2px solid var(--auth-ink); border-radius:12px; background:var(--blue); box-shadow:3px 4px 0 var(--auth-ink); font-family:var(--display); font-size:16px; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; margin:4px 3px 4px 0; transition:transform .15s,box-shadow .15s; }
.auth-submit:hover { background:var(--blue-400); }
.auth-submit:active { transform:translate(3px,4px); box-shadow:none; }
.auth-submit span:last-child { font-family:var(--sans); font-size:24px; line-height:1; }
.auth-switch { font-size:12px; text-align:center; margin-top:24px; }
.auth-account-note { font-size:11px; line-height:1.7; text-align:center; color:var(--auth-muted); margin-top:20px; }
.gate :focus-visible { outline:3px solid oklch(46% .12 235); outline-offset:4px; }
.gate h2:focus { outline:none; }
.gate button:disabled { opacity:.6; cursor:wait; }
@media(min-width:1500px) { .auth-story { padding-inline:max(64px,calc((100vw - 1280px)/2)); padding-right:64px; } }
@media(max-width:960px) and (min-width:761px) { .auth-story { padding-inline:24px; } .auth-side { padding-inline:28px; } .auth-brand > span { font-size:18px; } .auth-art { height:270px; } .auth-art img { width:250px; height:250px; } }
@media(max-width:760px) {
  .gate { display:flex; flex-direction:column; }
  .auth-story { min-height:auto; padding:max(18px,env(safe-area-inset-top)) 16px 18px; gap:0; }
  .auth-header { gap:8px; }
  .auth-brand img { width:36px; height:36px; }
  .auth-brand > span { font-size:19px; }
  .auth-story-body { display:none; }
  .auth-side { flex:1; padding:28px 24px max(20px,env(safe-area-inset-bottom)); gap:32px; }
  .auth-panel { margin-block:0; }
  .auth-heading h2 { font-size:32px; }
  .auth-heading { margin-bottom:24px; }
  .auth-field-heading .auth-text-button { min-height:44px; margin-block:-10px; }
  .auth-switch .auth-text-button { min-height:44px; }
  .auth-switch { margin-top:16px; }
  .auth-account-note { margin-top:8px; }
}
@media(prefers-reduced-motion:reduce) { .gate *, .gate *::after { transition:none !important; } }