/* Who is signed in: the chip in the top right corner of every page (/js/account.js). The site header
   (app.css), the sign-up page's bar (join/css/app.css) and the roster's bar (join/css/officers.css)
   keep its space, so nothing moves when it appears. Colors come from the tokens in app.css; the
   sign-up page and the roster have their own dark palette, so the chip gets the site's dark tokens
   there (at the end of this file).

   Wide screens: "Guest | Officer sign in", or the avatar with "Benji, President". The column is 280px
   so the longest seat today, "Dr. Pakravan, Faculty Advisor" (198px of text), fits without "...".
   Below 1000px: the icon and "Guest", or the avatar and the first name.
   Phones (below 760px): the icon and "Guest", or the avatar alone.
   The roster, opened with its passcode: a key and "Roster passcode" (the key alone on phones).
   The words that are not shown stay in the link's or button's accessible name. */

.acct {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  min-width: 0; min-height: 44px;
}
.acct-view, .acct-wrap { display: flex; justify-content: flex-end; min-width: 0; max-width: 100%; }

.acct-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; max-width: 100%; min-height: 44px;
  margin: 0; padding: 0 14px 0 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 14px; font-weight: 650; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color 0.15s;
}
.acct-chip:hover, .acct-chip[aria-expanded="true"] { border-color: var(--accent); }
.acct-chip.is-static { cursor: default; }
.acct-chip.is-static:hover { border-color: var(--line); }
.acct-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.acct-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
}
.acct-glyph, .acct-caret {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
.acct-glyph { width: 18px; height: 18px; stroke-width: 1.9; }
.acct-caret { flex: none; width: 14px; height: 14px; margin-left: -2px; stroke-width: 2.4; color: var(--muted); transition: transform 0.15s; }
.acct-chip[aria-expanded="true"] .acct-caret { transform: rotate(180deg); }

.acct-avatar {
  flex: none;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--text);
}
.acct-avatar.tone-0 { background: var(--tone-0-bg); color: var(--tone-0-fg); }
.acct-avatar.tone-1 { background: var(--tone-1-bg); color: var(--tone-1-fg); }
.acct-avatar.tone-2 { background: var(--tone-2-bg); color: var(--tone-2-fg); }
.acct-avatar.tone-3 { background: var(--tone-3-bg); color: var(--tone-3-fg); }
.acct-avatar.tone-4 { background: var(--tone-4-bg); color: var(--tone-4-fg); }
.acct-avatar.tone-5 { background: var(--tone-5-bg); color: var(--tone-5-fg); }

.acct-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acct-role { color: var(--muted); font-weight: 600; }
.acct-sep { flex: none; align-self: stretch; width: 1px; margin: 11px 0; background: var(--line-strong); }
.acct-action { color: var(--accent); }

/* ---------- the officer's menu ---------- */

.acct-wrap { position: relative; }
.acct-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: max-content; min-width: 210px; max-width: min(300px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
  text-align: left;
}
.acct-menu-who { display: grid; gap: 2px; margin: 0 0 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.acct-menu-kicker { color: var(--muted); font-size: 12px; font-weight: 650; }
.acct-menu-item {
  display: flex; align-items: center; width: 100%; min-height: 44px;
  margin: 0; padding: 0 10px;
  border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 650; text-align: left; text-decoration: none;
  cursor: pointer;
}
.acct-menu-item:hover { background: var(--surface-2); color: var(--accent); }
.acct-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acct-menu-item:disabled { opacity: 0.55; cursor: default; }
.acct-menu-error { margin: 4px 10px 6px; color: var(--danger, #fb7185); font-size: 13px; font-weight: 600; }
.acct-menu-error:empty { display: none; }

/* ---------- smaller screens ---------- */

/* Hidden from sight, still read out (the same as .sr-only). */
@media (max-width: 999px) {
  .acct-sep, .acct-action, .acct-role {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .acct-chip { padding-right: 12px; }
  .acct-chip.is-officer .acct-label { max-width: 90px; }
}
@media (max-width: 759px) {
  .acct-chip.is-officer { gap: 4px; padding: 0 8px 0 6px; }
  .acct-chip.is-static { padding: 0 6px; }
  .acct-chip.is-officer .acct-label, .acct-chip.is-static .acct-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (max-width: 359px) {
  .acct-chip.is-guest { padding: 0 6px; }
  .acct-chip.is-guest .acct-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-chip, .acct-caret { transition: none; }
}

/* ---------- the sign-up page and the roster (dark only, their own palette) ---------- */

.join-page .acct, .officers-page .acct {
  --surface: #111a2e; --surface-2: #18233d; --line: #243150; --line-strong: #35456b;
  --text: #e8eef8; --muted: #9fb0c9; --accent: #22d3ee; --danger: #fb7185;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --tone-0-bg: #0e4f5c; --tone-0-fg: #cffafe;
  --tone-1-bg: #3a5313; --tone-1-fg: #ecfccb;
  --tone-2-bg: #46307a; --tone-2-fg: #ede9fe;
  --tone-3-bg: #6b4410; --tone-3-fg: #fef3c7;
  --tone-4-bg: #6d2239; --tone-4-fg: #ffe4e6;
  --tone-5-bg: #1e3a8a; --tone-5-fg: #dbeafe;
}