/* Extracted style block */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root{
  /* Login-page roles mapped onto the shared tokens (tokens.css). */
  --hero-bg-0:var(--page-bg);
  --hero-bg-1:var(--page-bg);
  --hero-bg-2:var(--surface-alt);
  --ink-0:var(--text-primary);
  --ink-1:var(--text-secondary);
  --ink-2:var(--text-muted);
  --line-dark:var(--border);
  --panel:var(--surface);
  --panel-2:var(--surface);
  --field-bg:var(--surface-alt);
  --field-border:var(--border);
  --field-border-strong:var(--brand);
  --focus-ring:var(--brand-halo);
  --brand-0:var(--brand-fill);
  --brand-1:var(--brand-fill);
  --radius:0.875rem;
  --motion-fast:120ms ease;
  --motion-base:220ms ease;
  --motion-enter:320ms cubic-bezier(.22,1,.36,1);
}

html,body{
  min-height:100%;
  font-family:var(--font-body);
  background:var(--hero-bg-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Page fade-in runs on its own (no script needed); .is-leaving still fades out on navigation. */
body{
  animation:page-enter 420ms cubic-bezier(.22,1,.36,1) both;
  transition:opacity 360ms ease,transform 420ms cubic-bezier(.22,1,.36,1);
}
@keyframes page-enter{ from{ opacity:0; transform:translate3d(0,0.5rem,0); } }

body.is-leaving{
  opacity:0;
  transform:translate3d(0,10px,0);
}

.page-fader{
  position:fixed; inset:0; z-index:2200; pointer-events:none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--media-scrim) 74%, transparent) 0%, color-mix(in srgb, var(--media-scrim) 88%, transparent) 100%);
  opacity:0;
  transition:opacity 320ms ease;
}
body.is-leaving .page-fader{ opacity:1; }

a{ color:inherit; }
button,input{ font:inherit; }

.skip-link{
  position:absolute; left:16px; top:16px; z-index:10;
  padding:10px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--surface-raised) 96%, transparent); color:var(--text-primary); text-decoration:none;
  transform:translateY(-140%); transition:transform var(--motion-fast);
}
.skip-link:focus-visible{ transform:translateY(0); }

.auth-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,65%) minmax(360px,35%);
  background:
    radial-gradient(900px 260px at 88% -5%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%),
    radial-gradient(640px 220px at 3% 8%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 66%),
    linear-gradient(180deg,var(--hero-bg-0) 0%,var(--hero-bg-1) 46%,var(--hero-bg-2) 100%);
}

.media-panel{
  position:sticky;            /* photo stays on screen while the sign-in column scrolls (slogan always visible) */
  top:0;
  height:100vh;
  align-self:start;
  border-right:1px solid var(--line-dark);
  overflow:hidden;
}

.media-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  filter:saturate(1.03) brightness(.95);
}

.media-tint{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--media-scrim) 52%, transparent) 0%, color-mix(in srgb, var(--media-scrim) 22%, transparent) 35%, color-mix(in srgb, var(--media-scrim) 10%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--media-scrim) 42%, transparent) 0%, color-mix(in srgb, var(--media-scrim) 8%, transparent) 46%, color-mix(in srgb, var(--media-scrim) 24%, transparent) 100%);
}

.hero-copy{
  position:absolute;
  left:clamp(20px,3vw,48px);
  bottom:clamp(5rem,13vh,8rem);   /* more breathing room above the page edge (owner 2026-10-04) */
  max-width:34rem;
  z-index:2;
  animation:rise-in var(--motion-enter) both;
}

/* Slogan (eyebrow, title, lines): shared in brand-hero.css */

.hero-copy p:not(.hero-eyebrow){
  color:color-mix(in srgb, var(--on-media) 88%, transparent);
  font-size:clamp(.98rem,1.2vw,1.1rem);
  max-width:31rem;
  line-height:1.52;
}

.auth-rail{
  position:relative;
  z-index:3;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px clamp(22px,2.6vw,36px);
  background:linear-gradient(155deg,var(--panel) 0%, var(--panel-2) 100%);
}

