/* Gate visibility */
body.needs-auth .stage { display:none; }
body.authed .stage { display:flex; }
body.needs-auth #authGate { display:grid; place-items:center; min-height:100svh; }

#authGate {
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* Minimal card */
.auth-card {
  background: rgba(0,0,0,0.7);
  color:#fff;
  padding: 20px;
  border-radius: 12px;
  width: min(92vw, 500px);
  display:inline;
  justify-content: center;
  margin: 1em;
}

.auth-card h2 {
  text-align: center;
  margin-bottom: 0.5em;
  margin-top: 0.25em;
}

#emailForm {
    margin-bottom: 1em;
    margin-left: 10%;
}

.auth-card input, .auth-card button {
  width:80%;
  padding:10px;
  border-radius:10px;
  border:1px solid #555;
  background:#111; color:#fff;
  margin-top: 10px;
}
.auth-card button { cursor:pointer; }

#authErr {
    display:none;}

.styletext {
	font-weight: 400;
	letter-spacing: 0.5em;}

.auth-card h3 {
  margin-top:1em;
  margin-bottom:0.25em;
  text-align:center;
}

/* Add hover effect for buttons */
.auth-card button:hover {
  background:#222;
  border-color:#888;
}

.social-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 8px; /* space between buttons */
}

.social-buttons button {
  width: 100%;        /* each button fills its grid cell */
  justify-self: stretch;
  /* Making text smaller to fit better */
  font-size: 0.6em;
}

#googleBtn, #githubBtn, #facebookBtn {
  display: grid;
  grid-template-rows: auto auto; /* row for icon, row for text */
  justify-items: center;         /* center both horizontally */
  align-items: center;           /* center vertically inside each row */
  text-align: center;            /* center the text itself */
  gap: 6px;                      /* space between svg and text */
}

#googleBtn svg {
  width: 24px;   /* optional: scale the icon */
  height: 24px;
}

#githubBtn svg {
  width: 24px;   /* optional: scale the icon */
  height: 24px;
}

#facebookBtn svg {
  width: 24px;   /* optional: scale the icon */
  height: 24px;
}

/* Stage should only be hidden while auth is required */
.stage {
  display: flex;
}

body.needs-auth .stage {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 240ms ease, transform 240ms ease;
}

body.authed .stage {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 240ms ease, transform 240ms ease;
}

/* Gate visibility */
#authGate { display:none; }
body.needs-auth #authGate {
  display:grid;
  place-items:center;
  min-height:100svh;
}

.auth-card .auth-logo {
  display: flex;
  justify-content: center;
  margin-top: 6px;
  margin-bottom: 10px;
}

.auth-card .auth-logo-circle {
  width: 96px;              /* adjust as you like */
  height: 96px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.auth-card .auth-logo-circle img {
  width: 64px;              /* inner logo size */
  height: 64px;
  object-fit: contain;
  display: block;
}


.corner-badge-circle {
  background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 92%);
  height: clamp(65px, 15vw, 110px);  /* responsive size */
  aspect-ratio: 1 / 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1);
  transform: scale(1);
}
.corner-badge-circle:hover {
  transform: scale(1.07);
}

.corner-badge-circle img {
  width: 60%;              /* inner logo size */
  height: 60%;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain;
  display: block;
}



/* Error message hidden by default */
#authErr {
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  display: block;              /* always part of layout */
  height: 0;                   /* collapsed by default */
  overflow: hidden;            /* hide text until expanded */
  opacity: 0;
  transition: height 250ms ease, opacity 200ms ease;
  color: #e66;
  margin: 0.5rem 0 0;
}

/* Shown state (enough for ~4 lines of text) */
#authErr.visible {
  height: 4.8em;               /* 4 lines × line-height (~1.2em) */
  opacity: 1;
}

/* Motion-friendly entrance */
@keyframes authErrIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  #authErr { transition: none; animation: none !important; }
}

#createAccountLink,
#forgotPwLink {
  text-decoration: underline;
  cursor: pointer;
}

/* Optional: make it clearer on hover */
#createAccountLink:hover,
#forgotPwLink:hover {
  text-decoration-thickness: 2px;   /* thicker underline */
  text-underline-offset: 3px;      /* little gap from text */
}



/* === Responsive typography for the auth card === */
.auth-card {
  /* Base text size scales from small phones → desktops */
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.35;
}

/* Headings scale up a bit more for clarity */
.auth-card h2 {
  font-size: clamp(1.2em, 3.2vw, 1.6em);
}
.auth-card h3 {
  font-size: clamp(1.05em, 2.6vw, 1.3em);
}

/* Inputs and primary button text stay readable across sizes */
.auth-card input,
.auth-card button {
  font-size: 1em; /* inherits the scalable base from .auth-card */
}

/* Error message text slightly smaller than body, still clear */
#authErr {
  font-size: 0.95em;
  line-height: 1.25;
}

/* Social buttons: previously very small (0.6em).
   Make them responsive but still a bit tighter than body text. */
.social-buttons button {
  font-size: clamp(0.85em, 1.8vw, 0.95em);
}

/* Optional: ensure link text inside auth gate is comfortably legible */
.auth-card a {
  font-size: 0.95em;
}



/* --- Auth transition (gate out, stage in) --- */
#authGate {
  /* start visible state (when .needs-auth is set) */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms ease, transform 600ms ease;
}

/* When we start leaving after auth */
#authGate.leaving {
  opacity: 0;
  transform: translateY(12px); /* swim downward */
}

/* Stage is always in layout but we control visibility */
.stage {
  opacity: 0;
  transform: translateY(12px); /* start slightly below */
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}

/* When authed AND entering, swim upward + fade in */
body.authed .stage.entering {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* After the entrance completes we’ll remove .entering in JS,
   and your existing body.authed .stage opacity rules will keep it visible. */
body.authed .stage {
  /* keep your existing fade; the transform now stays at 0 */
  opacity: 1;
  pointer-events: auto;
}

/* Respect prefers-reduced-motion: show/hide instantly */
@media (prefers-reduced-motion: reduce) {
  #authGate,
  .stage,
  body.authed .stage.entering {
    transition: none !important;
    transform: none !important;
  }
}