/* =========================================================================
   Pelagos · auth group — auth/*, tfa/*, verify-email, maintenance, 403, 404
   Reads band tokens only; layouts/auth and layouts/error own the page frame.
   ========================================================================= */

/* ---- key art: the cover crop lands a pixel cloud right on the art/form seam, where it read as a stray grey bar;
   the art's right edge fades into the side panel so nothing is cut hard against the form --------------------- */
.ss-auth-side-art { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }

/* ---- auth box: heading, form rhythm, social stack, switch row ------------ */
.ss-auth-head { margin-bottom: clamp(1rem, 3vh, 1.9rem); }
.ss-auth-box .ss-auth-head h1 { margin: 0 0 .7rem !important; }
.ss-auth-head p { margin: 0; color: var(--band-muted); font-size: 1.04rem; max-width: 26rem; }
.ss-auth-head p strong { color: var(--band-fg); }
.ss-auth-box > .alert { margin-bottom: 1.5rem; }
.ss-auth-form .form-control-lg { font-size: 1rem; padding-block: clamp(.55rem, 1.25vh, .8rem); }
/* field rhythm follows the viewport height so login and register fit a laptop screen without a page scroll */
.ss-auth-form .mb-3 { margin-bottom: clamp(.65rem, 1.9vh, 1rem) !important; }
.ss-auth-form .row.g-3 { --bs-gutter-y: clamp(.65rem, 1.9vh, 1rem); }
.ss-auth-form .form-label { margin-bottom: .35rem; }
/* padding-box clip: the translucent --band-line border must read the same over the addon as over the input */
.ss-auth-form .input-group-flat .input-group-text { padding-inline: .9rem; background-clip: padding-box; }
.ss-pass-toggle { color: var(--band-muted); font-size: 1.15rem; line-height: 1; display: inline-flex; }
.ss-pass-toggle:hover { color: var(--band-fg); }
.ss-auth-form .form-check { margin: .25rem 0 0; }
.ss-auth-captcha { margin-top: 1.1rem; display: flex; }
.ss-auth-form .form-footer { margin-top: clamp(1rem, 2.6vh, 1.6rem); }
.ss-auth-box .btn-lg { --bs-btn-font-size: 1rem; }
.ss-auth-box .hr-text { margin: clamp(1rem, 2.8vh, 1.75rem) 0 clamp(.8rem, 2vh, 1.25rem); }
.ss-auth-social { display: grid; gap: .6rem; }
.ss-auth-social .btn { --bs-btn-padding-y: .72rem; }
.ss-auth-social img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.ss-auth-switch { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-top: clamp(1rem, 3vh, 2.1rem); padding-top: clamp(.8rem, 2vh, 1.35rem); border-top: 1px solid var(--band-line); color: var(--band-muted); font-weight: 500; }
.ss-auth-switch .ss-link-arrow { font-size: .95rem; }

/* status mark (chamfered tile shared with empty states) */
.ss-auth-mark { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 1.4rem; background: var(--ss-accent); color: var(--ss-on-accent); font-size: 1.85rem; border-radius: 14px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .22); }
.ss-auth-mark--danger { background: var(--ss-danger); color: var(--ss-paper); }
/* below lg the mobile brand sits right above the heading; a second accent tile under the logo reads as a
   duplicate mark, so only the meaningful danger tile stays */
@media (max-width: 991.98px) { .ss-auth-mark:not(.ss-auth-mark--danger) { display: none; } }
.ss-auth-message { margin: 0 0 1.75rem; padding: 1rem 1.15rem; background: var(--band-card); border: 1px solid var(--band-card-line); border-left: 4px solid var(--ss-danger); border-radius: var(--ss-r); font-weight: 500; overflow-wrap: anywhere; }
.ss-auth-actions { display: grid; gap: .6rem; }