.auth-shell{
  width:min(100%,372px);
}

.auth-logo{
  display:block;
  width:min(100%,220px);
  height:auto;
  margin:0 auto 20px;
  filter:drop-shadow(0 10px 24px color-mix(in srgb, var(--shadow-ink) 26%, transparent));
}

.auth-heading{
  font-family:var(--font-display);
  color:var(--ink-0);
  font-size:1.65rem;
  font-weight:620;
  text-align:center;
}

.auth-sub{
  margin-top:6px;
  margin-bottom:22px;
  color:var(--ink-2);
  font-size:.94rem;
  line-height:1.54;
  text-align:center;
}

.role-toggle{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:18px;
  padding:4px;
  border:1px solid var(--line-dark);
  border-radius:12px;
  background:color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.role-btn{
  min-width:0;
  border:none;
  border-radius:9px;
  padding:10px 12px;
  background:transparent;
  color:var(--ink-2);
  font-size:.88rem;
  font-weight:620;
  cursor:pointer;
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);
}

.role-btn:hover{ background:color-mix(in srgb, var(--text-primary) 8%, transparent); color:var(--ink-1); }
.role-btn:active{ transform:scale(.985); }
.role-btn.active{
  background:var(--brand-fill);
  color:var(--on-accent);
}

.sso-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}

.sso-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  min-height:46px;
  padding:11px 16px;
  border:1px solid var(--field-border);
  border-radius:12px;
  background:color-mix(in srgb, var(--text-primary) 6%, transparent);
  color:var(--text-primary);
  font-size:.94rem;
  font-weight:580;
  text-decoration:none;
  transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast);
}

.sso-btn svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
}

.sso-btn:hover{
  background:color-mix(in srgb, var(--text-primary) 11%, transparent);
  border-color:var(--border-strong);
}

.sso-btn:active{ transform:scale(.99); }

.sso-school{
  display:block;
  margin-top:2px;
  color:var(--ink-1);
  font-size:.82rem;
  font-weight:580;
  text-align:center;
  text-decoration:none;
}

.sso-school:hover{ color:var(--text-primary); }

.or-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  color:var(--text-muted);
  font-size:.7rem;
  font-weight:620;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.or-row::before,.or-row::after{
  content:"";
  flex:1;
  height:1px;
  background:color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.field{ margin-bottom:12px; }

.field label{
  display:block;
  margin-bottom:6px;
  color:var(--ink-1);
  font-size:.83rem;
  font-weight:580;
}

.field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.field-row label{ margin-bottom:6px; }

.field input{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid var(--field-border);
  border-radius:12px;
  background:var(--field-bg);
  color:var(--text-primary);
  outline:none;
  transition:border-color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast);
}

.field input::placeholder{ color:var(--text-muted); }
.field input:hover{ background:color-mix(in srgb, var(--text-primary) 10%, transparent); }

.field input:focus-visible{
  border-color:var(--field-border-strong);
  background:color-mix(in srgb, var(--text-primary) 12%, transparent);
  box-shadow:0 0 0 4px var(--focus-ring);
}

.field-classcode{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-bottom:0;
  transition:max-height var(--motion-base),opacity var(--motion-base),margin-bottom var(--motion-base);
}

.is-student .field-classcode{ max-height:88px; opacity:1; margin-bottom:12px; }

.forgot{
  color:var(--brand);
  font-size:.8rem;
  font-weight:580;
  text-decoration:none;
}

.forgot:hover{ color:var(--text-primary); }

.btn-cta{
  width:100%;
  min-height:50px;
  margin-top:4px;
  margin-bottom:16px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,var(--brand-0) 0%, var(--brand-1) 100%);
  color:var(--text-primary);
  font-size:1rem;
  font-weight:620;
  cursor:pointer;
  box-shadow:0 12px 28px color-mix(in srgb, var(--brand) 35%, transparent);
  transition:transform var(--motion-fast),filter var(--motion-fast),box-shadow var(--motion-fast);
}

