/* ============================================================
   MforMathodology — Auth UI (Sign In / Sign Up / Account)
   Shared across every page. Uses the site's existing CSS
   variables (--bg, --bg-2, --teal, --orange, --yellow, --chalk,
   --chalk-soft, --line) which are defined in each page's :root.
   ============================================================ */

/* ---------- Nav account control (desktop top-nav) ---------- */
.nav-account{ display:none; align-items:center; gap:10px; position:relative; }
@media (min-width:860px){ .nav-account{ display:flex; } }

.nav-signin-btn{
  display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--chalk);
  border:1.5px solid var(--line); padding:9px 16px; border-radius:10px; font-weight:700; font-size:0.85rem;
  cursor:pointer; font-family:inherit; transition:border-color .2s ease, color .2s ease;
}
.nav-signin-btn:hover{ border-color:var(--teal); color:var(--teal); }

.nav-account-chip{
  display:none; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--line);
  padding:6px 14px 6px 6px; border-radius:999px; cursor:pointer; font-family:inherit;
}
.nav-account-chip .avatar{
  width:28px; height:28px; border-radius:50%; background:var(--teal-soft); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; flex-shrink:0;
}
.nav-account-chip .name{ font-size:0.84rem; font-weight:600; color:var(--chalk); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-account-chip svg{ color:var(--chalk-soft); flex-shrink:0; }

.nav-account-menu{
  position:absolute; top:calc(100% + 10px); right:0; background:var(--bg-2); border:1px solid var(--line);
  border-radius:14px; min-width:200px; padding:8px; box-shadow:0 14px 34px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease;
  z-index:200;
}
.nav-account-menu.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-account-menu a, .nav-account-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 12px;
  border-radius:9px; font-size:0.88rem; font-weight:600; color:var(--chalk); background:none; border:none;
  cursor:pointer; font-family:inherit;
}
.nav-account-menu a:hover, .nav-account-menu button:hover{ background:rgba(255,216,77,0.08); color:var(--yellow); }
.nav-account-menu .divider{ height:1px; background:var(--line); margin:6px 4px; }
.nav-account-menu .danger:hover{ color:var(--coral); background:rgba(255,107,94,0.08); }

/* ---------- Drawer account row (mobile) ---------- */
.drawer-account{
  display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line);
  margin-bottom:2px;
}
.drawer-account .avatar{
  width:42px; height:42px; border-radius:50%; background:var(--teal-soft); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0;
}
.drawer-account .who{ flex-grow:1; min-width:0; }
.drawer-account .who .n{ font-weight:700; font-size:0.95rem; color:var(--chalk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer-account .who .e{ font-size:0.76rem; color:var(--chalk-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer-signin-row{
  display:flex; align-items:center; gap:14px; padding:16px 22px; font-size:1.02rem; font-weight:700;
  color:var(--bg); background:var(--yellow); cursor:pointer; margin-bottom:2px;
}
.drawer-signin-row svg{ color:var(--bg); }
.drawer-logout-row{ color:var(--coral) !important; }
.drawer-logout-row svg{ color:var(--coral) !important; }

/* ---------- Auth modal ---------- */
.auth-modal-overlay{
  position:fixed; inset:0; background:rgba(5,20,18,0.72); backdrop-filter:blur(3px);
  z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s;
}
.auth-modal-overlay.show{ opacity:1; visibility:visible; transition:opacity .22s ease, visibility 0s linear 0s; }
.auth-modal{
  background:var(--bg-2); border:1px solid var(--line); border-radius:20px; width:100%; max-width:400px;
  padding:30px 26px 26px; position:relative; max-height:92vh; overflow-y:auto;
  transform:translateY(16px) scale(0.98); opacity:0; transition:transform .25s ease, opacity .25s ease;
}
.auth-modal-overlay.show .auth-modal{ transform:translateY(0) scale(1); opacity:1; }
.auth-modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:none; color:var(--chalk-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.auth-modal-close:hover{ color:var(--chalk); }
.auth-modal h2{ font-family:'League Spartan', sans-serif; font-size:1.4rem; margin:0 0 4px; color:var(--chalk); }
.auth-modal .sub{ color:var(--chalk-soft); font-size:0.86rem; margin:0 0 20px; }

.auth-tabs{ display:flex; background:var(--bg); border-radius:11px; padding:4px; margin-bottom:20px; }
.auth-tab{
  flex:1; text-align:center; padding:9px 0; border-radius:8px; font-size:0.85rem; font-weight:700;
  color:var(--chalk-soft); cursor:pointer; transition:background .2s ease, color .2s ease; background:none; border:none;
  font-family:inherit;
}
.auth-tab.active{ background:var(--orange); color:#241600; }

.auth-field{ margin-bottom:14px; }
.auth-field label{ display:block; font-size:0.78rem; font-weight:700; color:var(--chalk-soft); margin-bottom:6px; }
.auth-field input{
  width:100%; background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  color:var(--chalk); font-family:inherit; font-size:0.92rem; transition:border-color .2s ease;
}
.auth-field input:focus{ outline:none; border-color:var(--teal); }
.auth-field.pw-field{ position:relative; }
.auth-field .pw-toggle{
  position:absolute; right:12px; top:38px; background:none; border:none; color:var(--chalk-soft);
  cursor:pointer; font-size:0.78rem; font-weight:700; font-family:inherit;
}

.auth-error{
  background:rgba(255,107,94,0.1); border:1px solid rgba(255,107,94,0.3); color:#FF9186;
  padding:10px 12px; border-radius:9px; font-size:0.8rem; margin-bottom:14px; display:none; line-height:1.5;
}
.auth-error.show{ display:block; }

.auth-submit{
  width:100%; background:var(--orange); color:#241600; border:none; padding:14px; border-radius:12px;
  font-weight:700; font-size:0.95rem; cursor:pointer; font-family:inherit; transition:transform .15s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.auth-submit:hover{ transform:translateY(-1px); }
.auth-submit:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }
.auth-submit .spinner{
  width:16px; height:16px; border:2px solid rgba(36,22,0,0.3); border-top-color:#241600;
  border-radius:50%; animation:auth-spin .7s linear infinite; display:none;
}
.auth-submit.loading .spinner{ display:inline-block; }
.auth-submit.loading .label{ display:none; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

.auth-divider{ display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--chalk-soft); font-size:0.76rem; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }

.auth-google-btn{
  width:100%; background:var(--bg); border:1.5px solid var(--line); color:var(--chalk); padding:12px;
  border-radius:12px; font-weight:600; font-size:0.88rem; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:border-color .2s ease;
}
.auth-google-btn:hover{ border-color:var(--teal); }

.auth-forgot{ text-align:center; margin-top:16px; }
.auth-forgot button{
  background:none; border:none; color:var(--teal); font-size:0.82rem; font-weight:600; cursor:pointer; font-family:inherit;
}

.auth-success{ text-align:center; padding:10px 0; }
.auth-success svg{ color:var(--teal); margin-bottom:12px; }
.auth-success p{ color:var(--chalk-soft); font-size:0.9rem; line-height:1.6; }

/* ---------- Course lock badges (courses.html) ---------- */
.course-status-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700;
  padding:5px 11px; border-radius:999px; margin-bottom:10px;
}
.course-status-badge.locked{ background:rgba(255,255,255,0.06); color:var(--chalk-soft); }
.course-status-badge.enrolled{ background:rgba(31,205,184,0.14); color:var(--teal); }