/* Sign-in surface. FOD v5 structure, sandbox tokens: the Company Brain well, a glass card,
   one Google button. Every value is a --ui-* name from tokens.css; nothing invented here. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{background:var(--ui-well);color:var(--ui-chrome-ink);
  font-family:var(--ui-sans),system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* ground: the brain well lifted, decorative and fixed */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background:
    radial-gradient(720px 520px at 50% 40%, var(--ui-green-h0d), transparent 68%),
    radial-gradient(circle at 50% 36%, var(--ui-well-2) 0%, var(--ui-well) 100%)}
.bg__breath{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%, var(--ui-green-glow-a120) 0%, rgba(0,0,0,0) 60%);
  will-change:transform,opacity;animation:breathe 8s ease-in-out infinite}
.bg__deep{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 58%, var(--ui-surface-0) 100%)}
.bg__stars{position:absolute;inset:0;display:block;width:100%;height:100%}

.stage{position:relative;z-index:1;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;padding:32px 16px}
.signin{width:100%;max-width:400px}

.card{background:var(--ui-green-h1f);border:1px solid var(--ui-green-h50);border-radius:12px;
  -webkit-backdrop-filter:blur(14px) saturate(1.06);backdrop-filter:blur(14px) saturate(1.06);
  padding:36px 32px 30px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 var(--ui-green-h1f);
  will-change:transform,opacity;animation:rise 420ms cubic-bezier(.2,.8,.2,1) both}
@media (max-width:430px){.card{padding:28px 20px 24px}}

.card__logo{height:34px;width:auto;display:block;margin:0 auto 12px;
  will-change:transform,opacity;animation:pop 480ms cubic-bezier(.2,.8,.2,1) both 80ms}
.card__chip{display:inline-block;font:600 10px/1 var(--ui-sans),system-ui,sans-serif;letter-spacing:.08em;
  color:var(--ui-green);background:var(--ui-green-h1f);padding:5px 8px;border-radius:4px;margin:0 0 20px;
  animation:rise 420ms cubic-bezier(.2,.8,.2,1) both 110ms}
.card__title{font:600 24px/1.2 var(--ui-sans),system-ui,sans-serif;letter-spacing:-.02em;
  color:var(--ui-chrome-ink);margin:0 0 8px;animation:rise 420ms cubic-bezier(.2,.8,.2,1) both 140ms}
.card__lead{font:400 14px/1.7 var(--ui-sans),system-ui,sans-serif;
  color:var(--ui-chrome-muted);margin:0 0 24px;animation:rise 420ms cubic-bezier(.2,.8,.2,1) both 200ms}

.reauth{font:400 13px/1.6 var(--ui-sans),system-ui,sans-serif;color:var(--ui-green);
  background:var(--ui-green-h1f);border:1px solid var(--ui-green-h50);border-radius:10px;
  padding:10px 14px;margin:0 0 18px;text-align:left;
  animation:rise 420ms cubic-bezier(.2,.8,.2,1) both 260ms}

.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:46px;padding:14px 18px;border:1px solid var(--ui-green-h22);border-radius:12px;
  background:#fff;color:#1f1f1f;
  font:600 15px/1 var(--ui-sans),system-ui,sans-serif;text-decoration:none;cursor:pointer;
  will-change:transform;animation:rise 420ms cubic-bezier(.2,.8,.2,1) both 320ms;
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease,border-color .18s ease}
.gbtn:hover{transform:translateY(-2px);
  box-shadow:0 12px 30px var(--ui-green-glow-a180), 0 0 0 1px var(--ui-green-h50)}
.gbtn:active{transform:translateY(0)}
.gbtn:focus-visible{outline:2px solid var(--ui-green-deep);outline-offset:3px}
.gbtn svg{width:18px;height:18px;flex:0 0 auto}
.gbtn.disabled{background:var(--ui-surface-2);color:var(--ui-chrome-muted);
  border-color:var(--ui-green-h22);pointer-events:none;box-shadow:none}

.card__note{font:400 13px/1.6 var(--ui-sans),system-ui,sans-serif;
  color:var(--ui-chrome-muted);margin:16px 0 0;animation:rise 420ms cubic-bezier(.2,.8,.2,1) both 380ms}
.foot{font:400 13px/1.6 var(--ui-sans),system-ui,sans-serif;
  color:var(--ui-chrome-muted);text-align:center;margin:18px 0 0;
  animation:rise 420ms cubic-bezier(.2,.8,.2,1) both 440ms}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card,.card__logo,.card__chip,.card__title,.card__lead,.reauth,.gbtn,.card__note,.foot,
  .bg__breath{opacity:1!important;transform:none!important}
}