/*
 * TrebleChasersODL — Login Pristine V1
 *
 * Presentation only.
 * Existing authentication/runtime JS remains unchanged.
 */

body[data-page="login"] {
  --login-gold: #c89a2b;
  --login-gold-deep: #9e7419;
  --login-gold-soft: rgba(200, 154, 43, 0.15);
  --login-cyan: #129fc7;
  --login-cyan-soft: rgba(18, 159, 199, 0.12);
  --login-ink: #18202a;
  --login-muted: #696f76;
  --login-line: #ded7c8;
  --login-warm-white: #fbfaf6;
  --login-panel: #ffffff;

  margin: 0;
  color: var(--login-ink);
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(200, 154, 43, 0.10),
      transparent 31%
    ),
    radial-gradient(
      circle at 91% 15%,
      rgba(18, 159, 199, 0.07),
      transparent 28%
    ),
    #f5f2ea !important;
}

body[data-page="login"] .signup-page {
  min-height: 100vh;
  color: var(--login-ink);
  background: transparent !important;
}

body[data-page="login"] .signup-header {
  position: relative;
  z-index: 10;
  border-bottom:
    1px solid rgba(158, 116, 25, 0.34);
  background:
    rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 8px 22px rgba(33, 31, 24, 0.045);
  backdrop-filter: blur(14px);
}

body[data-page="login"] .signup-header-inner {
  min-height: 72px;
}

body[data-page="login"] .signup-brand,
body[data-page="login"] .signup-navigation a,
body[data-page="login"] .signup-home-link {
  color: var(--login-ink) !important;
}

body[data-page="login"] .signup-brand-copy strong {
  color: #181c22 !important;
}

body[data-page="login"] .signup-brand-copy span {
  color: var(--login-gold-deep) !important;
}

body[data-page="login"] .signup-navigation a,
body[data-page="login"] .signup-home-link {
  border-color:
    rgba(158, 116, 25, 0.24) !important;
  background:
    rgba(255, 255, 255, 0.78) !important;
}

body[data-page="login"] .signup-navigation a:hover,
body[data-page="login"] .signup-home-link:hover {
  border-color:
    rgba(200, 154, 43, 0.72) !important;
  background:
    #fff !important;
}

body[data-page="login"] .signup-intro {
  position: relative;
  overflow: hidden;
  color: var(--login-ink) !important;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(251, 250, 246, 0.98)
    ) !important;
  border-right:
    1px solid rgba(158, 116, 25, 0.22);
}

body[data-page="login"] .signup-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background:
    linear-gradient(
      180deg,
      #e4c46c,
      var(--login-gold),
      #8e6715
    );
}

body[data-page="login"] .signup-intro::after {
  content: "";
  position: absolute;
  top: 12%;
  right: -110px;
  width: 270px;
  height: 270px;
  border:
    1px solid rgba(18, 159, 199, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(200, 154, 43, 0.035),
    0 0 0 62px rgba(18, 159, 199, 0.025);
  pointer-events: none;
}

body[data-page="login"] .signup-intro-content {
  position: relative;
  z-index: 2;
}

body[data-page="login"] .eyebrow {
  color: var(--login-gold-deep) !important;
  letter-spacing: 0.16em;
}

body[data-page="login"] #loginTitle {
  color: #171c22 !important;
  text-shadow: none !important;
}

body[data-page="login"] #loginTitle span {
  color: var(--login-gold-deep) !important;
  text-shadow: none !important;
}

body[data-page="login"] .signup-intro-copy {
  max-width: 590px;
  color: var(--login-muted) !important;
}

body[data-page="login"] .signup-intro-watermark {
  color:
    rgba(158, 116, 25, 0.045) !important;
  text-shadow: none !important;
}

body[data-page="login"] .signup-benefits article {
  border:
    1px solid rgba(158, 116, 25, 0.20) !important;
  border-radius: 10px !important;
  color: var(--login-ink) !important;
  background:
    rgba(255, 255, 255, 0.74) !important;
  box-shadow:
    0 8px 18px rgba(35, 31, 22, 0.035) !important;
}

body[data-page="login"] .signup-benefits article > span:first-child {
  color: var(--login-cyan) !important;
}