.btn-cta:hover{
  filter:brightness(1.05);
  box-shadow:0 16px 32px color-mix(in srgb, var(--brand) 40%, transparent);
}

.btn-cta:active{ transform:translateY(1px) scale(.992); }

.signup{
  margin-bottom:18px;
  color:var(--ink-2);
  font-size:.85rem;
  line-height:1.5;
  text-align:center;
}

.signup a{
  color:var(--brand);
  font-weight:620;
  text-decoration:none;
}

.signup a:hover{ color:var(--text-primary); }

.trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 10px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.trust-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-muted);
  font-size:.72rem;
  font-weight:580;
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}

.trust-dot{
  width:5px;
  height:5px;
  border-radius:999px;
  background:var(--success);
}

.role-btn:focus-visible,
.sso-btn:focus-visible,
.sso-school:focus-visible,
.forgot:focus-visible,
.btn-cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--focus-ring);
}

@keyframes rise-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:1100px){
  .auth-page{
    grid-template-columns:minmax(0,1fr) minmax(340px,40%);
  }
}

@media (max-width:980px){
  body{ overflow:auto; }
  .auth-page{
    grid-template-columns:1fr;
    min-height:100vh;
  }
  .media-panel{
    position:relative;
    height:auto;
    min-height:42vh;
    border-right:none;
    border-bottom:1px solid var(--line-dark);
  }
  .hero-copy{
    max-width:28rem;
    left:20px;
    right:20px;
    bottom:22px;
  }
  .auth-rail{
    min-height:auto;
    padding:22px 20px 28px;
  }
  .auth-shell{ width:min(100%,360px); }
}

@media (max-width:640px){
  .hero-copy{ display:none; }
  .auth-rail{
    min-height:100vh;
    padding-top:max(24px,env(safe-area-inset-top));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* Extracted inline styles */

/* Extracted inline styles */
.login-1 { display:none; color:var(--danger); font-size:14px; margin-bottom:12px; font-weight:600; }

/* ─── KIMI-AUTH-A: OAuth provider button styles ───────────────────────────── */
.sso-btn[data-sso-provider="google"] {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.sso-btn[data-sso-provider="google"]:hover {
  background: var(--surface-alt);
}

.sso-btn[data-sso-provider="clever"] {
  background: var(--sso-clever);
  color: var(--on-sso);
  border-color: var(--sso-clever);
}
.sso-btn[data-sso-provider="clever"]:hover {
  background: var(--sso-clever-hover);
}

.sso-btn[data-sso-provider="classlink"] {
  background: var(--sso-classlink);
  color: var(--on-sso);
  border-color: var(--sso-classlink);
}
.sso-btn[data-sso-provider="classlink"]:hover {
  background: var(--sso-classlink-hover);
}

.or-row span {
  position: relative;
  background: var(--panel);
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

/* Forgot / reset password cards (moved from inline <style> blocks, 2026-10-04) */
.forgot-shell, .reset-shell { max-width: 26.25rem; margin: 8vh auto; padding: 2rem; }
.forgot-shell h1, .reset-shell h1 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: .5rem; color: var(--text-primary); }
.forgot-shell p.sub, .reset-shell p.sub { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .95rem; }
.forgot-msg, .reset-msg { display: none; margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 0.5rem; font-size: .9rem; }
.forgot-msg.error, .reset-msg.error { display: block; background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.forgot-msg.success, .reset-msg.success { display: block; background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.forgot-shell .field, .reset-shell .field { margin-bottom: 1rem; }
.forgot-shell label, .reset-shell label { display: block; font-size: .85rem; margin-bottom: .35rem; color: var(--text-secondary); }
.forgot-shell input, .reset-shell input { width: 100%; box-sizing: border-box; padding: .65rem .75rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--surface-alt); color: inherit; }
.forgot-shell .btn-cta, .reset-shell .btn-cta { width: 100%; margin-top: .5rem; }
.auth-rail--wide { max-width: 100%; }
.signup--spaced { margin-top: 1.25rem; }