/* ---------------------------------------------------------------------------
   Tiny Ads — the sign-in screen
   Loaded on every visit; the classroom CSS only matters once you are inside.
--------------------------------------------------------------------------- */

.ta-gate{
  --g-deep:#01341E;
  --g-lime:#B3DB55;
  --g-pink:#FCC9EC;
  --g-card:#FFFDFA;
  --g-ink:#16221C;
  --g-muted:#5E6B63;
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px 20px;
  overflow-y:auto;
  background:
    radial-gradient(120% 90% at 12% -12%, rgba(179,219,85,.20) 0%, transparent 60%),
    radial-gradient(100% 80% at 96% 108%, rgba(252,201,236,.22) 0%, transparent 62%),
    var(--g-deep);
  font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--g-ink);
}

.ta-gate-card{
  width:100%;
  max-width:432px;
  background:var(--g-card);
  border-radius:20px;
  padding:38px 34px 26px;
  box-shadow:0 2px 3px rgba(0,0,0,.05), 0 30px 70px -28px rgba(0,0,0,.55);
  margin:auto;
}

/* ---- wordmark ---- */
.ta-gate-mark{ margin-bottom:26px; line-height:1 }
.ta-wm-a,.ta-wm-b{
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  font-weight:800; font-size:23px; letter-spacing:-.018em;
}
.ta-wm-a{ color:var(--g-deep) }
.ta-wm-b{ color:var(--g-deep); opacity:.55 }
.ta-wm-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--g-pink); margin-left:4px; vertical-align:2px;
}
.ta-gate-byline{
  margin:9px 0 0; font-size:12.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--g-muted);
}

/* ---- steps ---- */
.ta-step h1{
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.15;
  margin:0 0 9px; color:var(--g-deep);
}
.ta-sub{
  margin:0 0 22px; font-size:14.8px; line-height:1.58; color:var(--g-muted);
}
.ta-sub b{ color:var(--g-ink); font-weight:600 }

.ta-step label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.075em;
  text-transform:uppercase; color:var(--g-muted); margin-bottom:7px;
}

.ta-step input{
  width:100%;
  font:inherit;
  font-size:16.5px;                 /* 16px+ stops iOS zooming on focus */
  padding:13px 14px;
  border:1.5px solid #DCD9D2;
  border-radius:11px;
  background:#fff;
  color:var(--g-ink);
  transition:border-color .12s, box-shadow .12s;
}
.ta-step input::placeholder{ color:#B4B0A9 }
.ta-step input:focus{
  outline:none;
  border-color:var(--g-deep);
  box-shadow:0 0 0 3.5px rgba(1,52,30,.11);
}
.ta-otp{
  letter-spacing:.42em; font-size:23px !important; text-align:center;
  font-weight:700; padding-left:8px;
}
.ta-code{ letter-spacing:.12em; font-weight:700; text-transform:uppercase }

.ta-btn{
  width:100%; margin-top:16px;
  padding:14px 18px;
  border:0; border-radius:11px;
  background:var(--g-deep); color:#fff;
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px; font-weight:700; letter-spacing:-.005em;
  cursor:pointer;
  transition:transform .08s, background .12s, opacity .12s;
}
.ta-btn:hover:not(:disabled){ background:#04492B }
.ta-btn:active:not(:disabled){ transform:translateY(1px) }
.ta-btn:disabled{ opacity:.55; cursor:default }

.ta-err{
  margin:13px 0 0; padding:10px 12px;
  font-size:14px; line-height:1.5;
  background:#FDF1F1; border:1px solid #F3D6D6; border-radius:9px;
  color:#8A2A2A;
}
.ta-err.ok{ background:#F1F8EC; border-color:#D8E9C6; color:#3B6321 }

.ta-alt{
  margin-top:17px; display:flex; gap:9px; align-items:center;
  font-size:13.8px; color:var(--g-muted);
}
.ta-link{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--g-deep); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(1,52,30,.3);
}
.ta-link:hover{ text-decoration-color:currentColor }

/* ---- working ---- */
.ta-working{ text-align:center; padding:34px 0 26px; color:var(--g-muted); font-size:15px }
.ta-spin{
  width:26px; height:26px; margin:0 auto 15px;
  border:2.5px solid rgba(1,52,30,.16);
  border-top-color:var(--g-deep);
  border-radius:50%;
  animation:ta-spin .7s linear infinite;
}
@keyframes ta-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .ta-spin{ animation-duration:2.4s } }

.ta-help{
  margin:24px 0 0; padding-top:17px;
  border-top:1px solid #EDEAE4;
  font-size:13.2px; color:#8B867F; text-align:center;
}
.ta-help a{ color:var(--g-deep); font-weight:600 }

/* ---- the account strip inside the classroom ---- */
.ta-account{
  margin-top:auto;
  padding:15px 22px 20px;
  border-top:1px solid var(--rule, #E7E4DF);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.8px; color:var(--muted, #6B6560);
}
.ta-acct-who{ display:flex; align-items:center; gap:7px; min-width:0 }
.ta-acct-mail{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:168px;
}
.ta-dot{
  flex:none; width:6px; height:6px; border-radius:50%;
  background:#5BA35B;
}
.ta-dot.off{ background:#D2A23C }
.ta-account .ta-link{ flex:none; font-size:12.8px; color:var(--muted, #6B6560) }

/* the classroom stays out of the way until someone is actually in */
body:not(.ta-signed-in) .app{ visibility:hidden }

@media (max-width:420px){
  .ta-gate{ padding:0 }
  .ta-gate-card{ border-radius:0; min-height:100vh; padding:44px 24px 30px; box-shadow:none }
}