/* Later layout additions on top of the drafting sheet: the centered header and its
   eye lockup, the information and support pages, and the phone play dock. Colour,
   type and the perfect-score gold come from the sheet styles before this file. */
@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Center the navigation on the content, with equal space for brand and profile. */
@media(min-width:800px){
  :root .web-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  :root .web-header>.web-home{justify-self:start}
  :root .web-header>.app-nav{grid-column:2;justify-self:center}
  :root .web-header>.header-actions{grid-column:3;justify-self:end}
}
@media(max-width:799px){
  :root .web-header{padding-left:max(var(--page-gutter),var(--safe-area-inset-left,env(safe-area-inset-left,0px)));padding-right:max(var(--page-gutter),var(--safe-area-inset-right,env(safe-area-inset-right,0px)))}
}
:root .native-app .app-nav{padding-left:max(12px,var(--safe-area-inset-left,env(safe-area-inset-left,0px)));padding-right:max(12px,var(--safe-area-inset-right,env(safe-area-inset-right,0px)))}
:root .brand-lockup{display:inline-flex;align-items:center;gap:8px;min-height:44px;width:auto;color:var(--ink);text-decoration:none}
.brand-lockup .brand-eye{display:block;flex:none;width:36px;height:24px;color:var(--ink)}
.brand-lockup .brand-word{font:700 19px/1 Geist,var(--font-ui);letter-spacing:.16em;text-transform:uppercase}
:root .wm-h1 .wordmark,:root .web-header .wordmark{font:700 22px/1 Geist,var(--font-ui);letter-spacing:-.055em}
:root :is(#dlg-privacy,#dlg-terms,#dlg-support) .dlg{overflow-wrap:anywhere}
:root :is(#dlg-privacy,#dlg-terms,#dlg-support) h2:first-child{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:0}
:root :is(#dlg-privacy,#dlg-terms) h2:not(:first-child){font-size:1.15rem;margin:28px 0 8px;letter-spacing:-.015em}
:root :is(#dlg-privacy,#dlg-terms,#dlg-support) p{font-size:1rem;line-height:1.6;margin:0 0 16px}
:root :is(#dlg-privacy,#dlg-terms,#dlg-support) a{color:var(--es-coral);text-underline-offset:3px}
:root :is(#dlg-support,.account-page) .signin-actions{display:grid;gap:16px;margin:24px 0}
:root :is(#dlg-support,.account-page) form label{display:grid;gap:8px;font-size:.95rem;font-weight:600}
:root :is(#dlg-support,.account-page) :is(input:not([type=checkbox]),select,textarea){box-sizing:border-box;width:100%;min-height:48px;border:1px solid var(--es-line-strong);border-radius:6px;background:var(--es-surface);color:var(--es-ink);font:400 1rem/1.4 var(--font-ui);padding:12px}
:root :is(#dlg-support,.account-page) textarea{min-height:130px;resize:vertical}
:root :is(#dlg-support,.account-page) form [role=status]{font-size:.9rem;font-weight:400;color:var(--es-ink-2)}
:root :is(#dlg-support,.account-page) form [role=status]:empty{display:none}
:root #launch-cover.launch-recovery{background:var(--ground);color:var(--ink);font-family:var(--font-ui)}
:root #launch-cover [data-launch-art] path:first-child{fill:var(--brand-ink)}
:root .launch-recovery h1{font:650 1.8rem/1.2 var(--font-ui);letter-spacing:-.04em}
:root .launch-recovery p{font-family:var(--font-ui);color:var(--ink-2)}
:root .launch-recovery button{min-height:48px;border:0;border-radius:6px;background:var(--btn);color:var(--btn-text);font:650 1rem/1.2 var(--font-ui);box-shadow:none}
/* Information pages and browser sign-in share the bundled app's type and controls. */
.information-page{min-height:100svh}
.information-brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
:root .account-page{max-width:640px;gap:16px;padding:24px 24px 64px}
:root .account-page .information-brand{justify-self:start;margin-bottom:24px}
:root .account-page h1,:root .app-auth h1{font:650 clamp(1.8rem,7vw,2.4rem)/1.15 var(--font-ui);letter-spacing:-.04em;margin:0 0 16px}
:root .account-page h2{font:650 1.2rem/1.25 var(--font-ui);letter-spacing:-.02em;margin:20px 0 0}
:root .account-page p{margin:0;font-size:1rem;line-height:1.65}
:root .account-page a:not(.btn):not(.brand-lockup){color:var(--es-coral);text-underline-offset:3px}
:root .account-page nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--es-line);margin-top:24px;padding-top:16px;font-size:.9rem}
:root .account-page nav a{display:inline-flex;align-items:center;min-height:44px}
:root .app-auth{gap:18px;max-width:460px;padding-top:32px}
:root .app-auth>img{width:44px;height:44px;border-radius:8px;box-shadow:none}
@media(max-width:359px){:root .account-page{padding-inline:18px}.brand-lockup .brand-word{font-size:16px}}
@media(prefers-reduced-motion:reduce){dialog.es-bottom[open],dialog.es-bottom.is-closing{animation:none}}

/* Phone portrait: the field stays pinned under the header, and the dock follows
   right under it, so the field never moves when the dock changes at the reveal. */
@media(max-width:600px){
  body.native-app:is([data-phase=play],[data-phase=reveal]) #app{
    min-height:calc(100dvh - 36px);
  }
  body:is([data-phase=play],[data-phase=reveal]) #play{
    flex:1;
    min-height:0;
  }
  body:is([data-phase=play],[data-phase=reveal]) .dock{
    flex:none;
    padding-bottom:max(4px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  }
  @media(max-height:620px){
    body:is([data-phase=play],[data-phase=reveal]) #play{flex:none}
  }
  :root :is(.signin-apple,.signin-google){
    white-space:nowrap;
    padding-inline:max(10px,3vw);
    font-size:max(15px,1rem);
  }
  .hold{
    white-space:nowrap;
    font-size:clamp(22px,8vw,52px);
  }
}

/* ---------- One sheet language: the same close, and centred cards on wide screens ---------- */
:root dialog .es-close{flex:none;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,var(--band-none) 17px,transparent 17.5px);color:var(--es-ink-2);box-shadow:none;font:inherit;line-height:1}
:root dialog .es-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
:root dialog .es-close:hover{color:var(--es-ink)}
:root dialog .es-close:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media(min-width:800px){
  :root dialog.es-bottom{inset:0;margin:auto;width:min(560px,calc(100vw - 48px));max-height:min(780px,calc(100dvh - 64px));padding:24px 26px 26px;border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow,0 24px 60px rgba(3,10,22,.35))}
  :root dialog.es-bottom>.es-grip{display:none}
  :root dialog.es-bottom[open]{animation:es-pop .26s cubic-bezier(.2,.85,.25,1)}
  :root dialog.es-bottom::backdrop{backdrop-filter:blur(3px)}
}