.tlpb-account-btn-wrap,
body a.tlpb-account-btn {
--tlpb-account-btn-h: 41px; --tlpb-account-menu-w: 15rem; } body a.tlpb-account-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var( --tlpb-space-2 );
box-sizing: border-box;
min-width: var( --tlpb-account-btn-h );
height: var( --tlpb-account-btn-h );
padding: 0 var( --tlpb-space-4 );
border: 1px solid var( --tlpb-ink );
border-radius: var( --tlpb-radius-md );
background: var( --tlpb-ink );
color: var( --tlpb-on-accent );
font-family: var( --tlpb-font-heading );
font-size: var( --tlpb-text-sm );
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: filter 0.15s ease;
} body a.tlpb-account-btn--guest {
width: var( --tlpb-account-btn-h );
padding: 0;
} .tlpb-account-btn__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect( 0 0 0 0 );
clip-path: inset( 50% );
white-space: nowrap;
border: 0;
}
body a.tlpb-account-btn:hover,
body a.tlpb-account-btn:focus,
body a.tlpb-account-btn:visited {
color: var( --tlpb-on-accent );
text-decoration: none;
}
body a.tlpb-account-btn:hover,
body .tlpb-account-btn-wrap.is-open a.tlpb-account-btn {
filter: brightness( 1.15 );
}
body a.tlpb-account-btn:focus-visible {
outline: 2px solid var( --tlpb-plum );
outline-offset: 2px;
}
.tlpb-account-btn__icon {
flex: 0 0 auto;
} .tlpb-account-btn__name {
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
}
.tlpb-account-btn__caret {
flex: 0 0 auto;
transition: transform 0.15s ease;
} .tlpb-account-btn-wrap {
position: relative;
display: inline-block;
vertical-align: middle;
} .tlpb-account-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 9995;
width: var( --tlpb-account-menu-w );
padding-top: var( --tlpb-space-2 );
visibility: hidden;
opacity: 0;
transform: translateY( -4px );
transition: opacity 0.15s ease 0.3s, transform 0.15s ease 0.3s, visibility 0s linear 0.45s;
}
.tlpb-account-btn-wrap.is-open .tlpb-account-menu,
.tlpb-account-btn-wrap:focus-within .tlpb-account-menu {
visibility: visible;
opacity: 1;
transform: none;
transition-delay: 0s;
} .tlpb-account-btn-wrap.is-dismissed .tlpb-account-menu {
visibility: hidden;
opacity: 0;
transition: none;
} @media ( hover: hover ) {
.tlpb-account-btn-wrap:hover .tlpb-account-menu {
visibility: visible;
opacity: 1;
transform: none;
transition-delay: 0s;
}
.tlpb-account-btn-wrap:hover .tlpb-account-btn__caret {
transform: rotate( 180deg );
}
}
.tlpb-account-btn-wrap.is-open .tlpb-account-btn__caret,
.tlpb-account-btn-wrap:focus-within .tlpb-account-btn__caret {
transform: rotate( 180deg );
}
.tlpb-account-menu__panel {
padding: var( --tlpb-space-2 );
border: 1px solid var( --tlpb-line );
border-radius: var( --tlpb-radius-md );
background: var( --tlpb-panel );
box-shadow: var( --tlpb-shadow-card );
} .tlpb-account-menu__info {
margin: 0 0 var( --tlpb-space-1 );
padding: var( --tlpb-space-2 ) var( --tlpb-space-3 );
border-bottom: 1px solid var( --tlpb-line );
color: var( --tlpb-ink-muted );
font-family: var( --tlpb-font-heading );
font-size: var( --tlpb-text-sm );
font-weight: 600;
line-height: 1.3;
}
.tlpb-account-menu__info strong {
color: var( --tlpb-ink );
font-weight: 800;
}
.tlpb-account-menu__list {
margin: 0;
padding: 0;
list-style: none;
}
.tlpb-account-menu__list li {
margin: 0;
padding: 0;
list-style: none;
}
body a.tlpb-account-menu__link {
display: flex;
align-items: center;
min-height: 44px; padding: 0 var( --tlpb-space-3 );
border-radius: var( --tlpb-radius-sm );
color: var( --tlpb-ink );
font-family: var( --tlpb-font-heading );
font-size: var( --tlpb-text-body );
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
body a.tlpb-account-menu__link:hover,
body a.tlpb-account-menu__link:focus-visible {
background: var( --tlpb-surface );
color: var( --tlpb-plum );
text-decoration: none;
}
body a.tlpb-account-menu__link:focus-visible {
outline: 2px solid var( --tlpb-plum );
outline-offset: -2px;
} .tlpb-account-menu__list li.tlpb-account-menu__item--logout {
margin-top: var( --tlpb-space-1 );
padding-top: var( --tlpb-space-1 );
border-top: 1px solid var( --tlpb-line );
}
body a.tlpb-account-menu__link--logout {
color: var( --tlpb-ink-muted );
font-weight: 600;
}  .tlpb-account-rows {
--tlpb-account-row-h: 48px; display: flex;
flex-direction: column;
color: var( --tlpb-ink );
font-family: var( --tlpb-font-heading );
}
.tlpb-account-rows__name {
display: flex;
align-items: center;
gap: var( --tlpb-space-2 );
min-height: var( --tlpb-account-row-h );
margin: 0;
color: inherit;
font-size: var( --tlpb-text-lg );
font-weight: 800;
}
.tlpb-account-rows__info {
margin: 0;
padding-bottom: var( --tlpb-space-2 );
color: var( --tlpb-ink-muted );
font-size: var( --tlpb-text-sm );
font-weight: 600;
}
.tlpb-account-rows__info strong {
color: inherit;
font-weight: 800;
}
body a.tlpb-account-rows__link {
display: flex;
align-items: center;
gap: var( --tlpb-space-2 );
min-height: var( --tlpb-account-row-h );
border-top: 1px solid var( --tlpb-line );
color: inherit;
font-family: var( --tlpb-font-heading );
font-size: var( --tlpb-text-body );
font-weight: 700;
text-decoration: none;
} body a.tlpb-account-rows__link:first-child {
border-top: 0;
}
body a.tlpb-account-rows__link:hover,
body a.tlpb-account-rows__link:focus,
body a.tlpb-account-rows__link:visited {
color: inherit;
text-decoration: none;
}
body a.tlpb-account-rows__link:focus-visible {
outline: 2px solid var( --tlpb-plum );
outline-offset: 2px;
}
body a.tlpb-account-rows__link--logout,
body a.tlpb-account-rows__link--logout:hover,
body a.tlpb-account-rows__link--logout:visited {
color: var( --tlpb-ink-muted );
font-weight: 600;
}
@media ( prefers-reduced-motion: reduce ) {
body a.tlpb-account-btn,
.tlpb-account-btn__caret,
.tlpb-account-menu {
transition: none;
}
}