/* The account corner — the student's photo (or initials) at the top right of
   every page, and its small menu. Shared by every app (core/ui, copied by
   sync_core.sh); the public website carries the same look in its own
   styles.css (.acct-*), because it is plain pages with no templates.

   Brand colours only — navy #0B2A49 and gold #D8B04C, from the logo — so the
   corner is the same in every app whatever that app's own skin. Every rule is
   scoped to .br-acct: it defines nothing an app already owns. */
.br-acct { position: relative; display: inline-block; font-size: 15px; line-height: 1.2; }
.br-acct > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 3px 12px 3px 3px; border-radius: 999px;
  border: 1px solid rgba(11, 42, 73, .16); background: #fff; color: #0B2A49;
  font-weight: 600; white-space: nowrap;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.br-acct > summary::-webkit-details-marker { display: none; }
.br-acct > summary::marker { content: ""; }
.br-acct > summary:hover { border-color: #D8B04C; }
.br-acct > summary:focus-visible { outline: 3px solid #D8B04C; outline-offset: 2px; }
.br-acct[open] > summary { border-color: #D8B04C; box-shadow: 0 0 0 3px rgba(216, 176, 76, .22); }

.br-acct-face {
  flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0B2A49; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #D8B04C;
  margin: 4px;
}
.br-acct-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-acct-face--lg { width: 48px; height: 48px; font-size: 18px; margin: 4px; }
.br-acct-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.br-acct-caret { flex: none; transition: transform .2s ease; }
.br-acct[open] .br-acct-caret { transform: rotate(180deg); }

.br-acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000;
  min-width: 240px; max-width: min(320px, calc(100vw - 24px)); padding: 8px;
  background: #fff; border: 1px solid #e3e7ee; border-top: 3px solid #D8B04C;
  border-radius: 14px; box-shadow: 0 14px 36px rgba(11, 42, 73, .18);
  text-align: left;
}
.br-acct-who {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid #eef1f5;
}
.br-acct-full { color: #0B2A49; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.br-acct-item {
  display: block; padding: 12px; border-radius: 9px;
  color: #0B2A49; font-weight: 600; text-decoration: none;
}
.br-acct-item:hover, .br-acct-item:focus-visible { background: #faf4e1; color: #0B2A49; outline: none; }
.br-acct-item--out { color: #6b7888; }

/* An app header's right side: the app's own links, then the corner. Several
   apps let their links scroll sideways on a phone; the corner sits OUTSIDE
   them, so it never scrolls out of sight and its menu is never clipped by the
   scrolling box. Wrap the app's <nav> and the corner in .br-acct-row. */
.br-acct-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.br-acct-row > .br-acct { flex-shrink: 0; }

/* Below a wide desktop the circle alone, so the corner never pushes an app's
   own links (or the logo) aside; the name is inside the menu. */
@media (max-width: 1100px) {
  .br-acct > summary { padding: 0; gap: 0; border-color: transparent; background: transparent; }
  .br-acct-name, .br-acct-caret { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .br-acct > summary, .br-acct-caret { transition: none; }
}