/* TeamFlow Clients — header sign-in / sign-out icons.
   Colours inherit from the theme header via currentColor. */
.tfc-hauth { display: inline-flex; align-items: center; gap: 14px; line-height: 1; vertical-align: middle; --tfc-hsize: 20px; }
.tfc-hauth .tfc-hauth-link {
	display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none;
	font-size: .95em; font-weight: 500; white-space: nowrap; padding: 6px 2px; border-radius: 8px;
	transition: opacity .15s ease, background-color .15s ease;
}
.tfc-hauth .tfc-hauth-link:hover { opacity: .75; text-decoration: none; color: inherit; }
.tfc-hauth .tfc-hauth-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tfc-hauth .tfc-icon { width: var(--tfc-hsize); height: var(--tfc-hsize); display: block; }
.tfc-hauth .tfc-hauth-avatar {
	width: calc(var(--tfc-hsize) + 8px); height: calc(var(--tfc-hsize) + 8px); border-radius: 50%;
	display: inline-grid; place-items: center; border: 1.5px solid currentColor;
	font-size: calc(var(--tfc-hsize) * .5); font-weight: 700; letter-spacing: .02em;
}
.tfc-hauth-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pill style */
.tfc-hauth-pill { gap: 8px; }
.tfc-hauth-pill .tfc-hauth-link { border: 1.5px solid currentColor; border-radius: 999px; padding: 7px 14px; }
.tfc-hauth-pill.tfc-hauth-icons .tfc-hauth-link { padding: 7px; }
.tfc-hauth-pill .tfc-hauth-link:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.tfc-hauth-pill .tfc-hauth-avatar { border: 0; width: auto; height: auto; }

/* Menu item wrapper */
li.tfc-menu-auth { display: flex; align-items: center; }
li.tfc-menu-auth > .tfc-hauth { padding: 0 .5em; }

/* Small screens: icons only */
@media (max-width: 600px) {
	.tfc-hauth .tfc-hauth-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tfc-hauth { gap: 10px; }
}

/* v1.2.0 — signed in: name + "Sign out" as plain text, always visible (also on phones). */
.tfc-hauth.is-in { gap: 16px; }
.tfc-hauth.is-in .tfc-hauth-link { font-size: .95em; white-space: nowrap; }
.tfc-hauth.is-in .tfc-hauth-name { font-weight: 600; max-width: 16em; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.tfc-hauth.is-in .tfc-hauth-out { opacity: .85; }
.tfc-hauth.is-in .tfc-hauth-out:hover { opacity: 1; text-decoration: underline; }
.tfc-hauth-pill.is-in .tfc-hauth-name { border: 0; padding-left: 0; padding-right: 0; }
@media (max-width: 600px) {
	.tfc-hauth.is-in { gap: 10px; }
	.tfc-hauth.is-in .tfc-hauth-name { max-width: 8.5em; }
	.tfc-hauth.is-in .tfc-hauth-link { font-size: 13px; }
}