/* ══════════════════════════════════════════════
   OPERATIONS COURSE · AUTH GATE STYLES
   Extracted from ClarityCommand Credit™
══════════════════════════════════════════════ */

/* ── CSS variables — defined here so lesson pages are self-contained ── */
:root {
  --ink:        #0a0906;
  --ink2:       #131109;
  --fog:        #f5f3ef;
  --fog2:       #edeae4;
  --white:      #ffffff;
  --muted:      #6b6560;
  --border:     #ddd9d2;
  --gold:       #c49a2e;
  --gold2:      #e0b840;
  --gold-pale:  #f7f0e0;
  --danger:     #8b1a1a;
  --success:    #1a5c3a;
}

/* Screen system */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.screen.active {
  display: flex;
}

/* Scrollable screens */
#screen-login.active, #screen-signup.active, #screen-forgot.active,
#screen-mfa.active, #screen-mfa-enroll.active,
#screen-mfa-enroll-sms.active, #screen-mfa-enroll-totp.active,
#screen-mfa-totp.active, #screen-ops-legal.active, #screen-ops-paywall.active {
  overflow-y: auto;
}

/* Ops-specific: hide app until authed */
#ops-app { display: none; }

/* Credit widget */
.credit-widget { margin: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.credit-widget-inner { padding: 14px 18px; }
.credit-widget-label { font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 900; margin-bottom: 8px; }
.credit-widget-label.gold { color: var(--gold); }
.credit-widget-label.green { color: #6fcf97; }
.credit-widget-label.muted { color: rgba(255,255,255,.3); }
.credit-not-activated, .credit-active, .credit-expired { display: none; }
.credit-loading { font-size: 10px; color: rgba(255,255,255,.25); padding: 4px 0; }
.credit-code-box { background: rgba(196,154,46,.08); border: 1px solid rgba(196,154,46,.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.credit-code-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.credit-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.credit-code-val { font-family: monospace; font-size: 13px; font-weight: 900; color: var(--gold); letter-spacing: 1px; }
.credit-code-copy { background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer; font-size: 11px; font-family: inherit; padding: 0; transition: color .2s; }
.credit-code-copy:hover { color: var(--gold); }
.credit-activate-btn { display: block; width: 100%; padding: 11px 14px; background: var(--gold); color: var(--ink); border: none; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; text-align: center; text-decoration: none; transition: opacity .2s; }
.credit-activate-btn:hover { opacity: .88; }
.credit-activate-sub { font-size: 10px; color: rgba(255,255,255,.3); line-height: 1.5; margin-top: 7px; text-align: center; }
.credit-active-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.credit-active-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fcf97; flex-shrink: 0; }
.credit-active-status { font-size: 12px; font-weight: 700; color: #6fcf97; }
.credit-active-expires { font-size: 10px; color: rgba(255,255,255,.4); margin-bottom: 10px; line-height: 1.5; }
.credit-enter-btn { display: block; width: 100%; padding: 11px 14px; background: rgba(111,207,151,.12); border: 1px solid rgba(111,207,151,.3); color: #6fcf97; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; text-align: center; text-decoration: none; }
.credit-expired-msg { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.6; margin-bottom: 10px; }
.credit-subscribe-btn { display: block; width: 100%; padding: 11px 14px; background: rgba(196,154,46,.1); border: 1px solid rgba(196,154,46,.3); color: var(--gold); border-radius: 8px; font-size: 11px; font-weight: 900; text-transform: uppercase; text-align: center; text-decoration: none; }

#screen-login.active,#screen-signup.active,#screen-forgot.active,
#screen-trial-expired.active,#screen-no-plan.active,#screen-beta-expired.active,
#screen-path-choice.active,#screen-guided.active,#screen-intake.active,
#screen-legal-wizard.active,#screen-mfa.active,#screen-mfa-enroll.active{overflow-y:auto}

/* ══ AUTH SCREENS ══ */
#screen-login,#screen-signup,#screen-forgot{
  align-items:center;justify-content:center;
  background:var(--ink);
  background-image:repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(184,146,42,0.025) 60px,rgba(184,146,42,0.025) 61px);
  padding:24px;flex-direction:column;
}
.auth-box{
  background:var(--white);border-radius:2px;width:100%;max-width:420px;
  padding:44px 40px;border-top:3px solid var(--gold);
}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-mark{
  width:50px;height:50px;border-radius:50%;border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--gold);
  margin:0 auto 12px;
}
.auth-logo h1{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--ink);letter-spacing:1.5px}
.auth-logo p{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.auth-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--ink);margin-bottom:6px}
.auth-sub{font-size:12px;color:var(--muted);margin-bottom:24px;line-height:1.6}
.auth-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:500;display:block;margin-bottom:6px}
.auth-input{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:2px;
  font-size:13px;font-family:inherit;color:var(--ink);background:var(--fog);
  outline:none;margin-bottom:14px;transition:border-color .2s;
}
.auth-input:focus{border-color:var(--gold)}
.auth-select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:2px;
  font-size:13px;font-family:inherit;color:var(--ink);background:var(--fog);
  outline:none;margin-bottom:14px;transition:border-color .2s;appearance:none;
}
.auth-btn{
  width:100%;padding:13px;background:var(--ink);color:var(--white);border:none;
  border-radius:2px;font-size:12px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .2s;
}
.auth-btn:hover{background:var(--ink2)}
.auth-btn.gold{background:var(--gold);color:var(--ink)}
.auth-btn.gold:hover{background:var(--gold2)}
.auth-link{
  font-size:12px;color:var(--gold);cursor:pointer;text-decoration:none;
  background:none;border:none;font-family:inherit;padding:0;
}
.auth-link:hover{text-decoration:underline}
.auth-footer{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}
.auth-error{
  background:#fdf0f0;border:1px solid #e8b4b4;border-radius:2px;
  padding:10px 14px;font-size:12px;color:var(--danger);margin-bottom:14px;display:none;
}
.auth-success{
  background:#f0f7f0;border:1px solid #b4d4b4;border-radius:2px;
  padding:10px 14px;font-size:12px;color:var(--success);margin-bottom:14px;display:none;
}
.prog-select-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.prog-opt{
  padding:14px 10px;border:1.5px solid var(--border);border-radius:2px;
  background:var(--fog);cursor:pointer;font-family:inherit;text-align:center;transition:all .15s;
}
.prog-opt:hover{border-color:var(--gold)}
.prog-opt.selected{border-color:var(--gold);background:var(--gold-pale)}
.prog-opt-icon{font-size:20px;margin-bottom:4px}
.prog-opt-name{font-size:12px;font-weight:500;color:var(--ink)}

