/* Meet Birdie: design tokens, reset, layout, motion. Moved verbatim from the approved prototype (docs/meetbirdie-v3.html). */

:root{--bg:#061a30;--bg2:#0a2342;--card:#0e2a4c;--card2:#13345c;--card3:#183d69;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);--mint:#2ee6a6;--mint2:#1fc98e;--green:#22c55e;--fair:#16a34a;--deep:#0d6b3e;--sky:#6ec6ea;--flag:#a35cf0;--lav:#c9a2ff;--sun:#f6c343;--red:#ff7a7a;--text:#eef4fb;--muted:#8fa6c2;--dim:#5a7392;--r:20px;--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);--font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Segoe UI",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#030f1e;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
/* Native pickers (the select's open list, date pickers) drawn dark, like the app. */
:root{color-scheme:dark}
select option{background:var(--bg2);color:var(--text)}
input,textarea{font-size:16px}
button{cursor:pointer;border:0;background:none;padding:0}
#app{position:relative;max-width:480px;margin:0 auto;height:100%;overflow:hidden;background:radial-gradient(120% 60% at 50% -10%,rgba(46,230,166,.10),transparent 60%),radial-gradient(90% 50% at 110% 110%,rgba(163,92,240,.08),transparent 60%),var(--bg)}
@media(min-width:520px){#app{box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.6)}}
#view{position:absolute;inset:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.screen.enter-r{animation:inR .28s cubic-bezier(.2,.8,.2,1)}
.screen.enter-l{animation:inL .28s cubic-bezier(.2,.8,.2,1)}
.screen.enter-f{animation:fade .22s ease}
@keyframes inR{from{transform:translateX(30%);opacity:0}to{transform:none;opacity:1}}
@keyframes inL{from{transform:translateX(-20%);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pad{padding:0 16px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:13px}
.tiny{font-size:11.5px}
.h1{font-size:30px;font-weight:800;letter-spacing:-.6px;margin:4px 0 2px}
.sub{color:var(--muted);font-size:14.5px;line-height:1.4}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);display:inline-block}
.off{opacity:.6}
.skel{border-radius:16px;background:linear-gradient(90deg,var(--card) 0%,var(--card2) 50%,var(--card) 100%);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.hint{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}

/* ---------- Readability for our golfers (60 to 70) ----------
   Added in the production build: the approved prototype look, with text a
   notch larger, tap targets at least 44px, and a "dim" gray that still reads
   at 4.5:1 on the navy. Remove this block to get the prototype's exact sizes. */
:root{--dim:#7189a8}
.tiny{font-size:12.5px}
.small{font-size:14px}
.sub{font-size:15.5px}
.hint{font-size:13.5px}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:12px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* Launch splash (app.html): Birdie drops in and lands with a bounce, the
   rings glow, the wordmark rises. launch.dart lifts it away once the first
   screen is ready and the entrance has played. */
#launch{position:fixed;inset:0;z-index:200;background:#011e3a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .38s ease,transform .38s ease}
#launch .emblem{width:min(68vw,300px);height:auto;position:relative;animation:lDrop .85s cubic-bezier(.22,1.3,.4,1) both}
#launch .word{width:min(62vw,270px);height:auto;position:relative;animation:lRise .55s .45s cubic-bezier(.2,.9,.25,1) both}
#launch .glow{position:absolute;width:min(90vw,420px);aspect-ratio:1;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-62%);
  background:radial-gradient(closest-side,rgba(46,230,166,.22),rgba(46,230,166,.06) 60%,transparent);animation:lGlow 1.1s .2s ease-in-out both}
#launch.out{opacity:0;transform:scale(1.06);pointer-events:none}
@keyframes lDrop{0%{opacity:0;transform:translateY(-38px) scale(.72) rotate(-6deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lRise{from{opacity:0;transform:translateY(16px);letter-spacing:4px}to{opacity:1;transform:none}}
@keyframes lGlow{0%{opacity:0;transform:translate(-50%,-62%) scale(.6)}50%{opacity:1;transform:translate(-50%,-62%) scale(1.05)}100%{opacity:.7;transform:translate(-50%,-62%) scale(1)}}
@media (prefers-reduced-motion:reduce){#launch .emblem,#launch .word,#launch .glow{animation-duration:.01s;animation-delay:0s}}
/* Installed app: Android first shows its own launch screen (the round emblem
   in the middle). Birdie's splash picks up from exactly that picture (the
   emblem centered, icon-sized) and settles into place, so the two read as
   one, instead of a second splash dropping in. */
@media (display-mode:standalone){
  #launch .emblem{animation:lSettle .75s cubic-bezier(.3,1.25,.4,1) both}
}
@keyframes lSettle{0%{transform:translateY(34px) scale(.6)}100%{transform:none}}