/* ============================================================
   TRAINING BLUEPRINTS — Shared Stylesheet
   ============================================================ */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* VARIABLES */
:root{
  --white:#ffffff;
  --off-white:#f8f7f5;
  --paper:#f1efe9;
  --border:#e2dfd8;
  --border-strong:#c8c4bb;
  --text:#0f0f0e;
  --muted:#5c5a55;
  --faint:#9e9b95;
  --gold:#b8912a;
  --gold-light:#d4a83a;
  --gold-pale:rgba(184,145,42,0.10);
  --gold-pale2:rgba(184,145,42,0.06);
  --ink:#0f0f0e;
  --error:#c0392b;
  --green:#2a7a4a;
  --green-pale:rgba(42,122,74,0.08);
  --swim:#1a7ed4;
  --bike:#2a8f52;
  --run:#c47d0a;
}

/* BASE */
html{height:100%}
body{color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.6}

/* ============================================================
   NAV LOGO (all pages)
   ============================================================ */
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.12em;color:var(--ink);text-decoration:none}
.nav-logo span{color:var(--gold)}

/* ============================================================
   AUTH LAYOUT — Left Panel (signup + login)
   ============================================================ */
.left{background:var(--ink);padding:3rem;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;position:relative;overflow:hidden}
.left::before{content:'TB';position:absolute;font-family:'Bebas Neue',sans-serif;font-size:340px;color:rgba(255,255,255,0.025);bottom:-60px;right:-40px;line-height:1;letter-spacing:-0.05em;pointer-events:none}
.left-logo{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.12em;color:var(--white);text-decoration:none}
.left-logo span{color:var(--gold)}
.left-content{position:relative;z-index:1}
.left-eyebrow{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:0.22em;color:var(--gold);margin-bottom:1.25rem;display:flex;align-items:center;gap:8px}
.left-eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--gold)}
.left-h{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,3.5vw,54px);line-height:0.98;letter-spacing:0.02em;color:var(--white);margin-bottom:1.5rem}
.left-h em{font-style:normal;color:var(--gold);display:block}
.left-sub{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.7;max-width:360px;margin-bottom:2.5rem}
.left-bottom{font-size:12px;color:rgba(255,255,255,0.25);letter-spacing:0.04em}

/* Feature list (signup left panel) */
.feature-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.feature-list li{font-size:13px;color:rgba(255,255,255,0.55);display:flex;align-items:center;gap:10px}
.feature-list li::before{content:'';width:16px;height:16px;border-radius:2px;flex-shrink:0;background:var(--gold-pale) url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%23b8912a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center}

/* ============================================================
   AUTH LAYOUT — Right Panel (signup + login)
   ============================================================ */
.right{background:var(--white);padding:3rem;display:flex;flex-direction:column;justify-content:center;min-height:100vh}
.right-inner{max-width:400px;width:100%;margin:0 auto}
.form-eyebrow{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:0.22em;color:var(--gold);margin-bottom:1.5rem}
.form-title{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:0.02em;color:var(--ink);margin-bottom:.4rem;line-height:1}
.form-sub{font-size:14px;color:var(--muted);margin-bottom:2.5rem;line-height:1.6}
.form-sub a{color:var(--gold);text-decoration:none;font-weight:400}
.form-sub a:hover{text-decoration:underline}

/* ============================================================
   FORM FIELDS (all form pages)
   ============================================================ */
.field{margin-bottom:1.25rem}
.field label{display:block;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.field input{width:100%;background:var(--off-white);border:1px solid var(--border);border-radius:3px;padding:13px 16px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:300;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
.field input::placeholder{color:var(--faint)}
.field-hint{font-size:11px;color:var(--faint);margin-top:.4rem}
.field-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.field-forgot{font-size:12px;color:var(--gold);text-decoration:none;transition:opacity .2s}
.field-forgot:hover{opacity:.7}

/* ============================================================
   DIVIDER
   ============================================================ */
.divider{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0}
.divider-line{flex:1;height:1px;background:var(--border)}
.divider-text{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}

/* ============================================================
   STEP INDICATOR (signup + checkout)
   ============================================================ */
.steps{display:flex;align-items:center;gap:.5rem;margin-bottom:2rem}
.step{display:flex;align-items:center;gap:.4rem;font-size:11px;letter-spacing:0.08em;text-transform:uppercase}
.step-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:0;border:1px solid var(--border);color:var(--faint);flex-shrink:0}
.step.active .step-dot{background:var(--gold);border-color:var(--gold);color:var(--white)}
.step.active .step-label{color:var(--text);font-weight:500}
.step.done .step-dot{background:var(--green);border-color:var(--green);color:var(--white)}
.step.done .step-label{color:var(--green)}
.step-label{color:var(--faint)}
.step-arrow{color:var(--faint);font-size:10px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-submit{width:100%;background:var(--ink);color:var(--white);font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:0.12em;padding:15px;border-radius:3px;border:none;cursor:pointer;transition:background .2s;margin-top:.5rem}
.btn-submit:hover{background:#2a2a2a}

/* ============================================================
   ERROR BOX
   ============================================================ */
.error-box{background:rgba(192,57,43,0.06);border:1px solid rgba(192,57,43,0.2);border-radius:3px;padding:.75rem 1rem;margin-bottom:1.25rem;font-size:13px;color:var(--error);display:none;align-items:center;gap:8px}
.error-box.show{display:flex}

/* ============================================================
   SMALL TEXT / FOOTER NOTES
   ============================================================ */
.terms{font-size:11px;color:var(--faint);text-align:center;margin-top:1rem;line-height:1.6}
.terms a{color:var(--muted);text-decoration:underline}
.login-link{text-align:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.login-link a{color:var(--gold);text-decoration:none;font-weight:400}