/* ---- TFA: one-time code field, QR tile, secret key ------------------------ */
.ss-otp { font-family: var(--ss-display); font-weight: 800; font-size: 1.554rem !important; letter-spacing: -.02em; text-indent: .32em; text-align: center; padding: .55rem .9rem !important; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.ss-otp::-webkit-outer-spin-button, .ss-otp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-otp::placeholder { letter-spacing: .32em; opacity: .35; }
.ss-tfa-scan { display: grid; grid-template-columns: 148px 1fr; gap: 1.25rem; align-items: center; padding: 1rem; margin-bottom: 1.6rem; background: var(--band-card); border: 1px solid var(--band-card-line); border-radius: var(--ss-r); box-shadow: var(--ss-shadow-card); }
/* a QR code needs a pure white quiet zone to scan in either theme */
.ss-tfa-qr { background: white; padding: 8px; border-radius: var(--ss-r-sm); line-height: 0; box-shadow: inset 0 0 0 1px rgba(14, 26, 36, .08); }
.ss-tfa-qr img { width: 100%; height: auto; image-rendering: pixelated; }
.ss-tfa-key { font-size: .93rem; color: var(--band-muted); overflow-wrap: anywhere; }
.ss-tfa-key strong { display: block; margin-top: .55rem; padding: .5rem .65rem; background: var(--band-sunk); border-radius: var(--ss-r-xs); color: var(--band-fg); font-family: var(--ss-display); font-weight: 800; font-size: .962rem; letter-spacing: -.02em; line-height: 1.15; word-break: break-all; user-select: all; }
@media (max-width: 419.98px) { .ss-tfa-scan { grid-template-columns: 1fr; justify-items: center; text-align: center; } .ss-tfa-qr { width: 168px; } }

/* ---- verify-email (layouts/main) ------------------------------------------ */
.ss-verify { max-width: 860px; margin-inline: auto; }
.ss-verify-card { display: grid; grid-template-columns: 260px 1fr; overflow: hidden; }
.ss-verify-art { position: relative; isolation: isolate; overflow: hidden; background: var(--tone, var(--ss-tone-navy)); color: var(--ss-bone); display: grid; place-items: center; min-height: 260px; }
.ss-verify-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 55% at 50% 50%, rgba(255, 255, 255, .18), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px); }
.ss-verify-art :is(.ph-bold, .ph-fill) { font-size: 5.5rem; line-height: 1; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .3)); }
.ss-verify-body { padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); min-width: 0; }
.ss-verify-title { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.48rem, 1.11rem + 1.184vw, 2.072rem); line-height: var(--ss-display-lh); margin: 0 0 1rem; }
.ss-verify-sent { font-size: 1.08rem; font-weight: 500; margin-bottom: .6rem; overflow-wrap: anywhere; }
.ss-verify-sent strong { font-weight: 750; background: linear-gradient(transparent 62%, var(--ss-accent-soft) 62%); }
.ss-verify-help { color: var(--band-muted); margin: 0; }
.ss-verify-again { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--band-card-line); color: var(--band-muted); font-weight: 600; }
@media (max-width: 767.98px) { .ss-verify-card { grid-template-columns: 1fr; } .ss-verify-art { min-height: 150px; } .ss-verify-art :is(.ph-bold, .ph-fill) { font-size: 4rem; } }

/* ---- error layout: 403 / 404 / maintenance -------------------------------- */
.ss-error-title { margin: 0 0 .9rem; }
.ss-error-headline { font-family: var(--ss-display); font-weight: 800; font-size: clamp(3.256rem, 1.776rem + 5.92vw, 6.216rem) !important; line-height: .85 !important; margin: 0 0 1.1rem; overflow-wrap: anywhere; }
.ss-error-ip { margin: -.5rem 0 1.75rem; max-width: 28rem; }
.ss-error-text { max-width: 34rem; margin: 0 0 2rem; }
.ss-error-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 575.98px) { .ss-error-cta .btn { flex: 1 1 auto; } .ss-error h1 { font-size: 1.628rem; } }
/* phones: the password pair stays side by side, so register fits one screen like login */
@media (max-width: 575.98px) {
	.ss-auth-form .row.g-3 { --bs-gutter-x: .6rem; }
	.ss-auth-form .row.g-3 .form-label { font-size: .86rem; white-space: nowrap; }
	.ss-auth-foot { flex-wrap: nowrap; gap: .6rem; font-size: .8rem; }
	.ss-auth-foot > *, .ss-auth-foot a { white-space: nowrap; }
}