:root {
  /* Keep in sync with login.css / reset.css */
  --tri-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --tri-text: #111827;                 /* gray-900 */
  --tri-muted: #6b7280;                /* gray-500 */
  --tri-surface: #ffffff;
  --tri-border: #f3f4f6;               /* gray-100 */

  /* Inputs */
  --tri-input: #ffffff;
  --tri-input-border: #d1d5db;         /* gray-300 */
  --tri-input-border-focus: #ffc000;

  /* Brand accents */
  --tri-primary: #ffc000;              /* yellow */
  --tri-primary-hover: #eab308;        /* yellow-500-ish */

  /* Effects */
  --tri-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  /* Layout helpers for fixed headers (tweak to your theme) */
  --site-header-h: 72px;               /* height of your sticky/fixed site header */
  --wp-adminbar-h-desktop: 32px;       /* WordPress admin bar (>= 783px) */
  --wp-adminbar-h-mobile: 46px;        /* WordPress admin bar (< 783px) */
}

html { scroll-padding-top: calc(var(--site-header-h) + var(--wp-adminbar-h-desktop)); }
@media (max-width: 782px) {
  html { scroll-padding-top: calc(var(--site-header-h) + var(--wp-adminbar-h-mobile)); }
}

/* ====== Card container ====== */
.tri-wrap {
  position: relative;
  max-width: 28rem;
  width: 100%;
  /* Push below sticky/fixed header (and keep some vertical breathing room) */
  margin: calc(var(--site-header-h) + 24px) auto min(8vh, 64px);
  padding: 2.5rem;                     /* p-10 */
  background: var(--tri-surface);
  border: 1px solid var(--tri-border);
  border-radius: 1rem;                  /* rounded-2xl */
  box-shadow: var(--tri-shadow-lg);
  color: var(--tri-text);
  z-index: 1;                           /* keep above background visuals */
  margin-top: 135px;
}

.admin-bar .tri-wrap {
  margin-top: calc(var(--site-header-h) + var(--wp-adminbar-h-desktop) + 24px);
}
@media (max-width: 782px) {
  .admin-bar .tri-wrap {
    margin-top: calc(var(--site-header-h) + var(--wp-adminbar-h-mobile) + 24px);
  }
}

/* Header */
.tri-wrap h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  margin: 0 0 .25rem 0;
  padding: 12px 0;                     /* match reset/login */
}
.tri-muted {
  margin-top: .5rem;
  margin-bottom: 1.25rem;
  color: var(--tri-muted);
  font-size: .95rem;
}

/* ====== Form / Fields ====== */
.tri-form { display: grid; gap: 14px; }

.tri-field label {
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
  color: #374151; /* gray-700 */
}

.tri-field input[type="text"],
.tri-field input[type="email"] {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--tri-input-border);
  border-radius: .5rem;
  background: var(--tri-input);
  color: #1f2937;                /* gray-800 */
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tri-field input::placeholder { color: rgba(17,24,39,.55); }

.tri-field input:focus {
  border-color: var(--tri-input-border-focus);
  box-shadow: 0 0 0 3px rgba(255,192,0,.25);
}

/* Kill Chrome autofill yellow */
.tri-field input:-webkit-autofill,
.tri-field input:-webkit-autofill:hover,
.tri-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111;
  caret-color: #111;
  -webkit-box-shadow: 0 0 0 1000px var(--tri-input) inset !important;
          box-shadow: 0 0 0 1000px var(--tri-input) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* ====== Actions / Buttons ====== */
.tri-actions { text-align: center; margin-top: .5rem; width: 100%; }

.tri-btn {
  display: inline-block;
  padding: .75rem 1.1rem;
  border-radius: .5rem;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.tri-btn-primary {
  background: var(--tri-primary);
  color: #111;
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  width: 100%;
}
.tri-btn-primary:hover {
  background: var(--tri-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}
.tri-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,192,0,.3), 0 8px 18px rgba(0,0,0,.12);
}
.tri-btn-primary:disabled,
.tri-form[aria-busy="true"] .tri-btn-primary {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* ====== Alerts ====== */
.tri-error   { background: #fee2e2; color: #7f1d1d; padding: .8rem; border-radius: .5rem; }
.tri-success { background: #ecfdf5; color: #065f46; padding: .8rem; border-radius: .5rem; }

/* ====== reCAPTCHA ====== */
.g-recaptcha { transform-origin: left top; }

/* ====== Responsive ====== */
@media (max-width: 480px) {
  .tri-wrap {
    margin: calc(var(--site-header-h) + 16px) auto min(3vh, 24px);
    padding: 1.75rem;
  }
}