/* ==========================================================================
   TGK v2: sign-in.php
   main.js owns: #auth-card, #tab-indicator(.register-active), .auth-tab-btn(.active),
   .tab-panel(.active), .auth-input(.error), .field-error(.visible), .pw-toggle,
   #explore-cta (GSAP intro), .reveal. Only visuals change here.
   ========================================================================== */

/* Hero: v2 reveals replace the legacy keyframes */
.tgk-signin #hero-breadcrumb, .tgk-signin #hero-eyebrow, .tgk-signin #hero-headline, .tgk-signin #hero-subtext { animation: none; }
.tgk-signin .tgk-page-hero { padding-bottom: clamp(7rem, 5rem + 6vw, 10rem); }

/* Auth section overlaps the hero */
.tgk-signin .si-auth { position: relative; background: var(--tgk-color-ink); padding: 0 var(--tgk-gutter) clamp(4rem, 3rem + 4vw, 7rem); }
.tgk-signin .si-auth__wrap { position: relative; z-index: 20; max-width: 520px; margin: calc(-1 * clamp(4.5rem, 3rem + 4vw, 7rem)) auto 0; }

.tgk-signin .auth-card {
  background: linear-gradient(180deg, rgba(var(--tgk-ink-3-rgb), 0.92), rgba(var(--tgk-ink-2-rgb), 0.97)) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--tgk-color-line-strong) !important; border-radius: var(--tgk-radius-lg) !important;
  box-shadow: var(--tgk-shadow-lg) !important;
}
.tgk-signin .auth-card::before { left: 12%; right: 12%; background: linear-gradient(90deg, transparent, rgba(255, 103, 0, 0.7), transparent); }

/* Tabs */
.tgk-signin .auth-tabs { background: var(--tgk-color-ink); border: 1px solid var(--tgk-color-line); border-radius: var(--tgk-radius-md); padding: 4px; }
.tgk-signin .auth-tab-btn { min-height: 48px; font: 600 0.75rem/1 var(--tgk-font-body) !important; letter-spacing: 0.14em; color: var(--tgk-color-text-muted); }
.tgk-signin .auth-tab-btn.active { color: var(--tgk-color-text-ink); }
.tgk-signin .auth-tab-btn:focus-visible { outline: 2px solid var(--tgk-color-orange); outline-offset: 2px; }
.tgk-signin .tab-indicator { background: var(--tgk-color-orange); border: 0; border-radius: var(--tgk-radius-sm); box-shadow: 0 6px 20px -6px rgba(255, 103, 0, 0.55); }

/* Inputs: icon + toggle spacing on top of the shared v2 input skin */
.tgk-signin .auth-input { padding: 12px 14px 12px 44px !important; }
.tgk-signin .auth-input-icon { left: 16px; font-size: 0.9rem; }
.tgk-signin #forgot-form .auth-input-group, .tgk-signin #reset-form .auth-input-group { display: block; }
.tgk-signin #forgot-form .auth-input-icon { top: 26px; }
.tgk-signin .pw-toggle { right: 4px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--tgk-color-text-subtle); border-radius: var(--tgk-radius-sm); }
.tgk-signin .pw-toggle:hover { color: var(--tgk-color-text); }
.tgk-signin .field-error { font-size: 0.8125rem; color: var(--cx-bad); margin-top: 0.45rem; }
.tgk-signin .auth-checkbox { width: 20px; height: 20px; }
.tgk-signin #panel-signin label.flex, .tgk-signin #panel-register label.flex { min-height: 44px; align-items: center; }
.tgk-signin #panel-register label.items-start { align-items: flex-start; }
.tgk-signin a[onclick^="showForgotPassword"] { display: inline-flex; align-items: center; min-height: 44px; }
.tgk-signin .tab-panel p.text-center button { min-height: 44px; padding: 0 0.25rem; }
.tgk-signin .tab-panel .text-white\/60, .tgk-signin .tab-panel .text-white\/35 { color: var(--tgk-color-text-muted) !important; }

/* Primary action: orange with ink text (styles.css forces submit buttons; match it) */
.tgk-signin .auth-btn-primary {
  min-height: 56px; padding: 0 1.25rem; border-radius: var(--tgk-radius-sm) !important;
  background: var(--tgk-color-orange) !important; color: var(--tgk-color-text-ink) !important; border: 1px solid var(--tgk-color-orange) !important;
  font: 600 0.8125rem/1 var(--tgk-font-body) !important; letter-spacing: 0.14em !important;
}
.tgk-signin .auth-btn-primary::before { display: none; }
.tgk-signin .auth-btn-primary:hover:not(:disabled) { background: #ff7a1f !important; box-shadow: var(--tgk-shadow-glow) !important; transform: none !important; }

/* Trust signals */
.tgk-signin .si-trust { max-width: 760px; margin: 3rem auto 0; }
.tgk-signin .si-trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 559px) { .tgk-signin .si-trust__grid { grid-template-columns: 1fr; } .tgk-signin .trust-signal { flex-direction: row; text-align: left; } }
.tgk-signin .trust-signal { padding: 1.1rem; border-radius: var(--tgk-radius-md); border: 1px solid var(--tgk-color-line); background: rgba(var(--tgk-ink-2-rgb), 0.6); }
.tgk-signin .trust-icon-ring { flex: none; background: var(--tgk-color-orange-soft); border-color: rgba(255, 103, 0, 0.25); }
.tgk-signin .trust-signal p:first-child { font: 500 0.6875rem/1.3 var(--tgk-font-mono) !important; letter-spacing: 0.14em !important; color: var(--tgk-color-text) !important; }
.tgk-signin .trust-signal p + p { color: var(--tgk-color-text-subtle) !important; font-size: 0.8125rem; }

/* Explore CTA */
.tgk-signin .signin-cta-bg { background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(255, 103, 0, 0.08), transparent 70%), var(--tgk-color-ink-2); border-top: 1px solid var(--tgk-color-line); padding-block: var(--tgk-section-y) !important; }
.tgk-signin .signin-cta-bg h2 { font-family: var(--tgk-font-display) !important; font-weight: 700 !important; font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem) !important; line-height: 0.95 !important; letter-spacing: 0.005em !important; }
.tgk-signin .signin-cta-bg h2 span { color: var(--tgk-accent-text) !important; }
.tgk-signin .signin-cta-bg p { color: var(--tgk-color-text-muted) !important; font-size: var(--tgk-fs-lead) !important; }
.tgk-signin .signin-cta-bg .section-eyebrow i { display: none; }
.tgk-signin .signin-cta-bg .mt-14 > div { color: var(--tgk-color-text-subtle) !important; font: 500 0.6875rem/1.3 var(--tgk-font-mono) !important; letter-spacing: 0.14em !important; }

@media (max-width: 400px) { .tgk-signin .auth-card { padding: 1.25rem !important; } .tgk-signin .auth-tab-btn { padding: 0 0.5rem; letter-spacing: 0.08em; } }

/* Light mode (the colors above follow the design tokens; only the heavy dark shadow needs a light value) */
html[data-theme="light"] .tgk-signin .auth-card { box-shadow: 0 24px 60px -34px rgba(17, 22, 28, 0.3) !important; }