/* exam.4ab.in — accounts (account.js). Self-injected by account.js itself
   (it cannot edit index.html/check.html/learn.html/topic.html to add a
   <link>, same reason docs.js self-injects check.css). Loads after
   tokens.css + app.css, which are already on every page this appears on.
   New classes are prefixed `.acct-` so nothing here can collide with the
   rest of the site. Every colour is a token, so light/dark both work. */

.acct-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px;
}

/* 2026-09-13 [reference-header restyle] — two-line "who am I" block (name +
   chevron on top, role · wallet credits below) plus an initials avatar,
   matching the reference mockup. Every string inside is the same real field
   account.js's badgeHTML always rendered (name/role/credits) — only the
   LAYOUT changed, nothing new was invented to fill the second line. */
.acct-badge__avatar {
  flex: none; width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--deep-navy-grad, var(--navy)); color: var(--gold, #f5b942);
  font: 700 12px/1 var(--font-display, inherit);
}
.acct-badge__text {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.25;
  min-width: 0; max-width: 40vw;
}
.acct-badge__who {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--body); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-badge__chev { width: 11px; height: 11px; flex: none; opacity: .6; }
.acct-badge__meta {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-badge__role { color: var(--muted); text-transform: capitalize; }
.acct-badge__dot { color: var(--muted); }
.acct-badge__credits { color: var(--navy); font-weight: 700; }
.acct-badge__signin, .acct-badge__signout { padding: 7px 13px; font-size: 13px; }
.acct-badge__hint {
  font-size: 10.5px; color: var(--muted); border: 1px dashed var(--chip-line);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

/* --------------------------------------------------------------- modal */
.acct-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 17, 31, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.acct-modal {
  position: relative; width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 22px 20px 20px;
}
.acct-modal__close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.acct-modal__title { font-size: 19px; margin: 0 0 4px; }
.acct-modal__note { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.acct-field { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.acct-field > span { display: block; margin-bottom: 5px; font-weight: 600; }
.acct-field i { font-style: normal; font-weight: 400; }

/* digit-box OTP input (2026-09-14) -- a view over the real hidden #acctCode
   input; account.js syncs it on every keystroke/paste. flex:1 1 0 lets the
   boxes shrink together to fit the 380px-wide modal at any code length
   instead of overflowing or wrapping awkwardly. */
.acct-otp-boxes { display: flex; gap: 6px; flex-wrap: nowrap; margin-bottom: 12px; }
.acct-otp-digit {
  flex: 1 1 0; min-width: 0; max-width: 46px; height: 48px; padding: 0;
  text-align: center; font: 700 19px var(--font-display, inherit);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--card-2);
  color: var(--ink, inherit); transition: border-color .15s, box-shadow .15s;
}
.acct-otp-digit:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint, rgba(27,42,94,.14));
}
.acct-otp-digit--filled { border-color: var(--navy); }
.acct-otp-digit--bad { border-color: var(--red); background: rgba(220, 38, 38, .07); }
.acct-err {
  margin: 0 0 12px; padding: 8px 11px; border-radius: var(--r-sm); font-size: 12.5px;
  background: rgba(220, 38, 38, .1); border: 1px solid rgba(220, 38, 38, .28); color: var(--red);
}

@media (max-width: 480px) {
  .acct-badge__text { max-width: 34vw; }
}

/* ============================================================ teacher/admin
   Shared small extras for app/teacher.html + app/admin.html — everything
   else on those pages reuses .card/.btn/.chip/.stats/.chk-table from
   tokens.css/app.css/check.css, already loaded there directly. */

.acct-joincode {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px;
  border-radius: var(--r-md); background: var(--chip-bg); border: 1px solid var(--chip-line);
}
.acct-joincode b { font: 700 22px/1 var(--mono); letter-spacing: .08em; color: var(--navy); }
.acct-joincode span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.acct-cardbox { padding: 14px 16px; }

.acct-barlist { display: flex; flex-direction: column; gap: 6px; }
.acct-barrow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 42px; gap: 10px; align-items: center; font-size: 12.5px; }
.acct-barrow__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--body); }
.acct-bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.acct-bar > i { display: block; height: 100%; background: var(--navy-2); }
.acct-barrow__pct { text-align: right; color: var(--muted); font-family: var(--mono); }

.acct-notattempted td { color: var(--muted); font-style: italic; }

.acct-form-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.acct-form-row .fgroup { margin-bottom: 0; min-width: 160px; flex: 1 1 160px; }

.acct-role-select { padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-size: 13px; }

.acct-owner-only { padding: 60px 20px; text-align: center; color: var(--muted); }

/* --------------------------------------------- adding a colleague (admin) --
 * A row of fields that has to stay a row on a laptop and stack on a phone, so
 * the email field is given the room and the rest take what they need. */
.adm-adduser { margin: 0 0 16px; }
.adm-adduser__row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(200px, 1.4fr) auto;
  gap: 10px;
  align-items: center;
}
@media (max-width: 760px) {
  .adm-adduser__row { grid-template-columns: 1fr; }
}