/* SC4 Auth Portal (Stage 3) — Layout + polish */
.sc4-auth-portal{
  width:min(1120px, calc(100% - 32px));
  margin:28px auto;
  overflow-x:hidden;
}

/*
 * Containment + sizing
 * Prevent 100%-width inputs/buttons with padding/borders from overflowing
 * their containers on mobile.
 */
.sc4-auth-portal,
.sc4-auth-portal *{
  box-sizing:border-box;
}

/* Centered single-card mode (login + verified) */
.sc4-auth-portal.sc4-auth-portal-center{
  width:min(560px, calc(100% - 32px));
  min-height:calc(100vh - 180px);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sc4-auth-card{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/*
 * Use the existing Abrasive release-card visual system for auth.
 * We keep the auth-specific sizing + containment, but borrow the
 * same classnames so it looks native to the site.
 */
.sc4-auth-card.scd-release-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  /* Dark-mode panel so the portal reads above busy backgrounds */
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sc4-auth-body.scd-release-body{
  padding: 18px 18px 20px;
  gap: 10px;
}

/* Crack divider (subset of Discography card body styling) */
.sc4-auth-card.scd-release-card .sc4-auth-body.scd-release-body::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background: rgba(255,0,0,0.15);
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="40"><path d="M0 20 L50 20 L60 10 L90 30 L120 5 L150 35 L200 18 L260 25 L320 7 L380 28 L420 12 L480 20 L600 20" stroke="white" stroke-width="2" fill="none"/></svg>');
  mask-size: cover;
}

/* Card title (subset of Discography release title styling) */
.sc4-auth-title{
  margin: 0 0 4px;
}

.sc4-auth-title span{
  position: relative;
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.25px;
  color: var(--abrs-white, #fff);
}

.sc4-auth-title span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width: 46px;
  height: 2px;
  background: var(--accent, var(--abrs-red, #e31b23));
  box-shadow: 0 0 12px var(--accent, rgba(255,0,0,0.6));
  border-radius: 2px;
}

/* Primary actions stack */
.sc4-auth-primary{ margin:0 0 14px; }
.sc4-auth-btnstack{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.sc4-auth-btnstack .sc4-btn{ width:100%; }

/* Ensure stacked actions read as solid buttons over busy backgrounds */
.sc4-auth-btnstack .sc4-btn{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.sc4-auth-btnstack .sc4-btn:hover{
  background: rgba(255,255,255,.14);
}
.sc4-auth-btnstack .sc4-btn[disabled],
.sc4-auth-btnstack .sc4-btn[aria-disabled="true"]{
  opacity: .55;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* Divider */
.sc4-auth-or{
  position:relative;
  margin:18px 0 14px;
  text-align:center;
  opacity:.85;
}
.sc4-auth-or:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(255,255,255,.14);
}
.sc4-auth-or span{
  position:relative;
  display:inline-block;
  padding:0 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
}

/* Verified page button row */
.sc4-auth-btnrow{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

/* (Header/body wrappers removed in Stage 3.2; release-card body owns spacing) */

.sc4-auth-flash{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  margin:0 0 14px;
}

/* Google block (Site Kit shortcode output is a little opinionated) */
.sc4-auth-google{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 14px;
  align-items:center;
  width:100%;
  overflow-x:hidden;
}
.sc4-auth-google > *{
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.sc4-auth-google .goog-inline-block,
.sc4-auth-google iframe,
.sc4-auth-google button{
  max-width:100% !important;
  width:100% !important;
}

/* Google Sign-In often injects a fixed-width iframe; contain + scale on mobile */
@media (max-width: 520px){
  .sc4-auth-google iframe{
    transform: scale(.94);
    transform-origin: center;
  }
}

/* Split layout */
.sc4-auth-split{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
  margin-top:6px;
}

.sc4-auth-col{
  min-width:0;
}

.sc4-auth-col-right{
  position:relative;
  padding-left:32px;
}

.sc4-auth-col-right:before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:1px;
  background:rgba(255,255,255,.12);
}

/* Headings */
.sc4-auth-panel-h,
.sc4-auth-alt-h{
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  margin:0 0 12px;
  opacity:.95;
}

/* Form spacing */
.sc4-auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sc4-auth-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  opacity:.92;
}

.sc4-auth-input{
  width:100%;
  display:block;
  height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:inherit;
}

.sc4-auth-input:focus{
  outline:none;
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
}

.sc4-auth-captcha{
  margin-top:2px;
  display:flex;
  justify-content:flex-start;
}
.sc4-auth-captcha .h-captcha,
.sc4-auth-captcha .cf-turnstile{
  max-width:100%;
}
.sc4-auth-captcha iframe{
  max-width:100%;
}

/* Submit buttons */
.sc4-auth-submit,
.sc4-auth-submit button,
.sc4-auth-submit input[type="submit"],
.sc4-auth-submit .sc4-btn{
  width:100%;
  min-height:44px;
  border-radius:14px;
}

/* Muted helper copy */
.sc4-auth-muted,
.sc4-auth-muted p{
  font-size:12px;
  opacity:.78;
  margin:0;
  margin-top:10px;
  line-height:1.45;
}

.sc4-auth-links{
  margin-top:14px;
  font-size:13px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* Button that looks like a link (used for "Use email link instead"). */
.sc4-auth-linkbtn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
  opacity:.9;
}
.sc4-auth-linkbtn:hover{ opacity:1; }
.sc4-auth-sep{ display:none; }

/* Kill the old horizontal divider in split mode (it makes things feel mashed) */
.sc4-auth-divider{ display:none; }

/* Small screens */
@media (max-width: 980px){
  .sc4-auth-split{
    grid-template-columns: 1fr;
    gap:18px;
  }
  .sc4-auth-col-right{
    padding-left:0;
    padding-top:6px;
  }
  .sc4-auth-col-right:before{
    display:none;
  }
  .sc4-auth-captcha{
    justify-content:flex-start;
    overflow-x:auto;
  }
}

/*
 * SC4 Auth Portal — Visibility + contrast hardening
 *
 * Why:
 * - On some themes/pages the auth portal inherits low-contrast text colors.
 * - Release-card styling is intentionally subtle; auth needs higher contrast.
 *
 * Scope:
 * - Only affects auth portal elements.
 */
.sc4-auth-card.scd-release-card{
  background: rgba(0,0,0,.74);
  border-color: rgba(255,255,255,.14);
}

.sc4-auth-body.scd-release-body{
  color: rgba(255,255,255,.92);
}

.sc4-auth-label{
  color: rgba(255,255,255,.92);
  opacity: 1;
}

.sc4-auth-input{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.sc4-auth-input::placeholder{
  color: rgba(255,255,255,.55);
}

.sc4-auth-btnstack .sc4-btn{
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Primary CTA: Email login link */
.sc4-auth-btnstack .sc4-btn:not(.sc4-btn-secondary){
  background: rgba(227,27,35,.86);
  border-color: rgba(227,27,35,.95);
}
.sc4-auth-btnstack .sc4-btn:not(.sc4-btn-secondary):hover{
  background: rgba(227,27,35,.94);
}

/* Secondary CTAs */
.sc4-auth-btnstack .sc4-btn.sc4-btn-secondary{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.sc4-auth-btnstack .sc4-btn.sc4-btn-secondary:hover{
  background: rgba(255,255,255,.16);
}

.sc4-auth-btnstack .sc4-btn[disabled],
.sc4-auth-btnstack .sc4-btn[aria-disabled="true"]{
  color: rgba(255,255,255,.55);
}

.sc4-auth-muted{
  color: rgba(255,255,255,.72);
  opacity: 1;
}

/* Approve-on-phone pending state */
.sc4-auth-wait{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.sc4-auth-status{
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .2px;
}