/* Backrooms sign-in language, shared by the client gate and wp-login.php. */
body.tgc-auth-page,
body.login { background: #fff; color: #0a0a0a; font-family: 'Space Grotesk', Arial, sans-serif; }
body.tgc-auth-page::after,
body.login::after { content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tgc-auth-dots { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.tgc-auth-dots canvas { display: block; }

/* Give the portal gate the same clean canvas as the standalone Backrooms gate. */
body.tgc-auth-page .wp-site-blocks > header,
body.tgc-auth-page .wp-site-blocks > footer { display: none; }
body.tgc-auth-page .wp-site-blocks,
body.tgc-auth-page .wp-site-blocks > main,
body.tgc-auth-page .wp-site-blocks > main > .wp-block-group,
body.tgc-auth-page .entry-content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
body.tgc-auth-page .wp-site-blocks { position: relative; z-index: 1; }
#tg-client-portal.tgc-auth { --foil: url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif'), linear-gradient(100deg,#ffd6e8 0%,#ffe9d6 20%,#fdffd6 40%,#d6ffe4 60%,#d6ecff 80%,#e6d6ff 100%); display: grid; align-items: safe center; justify-items: center; min-height: 100vh; min-height: 100dvh; width: 100%; max-width: none; margin: 0; padding: 56px 16px 24px; background: transparent; color: #0a0a0a; font: 16px/1.5 'Space Grotesk', Arial, sans-serif; }

#tg-client-portal.tgc-auth .tgc-gate,
body.login #login { --foil: url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif'), linear-gradient(100deg,#ffd6e8 0%,#ffe9d6 20%,#fdffd6 40%,#d6ffe4 60%,#e6d6ff 100%); position: relative; z-index: 1; box-sizing: border-box; width: min(460px, 100%); margin: 0; padding: clamp(28px, 6vw, 44px); border: 1px solid rgba(10,10,10,.09); border-radius: 0; background: rgba(255,255,255,.24); -webkit-backdrop-filter: blur(3px) saturate(1.4); backdrop-filter: blur(3px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 80px -30px rgba(10,10,10,.28), 0 2px 6px rgba(10,10,10,.04); }
#tg-client-portal.tgc-auth .tgc-gate::before,
body.login #login::before { content: ''; position: absolute; top: -1px; right: -1px; left: -1px; height: 3px; background: var(--foil); background-size: cover, 200% 200%; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #tg-client-portal.tgc-auth .tgc-gate, body.login #login { background: rgba(255,255,255,.92); }
}

#tg-client-portal.tgc-auth .tgc-auth-kicker,
body.login .tgc-auth-kicker { margin: 0 0 30px; color: #5c5c5c; font: 400 11px/1.4 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; }
#tg-client-portal.tgc-auth .tgc-gate-title,
body.login .tgc-auth-heading h1 { margin: 0 0 30px; color: #0a0a0a; font: 900 clamp(48px, 11vw, 78px)/.88 Archivo, Arial, sans-serif; letter-spacing: -.04em; text-transform: uppercase; overflow-wrap: anywhere; }
#tg-client-portal.tgc-auth .tgc-gate-title em,
body.login .tgc-auth-heading h1 em { display: block; color: transparent; font-style: italic; background: var(--foil); background-size: cover, 200% 200%; background-position: center; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .8px rgba(10,10,10,.5); }
#tg-client-portal.tgc-auth .tgc-gate-title-long { font-size: clamp(32px, 7vw, 50px); line-height: 1; }
#tg-client-portal.tgc-auth .tgc-gate-text { margin: -8px 0 24px; color: #5c5c5c; font-size: 14px; line-height: 1.5; }

/* Portal form supplied by wp_login_form(). */
#tg-client-portal.tgc-auth #loginform { display: grid; gap: 20px; }
#tg-client-portal.tgc-auth #loginform p { margin: 0; }
#tg-client-portal.tgc-auth #loginform label,
body.login #login form label { display: block; margin: 0 0 4px; color: #0a0a0a; font: 700 10px/1.4 Archivo, Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
#tg-client-portal.tgc-auth #loginform input:not([type=checkbox]):not([type=hidden]):not([type=submit]),
body.login #login form input:not([type=checkbox]):not([type=hidden]):not([type=submit]) { display: block; box-sizing: border-box; width: 100%; min-height: 42px; margin: 0; padding: 8px 0 10px; border: 0; border-bottom: 1px solid #6b6b6b; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: #0a0a0a; font: 700 20px/1.3 Archivo, Arial, sans-serif; caret-color: #0a0a0a; }
#tg-client-portal.tgc-auth #loginform input:not([type=checkbox]):not([type=hidden]):not([type=submit]):focus,
body.login #login form input:not([type=checkbox]):not([type=hidden]):not([type=submit]):focus { border-bottom: 2px solid #0a0a0a; padding-bottom: 9px; }
#tg-client-portal.tgc-auth #loginform .login-remember label,
body.login #login form .forgetmenot label { display: flex; align-items: center; gap: 10px; margin: 0; color: #5c5c5c; font: 400 14px/1.4 'Space Grotesk', Arial, sans-serif; letter-spacing: 0; text-transform: none; }
#tg-client-portal.tgc-auth input[type=checkbox],
body.login #login input[type=checkbox] { -webkit-appearance: checkbox; appearance: auto; width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0; border: 1px solid #0a0a0a; border-radius: 0; accent-color: #0a0a0a; }
/* WordPress's login screen hides the real checkbox (appearance: none) and draws its tick in ::before.
   We turn that tick off, so the real box is brought back above; without it the box ticks invisibly. */
#tg-client-portal.tgc-auth input[type=checkbox]:checked::before,
body.login #login input[type=checkbox]:checked::before { content: none; }
#tg-client-portal.tgc-auth #loginform input[type=submit],
#tg-client-portal.tgc-auth .tgc-gate .deliverable-btn,
body.login #login form :is(input[type=submit],button[type=submit]) { display: flex; align-items: center; justify-content: center; float: none; box-sizing: border-box; width: 100%; min-height: 54px; margin: 0; padding: 0 16px; border: 1px solid #0a0a0a; border-radius: 0; background: var(--foil); background-size: cover, 200% 200%; color: #0a0a0a; box-shadow: none; text-decoration: none; text-shadow: none; font: 800 12px/1 Archivo, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
#tg-client-portal.tgc-auth #loginform input[type=submit]:hover,
#tg-client-portal.tgc-auth .tgc-gate .deliverable-btn:hover,
body.login #login form :is(input[type=submit],button[type=submit]):hover { transform: translateY(-2px); filter: saturate(1.12); }
#tg-client-portal.tgc-auth :focus-visible,
body.login #login :focus-visible { outline: 2px solid #0a0a0a; outline-offset: 4px; }
#tg-client-portal.tgc-auth .tgc-gate-small { margin: 20px 0 0; }
#tg-client-portal.tgc-auth .tgc-gate-small a,
body.login #login :is(#nav,#backtoblog) a { color: #0a0a0a; font: 500 12px/1.5 'Space Grotesk', Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
#tg-client-portal.tgc-auth .tgc-gate-error { margin: 0 0 20px; color: #a0201a; font-size: 13px; }

/* WordPress login, lost password, set password, expired link, and confirmation. */
body.login { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 24px 16px; box-sizing: border-box; }
body.login #login > h1:first-child { display: none; }
body.login .tgc-auth-heading h1 { text-align: left; font-size: clamp(40px, 8.5vw, 64px); }
body.login #login form { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.login #login form p { margin-bottom: 20px; }
body.login #login .message,
body.login #login #login_error,
body.login #login .notice { box-sizing: border-box; margin: 0 0 20px; padding: 12px 14px; border: 1px solid rgba(10,10,10,.18); border-left: 2px solid #0a0a0a; background: rgba(255,255,255,.75); color: #383838; font: 400 13px/1.5 'Space Grotesk', Arial, sans-serif; box-shadow: none; }
body.login #login #login_error { border-left-color: #a0201a; }
body.login #login form .submit { margin: 20px 0 0; padding: 0; }
body.login #login form .forgetmenot { display: flex; align-items: center; gap: 10px; float: none; clear: both; margin: 20px 0 0; }
body.login #login form .forgetmenot label { display: block; margin: 0; }
body.login #login :is(#nav,#backtoblog) { margin: 16px 0 0; padding: 0; }
body.login #login #backtoblog { margin-top: 8px; }
body.login #login .privacy-policy-page-link { margin: 16px 0 0; }
body.login #login .privacy-policy-page-link a { color: #0a0a0a; font-size: 12px; }
body.login #login .wp-pwd { display: flex; align-items: center; gap: 8px; }
body.login #login .wp-pwd input { flex: 1; min-width: 0; }
body.login #login .wp-pwd button { flex: none; width: 44px; min-height: 44px; border: 1px solid #6b6b6b; border-radius: 0; background: transparent; color: #0a0a0a; }
body.login #login .wp-pwd button .text { display: none; }
body.login #login .wp-pwd button:hover { background: #fff; }

@media (max-width: 520px) {
  #tg-client-portal.tgc-auth .tgc-gate-title { font-size: clamp(48px, 13vw, 70px); }
}
@media (prefers-reduced-motion: reduce) {
  #tg-client-portal.tgc-auth #loginform input[type=submit],
  body.login #login form :is(input[type=submit],button[type=submit]) { transition: none; }
}

/* Keyboard focus on the sign-in boxes: the thicker underline alone is easy to
   miss, so a keyboard user also gets the same ink box as every other control. */
#tg-client-portal.tgc-auth #loginform input:not([type=checkbox]):not([type=hidden]):not([type=submit]):focus-visible,
body.login #login form input:not([type=checkbox]):not([type=hidden]):not([type=submit]):focus-visible { outline: 2px solid #0a0a0a; outline-offset: 4px; }