/* ══ APP SHELL ══ */
#screen-app{flex-direction:column;background:var(--fog)}

/* ══ LOGIN SCREEN — centered dark card, matches Care universal style ══ */
#screen-login,#screen-signup,#screen-forgot {
  align-items: center;
  justify-content: center;
  background: var(--ink);
  background-image: repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(184,146,42,0.025) 60px,rgba(184,146,42,0.025) 61px);
  padding: 24px;
  flex-direction: column;
}
.auth-box {
  background: #1a1710;
  border-radius: 4px;
  width: 100%;
  max-width: 420px;
  padding: 44px 40px;
  border-top: 3px solid var(--gold);
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-mark {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px; font-weight: 700; color: var(--ink);
  margin: 0 auto 16px;
}
.auth-logo h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px; font-weight: 300; color: var(--white);
  letter-spacing: 0.5px;
}
.auth-logo h1 sup { font-size: 11px; vertical-align: super; }
.auth-logo p { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 6px; }
.auth-divider { width: 36px; height: 1px; background: var(--gold); margin: 0 auto 24px; }
.auth-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); font-weight: 600; display: block; margin-bottom: 6px; }
.auth-input {
  width: 100%; padding: 13px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  font-size: 14px; font-family: inherit;
  color: var(--white);
  background: rgba(255,255,255,0.06);
  outline: none; margin-bottom: 14px;
  transition: border-color .2s;
}
.auth-input:focus { border-color: var(--gold); }
.auth-btn {
  width: 100%; padding: 14px;
  background: var(--gold); color: var(--ink);
  border: none; border-radius: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer;
  font-family: inherit; transition: opacity .2s;
}
.auth-btn:hover { opacity: 0.88; }
.auth-link { font-size: 12px; color: var(--gold); cursor: pointer; text-decoration: none; background: none; border: none; font-family: inherit; padding: 0; }
.auth-link:hover { text-decoration: underline; }
.auth-footer { margin-top: 20px; text-align: center; font-size: 12px; }
.auth-error {
  background: rgba(220,53,53,0.12); border: 1px solid rgba(220,53,53,0.3);
  border-radius: 4px; padding: 10px 14px;
  font-size: 12px; color: #ff8080; margin-bottom: 14px; display: none;
}
.auth-success {
  background: rgba(111,207,151,0.1); border: 1px solid rgba(111,207,151,0.25);
  border-radius: 4px; padding: 10px 14px;
  font-size: 12px; color: #6fcf97; margin-bottom: 14px; display: none;
}
@media(max-width:500px){
  .auth-box { padding: 36px 24px; }
}