/* Logins (hosted mode; js/components/Login.js): the sign-in screen, the
   account menu in the top bars, the Change password dialog, and the Login
   section of Edit student. Tokens only. The sign-in screen and the account
   pieces work at 360px wide (phones); Edit student stays laptop-first. */

/* ---- the sign-in screen --------------------------------------------------- */
body:has(.login-page) { min-width: 0; background: var(--band); }
.login-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(var(--s-8), 10vh, var(--s-20)) var(--s-4) var(--s-10);
  background: var(--band); color: var(--on-band);
}
.login-in { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: var(--s-8); }
.login-mark { display: block; height: 44px; width: auto; }
.login-card {
  --focus-shadow: var(--focus-ring);
  width: 100%; display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-8); border-radius: var(--r-xl); background: var(--surface); color: var(--ink); box-shadow: var(--e4);
}
.login-card h1 { font: var(--t-h1); }
.login-card > p.muted { margin-top: calc(-1 * var(--s-3)); }
.login-help { text-align: center; font: var(--t-body); color: var(--muted); }
@media (max-width: 480px) {
  .login-page { padding-top: var(--s-10); }
  .login-in { gap: var(--s-6); }
  .login-card { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
  .login-card h1 { font: var(--t-h2); font-weight: var(--w-semibold); }
}

/* Labels and password boxes (sign-in and Change password). The boxes use the
   17px body size: a phone zooms the page into any box under 16px. */
.field-label { font: var(--t-label); color: var(--muted); }
.login-card .input, .account-dialog .input { height: 48px; font: var(--t-body-lg); }
.pw-box { position: relative; display: flex; }
.pw-box .input { padding-right: 96px; }
.pw-toggle {
  position: absolute; top: 2px; right: 2px; bottom: 2px; min-width: 84px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0 var(--s-3);
  border: 0; border-radius: calc(var(--r-md) - 2px); background: transparent; color: var(--primary);
  font: var(--t-label);
}
.pw-toggle:hover { background: var(--surface-quiet); }

/* ---- the account menu (both top bars) ------------------------------------------ */
.acct { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-2) 0 var(--s-3);
  border: 0; border-radius: var(--r-full); background: none; color: var(--on-band);
  font: var(--t-body); font-weight: var(--w-medium); white-space: nowrap;
  transition: background var(--dur-1) var(--ease);
}
.acct-btn:hover, .acct.open .acct-btn { background: rgba(211, 255, 233, .1); }
.acct-btn > .icon { color: var(--on-band-muted); }
.acct-panel {
  --focus-shadow: var(--focus-ring);
  position: absolute; top: calc(100% + var(--s-2)); right: 0; z-index: 60;
  width: 260px; max-width: calc(100vw - 2 * var(--s-4));
  display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2);
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--e4);
  animation: rise var(--dur-2) var(--ease);
}
.acct-who { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s-1); min-width: 0; }
.acct-who b, .acct-who .caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item {
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink); text-align: left;
  font: var(--t-body); font-weight: var(--w-medium);
}
.acct-item:hover { background: var(--surface-quiet); }
.acct-item .icon { color: var(--primary); }
@media (max-width: 640px) {
  .acct-name { display: none; }
}

/* ---- Change password ------------------------------------------------------------- */
/* drawn from inside the top bar: back to ink and the light focus ring */
.account-dialog { width: 460px; color: var(--ink); --focus-shadow: var(--focus-ring); }
.acct-form { display: flex; flex-direction: column; gap: var(--s-5); }
.acct-form-head { display: flex; align-items: center; gap: var(--s-3); }
.acct-form-head h2 { font: var(--t-h2); }
.acct-fields { display: flex; flex-direction: column; gap: var(--s-4); }
.acct-foot { display: flex; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 600px) {
  .overlay:has(.account-dialog) { padding: var(--s-4); align-items: flex-start; }
  .account-dialog { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); max-height: calc(100dvh - 2 * var(--s-4)); }
  .acct-foot .btn { flex: 1; }
}

/* ---- Edit student: the Login section (teacher) ---------------------------------- */
.student-login { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.sl-head { display: flex; align-items: baseline; gap: var(--s-3); }
.sl-head h3 { font: var(--t-h3); }
.sl-row { display: flex; align-items: flex-start; gap: var(--s-3); }
.sl-row > .btn { margin-top: calc(18px + var(--s-2)); }
.sl-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); margin: 0; }
.sl-dl > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.sl-dl dt { font: var(--t-label); color: var(--muted); }
.sl-dl dd { margin: 0; display: flex; align-items: center; gap: var(--s-2); min-height: 34px; min-width: 0; }
.sl-user { font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-shown { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md); background: var(--surface-mint); }
.sl-shown-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.sl-shown-label { font: var(--t-label); color: var(--green-800); }
.sl-password {
  font: var(--t-h3); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .02em;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  user-select: all;
}
.sl-shown .caption { color: var(--green-800); }
.sl-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }