/* Spectra Auth
   Local CSS owns auth-specific card, form, tab, provider, and profile details.
   Shared page shell/header/footer/background behavior comes from site.tokens.css and site.components.css.
*/

body.sv-auth{
  display:grid;
  grid-template-rows:1fr auto;
}

body.sv-auth .sv-authMain{
  display:grid;
  align-items:center;
  justify-items:center;
  inline-size:min(100%, var(--sv-page-max, 76rem));
  min-block-size:auto;
  margin-inline:auto;
  padding-block:clamp(var(--sp-6), 7svh, var(--sp-10)) var(--sp-5);
  padding-inline:calc(var(--sv-page-pad, 2rem) / 2);
}

body.sv-auth .sv-authStack{
  display:grid;
  gap:var(--sp-4);
  justify-items:center;
  inline-size:min(100%, var(--sv-auth-card-w, 44rem));
  margin-inline:auto;
}

body.sv-auth .sv-authBrand{
  inline-size:100%;
  justify-self:stretch;
  justify-content:flex-start;
  gap:var(--sp-2);
  color:var(--sp-text);
  text-decoration:none;
}

body.sv-auth .sv-authBrandLogo{
  inline-size:var(--sp-6);
  block-size:var(--sp-6);
}

body.sv-auth .sv-authBrandText{
  color:color-mix(in srgb, var(--sp-text) 92%, white);
  font-weight:var(--sp-fw-bold);
  letter-spacing:calc(var(--sp-letter-tight) / 2);
}

body.sv-auth .sv-authCard{
  inline-size:min(100%, var(--sv-auth-card-w, 44rem));
  justify-self:center;
  min-inline-size:0;
  border-color:var(--sv-auth-card-border, color-mix(in srgb, var(--sp-accent) 20%, transparent));
  background:var(--sv-auth-card-bg, linear-gradient(180deg, color-mix(in srgb, var(--sp-surface) 92%, var(--sp-accent) 4%), color-mix(in srgb, var(--sp-surface) 84%, black 12%)));
  box-shadow:var(--sv-auth-card-shadow, 0 var(--sp-8) calc(var(--sp-10) + var(--sp-8)) color-mix(in srgb, black 42%, transparent));
}

body.sv-auth .sv-authCard__body{
  display:grid;
  gap:var(--sp-5);
  padding:var(--sp-6);
}

body.sv-auth .sv-authSwitch{
  display:grid;
  grid-template-columns:repeat(2, minmax(var(--sp-0), 1fr));
  gap:var(--sp-1);
  padding:var(--sp-1);
  border:var(--sp-border-1);
  border-radius:0;
  background:color-mix(in srgb, var(--sp-bg) 50%, transparent);
}

body.sv-auth .sv-authSwitchBtn{
  min-block-size:var(--sp-9);
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--sp-text-muted);
  font:inherit;
  font-weight:var(--sp-fw-semibold);
  cursor:pointer;
}

body.sv-auth .sv-authSwitchBtn.is-active{
  background:color-mix(in srgb, var(--sp-accent) 18%, var(--sp-surface) 82%);
  color:var(--sp-text);
  box-shadow:inset var(--sp-0) var(--sp-border-w-1) var(--sp-0) color-mix(in srgb, white 10%, transparent);
}

body.sv-auth .sv-authStatus{
  margin:var(--sp-0);
  padding:var(--sp-3);
  border:var(--sp-border-1);
  border-radius:var(--sp-radius-3);
  background:color-mix(in srgb, var(--sp-info) 10%, transparent);
}

body.sv-auth .sv-authStatus.is-error{
  border-color:color-mix(in srgb, #ff6b7a 38%, transparent);
  background:color-mix(in srgb, #ff6b7a 12%, transparent);
  color:color-mix(in srgb, #ffd7dd 90%, var(--sp-text) 10%);
}

body.sv-auth .sv-authStatus.is-success{
  border-color:color-mix(in srgb, var(--sp-success) 42%, transparent);
  background:color-mix(in srgb, var(--sp-success) 12%, transparent);
  color:color-mix(in srgb, var(--sp-success) 38%, var(--sp-text) 62%);
}

body.sv-auth .sv-authPanel,
body.sv-auth .sv-providerStack,
body.sv-auth .sv-authForm{
  display:grid;
  gap:var(--sp-5);
}

body.sv-auth .sv-authPanel[hidden]{
  display:none;
}

body.sv-auth .sv-authForm{
  gap:var(--sp-4);
}

body.sv-auth .sv-providerBtn{
  inline-size:100%;
  justify-content:center;
  gap:var(--sp-3);
}

body.sv-auth .sv-providerMark{
  display:inline-grid;
  place-items:center;
  inline-size:var(--sp-5);
  block-size:var(--sp-5);
}

body.sv-auth .sv-providerIcon{
  display:block;
  inline-size:var(--sp-5);
  block-size:var(--sp-5);
}

body.sv-auth .sv-authDivider{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  color:var(--sp-text-muted);
  font-size:var(--sp-fs-2);
}

body.sv-auth .sv-authDivider::before,
body.sv-auth .sv-authDivider::after{
  content:"";
  flex:1;
  border-top:var(--sp-border-1);
}

body.sv-auth .sv-authLabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  color:var(--sp-text);
  font-size:var(--sp-fs-2);
  font-weight:var(--sp-fw-semibold);
}

body.sv-auth .sv-authOptional{
  color:var(--sp-text-muted);
  font-weight:var(--sp-fw-regular);
}

body.sv-auth .sv-authOptions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  color:var(--sp-text-muted);
  font-size:var(--sp-fs-2);
}

body.sv-auth .sv-authCheck{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
}

body.sv-auth .sv-authLink{
  color:var(--sp-accent);
  text-decoration:none;
}

body.sv-auth .sv-authLink:hover{
  color:var(--sp-text);
}

body.sv-auth .sv-authSubmit{
  inline-size:100%;
  justify-content:center;
}

body.sv-auth .sv-joinNote,
body.sv-auth .sv-authCopy{
  margin:var(--sp-0);
  font-size:var(--sp-fs-2);
  line-height:var(--sp-lh-2);
}

body.sv-auth .sv-profileHeader{
  display:grid;
  gap:var(--sp-2);
}

body.sv-auth .sv-profileTitle{
  margin:var(--sp-0);
  color:var(--sp-text);
  font-size:var(--sp-fs-5);
  line-height:var(--sp-lh-1);
}

body.sv-auth .sv-authBadge{
  justify-self:start;
}

body.sv-auth > .sp-footer--minimal{
  width:auto;
  margin:0 auto var(--sp-5);
  border:0;
  background:transparent;
  box-shadow:none;
}

body.sv-auth > .sp-footer--minimal .sp-footer__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  width:auto;
  min-height:auto;
  padding:0;
}

body.sv-auth > .sp-footer--minimal .sp-footer__meta,
body.sv-auth > .sp-footer--minimal .sp-footer__legalLinks{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  margin:0;
}

@media (max-width:48rem){
  body.sv-auth .sv-authMain{
    padding-block:var(--sp-5) var(--sp-4);
    padding-inline:calc(var(--sv-page-pad, 2rem) / 2);
  }

  body.sv-auth .sv-authCard__body{
    padding:var(--sp-5);
  }
}

@media (max-width:40rem){
  body.sv-auth .sv-authOptions{
    align-items:flex-start;
    flex-direction:column;
  }

  body.sv-auth > .sp-footer--minimal .sp-footer__inner{
    flex-wrap:wrap;
    row-gap:var(--sp-2);
  }
}