/* =========================================================
   Login popup (header "Log in" button) — used on every new page.
   Student → student-login.php · Teacher → teacher-tool.php (links are in each page's HTML).
   Builds on .mu-modal from home.css.
   ========================================================= */
.mu-login { width: min(520px, calc(100% - 32px)); max-width: none; padding: 0; text-align: left; overflow: hidden; }
.mu-login[open] { animation: mu-login-in .22s cubic-bezier(.2, .8, .2, 1); }
.mu-login::backdrop { background: rgba(14, 25, 54, .62); backdrop-filter: blur(3px); }
@keyframes mu-login-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.mu-login__head { position: relative; background: var(--navy); color: #fff; padding: 28px 28px 24px; display: flex; align-items: center; gap: 14px; }
.mu-login__head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 100% 0%, rgba(216, 176, 81, .25), transparent 60%); }
.mu-login__head img { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: #fff; flex: none; }
.mu-login__head div { position: relative; z-index: 1; }
.mu-login h2 { color: #fff; font-size: 22px; font-weight: 900; margin: 0; }
.mu-login__head p { color: var(--muted-on-dark); font-size: 14px; margin-top: 2px; }
.mu-login .mu-modal__close { z-index: 2; background: rgba(255, 255, 255, .14); color: #fff; }
.mu-login .mu-modal__close:hover { background: rgba(255, 255, 255, .24); }

.mu-login__body { padding: 22px 24px 24px; display: grid; gap: 12px; }
.mu-login__choice { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s; }
.mu-login__choice:hover, .mu-login__choice:focus-visible { border-color: var(--navy); background: var(--gold-wash); color: var(--ink); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(27, 47, 94, .1); }
.mu-login__choice::after { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%231B2F5E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color .15s; }
.mu-login__choice:hover::after { background-color: var(--gold); }
.mu-login__icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--navy); }
.mu-login__choice--teacher .mu-login__icon { background: var(--navy); color: var(--gold); }
.mu-login__choice b { display: block; font-size: 18px; font-weight: 900; line-height: 1.3; }
.mu-login__choice small { display: block; font-size: 13px; color: var(--body); line-height: 1.45; margin-top: 2px; }

.mu-login__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 14px 24px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--body); text-align: center; }
.mu-login__foot button { border: 0; background: none; padding: 4px 2px; font: inherit; font-weight: 800; color: var(--navy); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Teacher choice is a <button> (opens the sign-in step) — same look as the student link */
button.mu-login__choice { width: 100%; font: inherit; text-align: left; cursor: pointer; }

/* ---------- Teacher sign-in step ---------- */
.mu-login__back { position: relative; z-index: 1; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mu-login__back:hover { background: rgba(255, 255, 255, .24); }
.mu-login__form { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.mu-login__form label { font-size: 14px; font-weight: 700; margin-top: 6px; }
.mu-login__form input { width: 100%; min-height: 50px; border-radius: 12px; border: 1.5px solid #CBD3E1; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.mu-login__form input:focus { border-color: var(--navy); outline: 3px solid rgba(216, 176, 81, .5); outline-offset: 0; }
.mu-login__pw { position: relative; }
.mu-login__pw input { padding-right: 76px; }
.mu-login__pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--soft); color: var(--navy); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.mu-login__msg { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: #FDECEA; color: #B42318; font-size: 14px; font-weight: 600; }
.mu-login__form .mu-btn { margin-top: 10px; }
.mu-login__only { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--body); }

/* the header button is now a <button>; keep it looking like the old link */
button.mu-btn { font-family: inherit; }

@media (max-width: 480px) {
  .mu-login__head { padding: 22px 20px 20px; }
  .mu-login__body, .mu-login__form { padding: 18px 16px 20px; }
  .mu-login__choice { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .mu-login__icon { width: 48px; height: 48px; border-radius: 14px; }
  .mu-login__choice b { font-size: 17px; }
}