body[data-page="login"] .signup-panel {
  color: var(--login-ink) !important;
  background:
    var(--login-warm-white) !important;
}

body[data-page="login"] .signup-form {
  border:
    1px solid rgba(158, 116, 25, 0.28) !important;
  border-radius: 12px !important;
  background:
    var(--login-panel) !important;
  box-shadow:
    0 18px 44px rgba(38, 32, 18, 0.075) !important;
}

body[data-page="login"] .signup-panel-heading h2,
body[data-page="login"] .signup-form label,
body[data-page="login"] .form-field label {
  color: var(--login-ink) !important;
}

body[data-page="login"] .signup-panel-heading p,
body[data-page="login"] .form-field small {
  color: var(--login-muted) !important;
}

body[data-page="login"] .signup-form input,
body[data-page="login"] .signup-form select,
body[data-page="login"] .signup-form textarea {
  color: var(--login-ink) !important;
  border:
    1px solid #d9d3c7 !important;
  border-radius: 8px !important;
  background:
    #fff !important;
  box-shadow: none !important;
}

body[data-page="login"] .signup-form input:focus,
body[data-page="login"] .signup-form select:focus,
body[data-page="login"] .signup-form textarea:focus {
  border-color:
    var(--login-cyan) !important;
  outline:
    3px solid var(--login-cyan-soft) !important;
}

body[data-page="login"] .primary-button {
  border:
    1px solid #9b721d !important;
  border-radius: 8px !important;
  color: #191711 !important;
  background:
    linear-gradient(
      180deg,
      #f1d780 0%,
      #d6ae43 55%,
      #bd8c24 100%
    ) !important;
  box-shadow:
    0 7px 16px rgba(158, 116, 25, 0.16) !important;
  text-shadow: none !important;
}

body[data-page="login"] .primary-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(158, 116, 25, 0.20) !important;
}

body[data-page="login"] .primary-button:focus-visible {
  outline:
    3px solid var(--login-cyan-soft);
  outline-offset: 3px;
}

body[data-page="login"] a {
  color: #8c6717;
}

body[data-page="login"] a:hover {
  color: #0e8daf;
}

body[data-page="login"] [role="alert"],
body[data-page="login"] .approval-notice {
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  body[data-page="login"] .signup-intro {
    border-right: 0;
    border-bottom:
      1px solid rgba(158, 116, 25, 0.22);
  }
}

@media (max-width: 600px) {
  body[data-page="login"] .signup-form {
    border-radius: 9px !important;
    box-shadow:
      0 10px 26px rgba(38, 32, 18, 0.06) !important;
  }

  body[data-page="login"] .signup-benefits article {
    border-radius: 8px !important;
  }
}


/* TC_PASSWORD_RESET_V1_START */

body[data-page="login"] .login-recovery {
  display: grid;
  gap: 9px;
  justify-items: start;
  margin-top: -2px;
}

body[data-page="login"] .login-recovery-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 0;
  color: var(--login-gold, #c89a27);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body[data-page="login"] .login-recovery-button:hover,
body[data-page="login"] .login-recovery-button:focus-visible {
  color: #8e6816;
}

body[data-page="login"] .login-recovery-button:focus-visible {
  outline: 2px solid var(--login-cyan, #28c9e8);
  outline-offset: 4px;
  border-radius: 4px;
}

body[data-page="login"] .login-recovery-button:disabled {
  cursor: wait;
  opacity: .62;
}

body[data-page="login"] .login-recovery-status {
  max-width: 46rem;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(200, 154, 39, .18);
  border-radius: 10px;
  background: rgba(255, 252, 244, .92);
  color: #5f584d;
  font-size: .72rem;
  line-height: 1.45;
}

body[data-page="login"] .login-recovery-status.success {
  border-color: rgba(40, 201, 232, .34);
  background: rgba(40, 201, 232, .07);
  color: #174f59;
}

body[data-page="login"] .login-recovery-status.error {
  border-color: rgba(164, 83, 64, .28);
  background: rgba(164, 83, 64, .06);
  color: #713e32;
}

/* TC_PASSWORD_RESET_V1_END */