/* The age screen and the sign-in sheet (gate.js). Loaded by gate.js itself, so any page can use them. Needs tokens.css. */
.gl-gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,4,9,.72);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);animation:gl-gate-in .28s var(--gl-ease)}
.gl-gate--out{opacity:0;transition:opacity .2s}
@keyframes gl-gate-in{from{opacity:0}to{opacity:1}}
@media (min-width:640px){.gl-gate--sheet{align-items:center}}

/* the age screen: the whole viewport, a slow spiral behind one statement and one button */
.gl-gate--age{align-items:center;background:var(--gl-bg);-webkit-backdrop-filter:none;backdrop-filter:none;overflow:auto}
.gl-gate__art{position:fixed;inset:0}
.gl-gate__art::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(7,6,11,.88) 0%,rgba(7,6,11,.62) 60%,rgba(7,6,11,.3) 100%)}
.gl-gate__age{position:relative;width:min(100%,640px);padding:var(--gl-6) var(--gl-gutter);margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--gl-4)}
.gl-gate__brand{margin-bottom:var(--gl-3)}
.gl-wordmark{display:block;height:26px;width:auto}
.gl-wordmark--xl{height:clamp(34px,7vw,46px)}
.gl-gate__h{margin:0;font-size:clamp(2.5rem,9vw,4.6rem)}
.gl-gate__p{margin:0;max-width:44ch;color:var(--gl-text-2);font-size:var(--gl-fs-lg)}
.gl-gate__enter{margin-top:var(--gl-3);width:min(100%,360px)}
.gl-gate__leave{color:var(--gl-muted);font-size:var(--gl-fs-sm);text-decoration:underline;text-underline-offset:3px;padding:var(--gl-3)}
.gl-gate__leave:hover{color:var(--gl-text)}
.gl-gate__fine{margin:var(--gl-3) 0 0;max-width:52ch;color:var(--gl-dim);font-size:var(--gl-fs-xs);line-height:1.6}

/* the sheet: rises from the bottom on a phone, sits in the middle on a wide screen */
.gl-sheet{position:relative;overflow:hidden;width:min(100%,460px);max-height:94vh;max-height:94dvh;overflow-y:auto;background:linear-gradient(180deg,var(--gl-surface-2),var(--gl-surface) 60%);border:1px solid var(--gl-line-2);border-bottom:0;border-radius:26px 26px 0 0;padding:var(--gl-6) var(--gl-5) calc(var(--gl-5) + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 80px -20px rgba(157,123,255,.35);animation:gl-sheet-in .38s var(--gl-ease)}
@keyframes gl-sheet-in{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:640px){.gl-sheet{border-radius:26px;border-bottom:1px solid var(--gl-line-2);padding:var(--gl-7) var(--gl-6) var(--gl-6);box-shadow:0 30px 120px -20px rgba(157,123,255,.45)}}
.gl-sheet>*{position:relative}
.gl-sheet__art{position:absolute!important;inset:0 0 auto 0;height:220px;overflow:hidden;opacity:.55;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);pointer-events:none}
.gl-sheet__x{position:absolute!important;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--gl-line-2);background:rgba(7,6,11,.5);color:var(--gl-text);font-size:1.4rem;line-height:1;cursor:pointer}
.gl-sheet__x:hover{background:rgba(255,255,255,.1)}
.gl-sheet__brand .gl-wordmark{height:20px;opacity:.9}
.gl-sheet__h{margin:var(--gl-4) 0 var(--gl-2);font-size:clamp(2rem,7vw,2.6rem)}
.gl-sheet__lead{margin:0 0 var(--gl-5);color:var(--gl-text-2)}
.gl-sheet__free{margin:var(--gl-5) 0 0;text-align:center;color:var(--gl-muted);font-size:var(--gl-fs-sm)}
.gl-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:var(--gl-4);background:rgba(255,255,255,.05);border-radius:var(--gl-r-pill)}
.gl-tab{min-height:42px;border:0;border-radius:var(--gl-r-pill);background:transparent;color:var(--gl-muted);font:600 var(--gl-fs-sm)/1 var(--gl-font-ui);cursor:pointer}
.gl-tab[aria-selected="true"]{background:var(--gl-text);color:var(--gl-bg)}
.gl-form{display:grid;gap:var(--gl-4)}
.gl-field{display:grid;gap:6px;color:var(--gl-muted);font-size:var(--gl-fs-sm)}
.gl-field__l{display:flex;justify-content:space-between;align-items:center}
.gl-field small{color:var(--gl-dim)}
.gl-err{margin:0;min-height:1.3em;color:var(--gl-danger);font-size:var(--gl-fs-sm)}
.gl-note{margin:0 0 var(--gl-4);padding:10px 14px;border-radius:var(--gl-r-sm);background:rgba(157,123,255,.12);border:1px solid rgba(157,123,255,.35);color:var(--gl-text);font-size:var(--gl-fs-sm)}
.gl-link{background:none;border:0;padding:6px 2px;color:var(--gl-muted);font:500 var(--gl-fs-sm)/1.2 var(--gl-font-ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:center}
.gl-link:hover{color:var(--gl-text)}
.gl-sheet__go{width:100%}
.gl-sheet__forgot{display:block}