/*
 * Account control in the top bar.
 *
 * Replaces the separate "Admin" text link with a single avatar that opens a
 * menu, the way a signed-in Google account behaves. One control, whichever
 * identities are present: staff on the admin guard, a parent signed in with
 * site SSO, or both at once.
 *
 * Hand authored and copied verbatim by Mix, like the rest of the public CSS.
 * Everything is scoped under .tt-acct so it cannot reach the rest of the site.
 */

.tt-acct {
	--acct-navy: #0a1f5c;
	--acct-line: #e2e6ef;
	--acct-ink: #1b2233;
	--acct-ink-soft: #4a5268;
	--acct-ink-faint: #6a7290;
	--acct-tint: #eef3fb;

	position: relative;
	display: inline-block;
	margin-left: 18px;
	white-space: nowrap;
	line-height: normal;
}

.tt-acct * { box-sizing: border-box; }

/* -------------------------------------------------------------- trigger -- */

.tt-acct-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: inherit;
}
.tt-acct-btn:hover .tt-acct-face { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.tt-acct-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }

.tt-acct-face {
	display: grid; place-items: center; overflow: hidden;
	width: 30px; height: 30px; border-radius: 999px; flex: none;
	background: #fff; color: var(--acct-navy);
	font-size: 12px; font-weight: 700; letter-spacing: .02em;
	transition: box-shadow .12s ease;
}
.tt-acct-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tt-acct-caret {
	width: 7px; height: 7px; flex: none; opacity: .85;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
}

/* ----------------------------------------------------------------- menu -- */

.tt-acct-menu {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200;
	width: 268px; padding: 6px;
	background: #fff; color: var(--acct-ink); text-align: left;
	border: 1px solid var(--acct-line); border-radius: 12px;
	box-shadow: 0 10px 30px rgba(10, 31, 92, .18);
}
.tt-acct-menu[hidden] { display: none; }

.tt-acct-id { display: flex; gap: 10px; align-items: center; padding: 12px 12px 14px; }
.tt-acct-id .tt-acct-face { width: 38px; height: 38px; font-size: 14px; background: var(--acct-navy); color: #fff; }
/* Block, not the default inline: these are spans, and left inline the name and
   the email run together on one line. */
.tt-acct-id > span { min-width: 0; }
.tt-acct-name { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
.tt-acct-mail { display: block; font-size: 12px; color: var(--acct-ink-faint); line-height: 1.4; word-break: break-all; }

.tt-acct-sep { height: 1px; background: var(--acct-line); margin: 4px 0; }

.tt-acct-label {
	display: block; padding: 8px 12px 4px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--acct-ink-faint);
}

.tt-acct-menu a,
.tt-acct-menu button.tt-acct-item {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 9px 12px; border: 0; border-radius: 8px;
	background: none; color: var(--acct-ink); font: inherit; font-size: 14px;
	text-align: left; text-decoration: none; cursor: pointer;
}
.tt-acct-menu a:hover,
.tt-acct-menu button.tt-acct-item:hover { background: var(--acct-tint); color: var(--acct-navy); text-decoration: none; }
.tt-acct-menu i { width: 16px; text-align: center; color: var(--acct-ink-faint); flex: none; }
.tt-acct-menu a:hover i,
.tt-acct-menu button.tt-acct-item:hover i { color: var(--acct-navy); }

.tt-acct-note { display: block; padding: 2px 12px 10px; font-size: 12px; color: var(--acct-ink-faint); }

/* Signed out: keep the plain link, since there is no identity to show. */
.tt-acct-signin { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 767px) {
	.tt-acct { margin-left: 12px; }
	.tt-acct-menu { width: 240px; }
}