/* User menu in the top bar (disclosure pattern, markup by components/UserMenu.html.twig). */

.sv-usermenu {
  position: relative;
}

.sv-usermenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  max-width: 18rem;
  min-height: 2.75rem;
  padding: var(--sv-space-1) var(--sv-space-2);
  border: 0;
  border-radius: var(--sv-radius-md);
  background: transparent;
  color: var(--sv-color-on-topbar);
  text-align: start;
}
.sv-usermenu__toggle:hover,
.sv-usermenu__toggle[aria-expanded="true"] { background: var(--sv-color-topbar-hover); }
.sv-usermenu__toggle .sv-icon { flex: none; }
.sv-usermenu__toggle[aria-expanded="true"] .sv-usermenu__chevron { transform: rotate(180deg); }
.sv-usermenu__chevron { transition: transform var(--sv-duration-fast) var(--sv-ease); }

.sv-usermenu__avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-color-primary);
  color: var(--sv-color-on-primary);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-bold);
  text-transform: uppercase;
}

.sv-usermenu__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--sv-leading-tight);
}
.sv-usermenu__name,
.sv-usermenu__role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-usermenu__name { font-size: var(--sv-text-sm); font-weight: var(--sv-weight-semibold); }
.sv-usermenu__role { color: var(--sv-color-on-topbar-muted); font-size: var(--sv-text-xs); }
@media (max-width: 47.99em) {
  .sv-usermenu__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.sv-usermenu__panel {
  position: absolute;
  z-index: var(--sv-z-dropdown);
  inset-block-start: calc(100% + var(--sv-space-2));
  inset-inline-end: 0;
  width: min(20rem, calc(100vw - 1rem));
  padding: var(--sv-space-2);
  border: 1px solid var(--sv-color-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-color-surface);
  color: var(--sv-color-text);
  box-shadow: var(--sv-shadow-lg);
  animation: sv-pop-in var(--sv-duration-fast) var(--sv-ease);
}

.sv-usermenu__header {
  padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-3);
  border-bottom: 1px solid var(--sv-color-border);
}
.sv-usermenu__header .sv-usermenu__name { display: block; font-size: var(--sv-text-md); }
.sv-usermenu__scope {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  margin: var(--sv-space-1) 0 0;
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-sm);
}

.sv-usermenu__section {
  padding: var(--sv-space-3);
  border-bottom: 1px solid var(--sv-color-border);
}
.sv-usermenu__label {
  display: block;
  margin-bottom: var(--sv-space-2);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Language switch: three submit buttons, current one aria-pressed. */
.sv-langswitch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0;
  padding: 2px;
  border-radius: var(--sv-radius-md);
  background: var(--sv-color-surface-sunken);
}
.sv-langswitch__option {
  min-height: var(--sv-control-height-sm);
  padding: var(--sv-space-1) var(--sv-space-2);
  border: 0;
  border-radius: var(--sv-radius-sm);
  background: transparent;
  color: var(--sv-color-text);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-medium);
}
.sv-langswitch__option:hover { background: var(--sv-color-surface); }
.sv-langswitch__option[aria-pressed="true"] {
  background: var(--sv-color-surface);
  color: var(--sv-color-primary);
  font-weight: var(--sv-weight-semibold);
  box-shadow: var(--sv-shadow-sm), inset 0 0 0 1px var(--sv-color-border);
}

.sv-usermenu__links {
  margin: 0;
  padding: var(--sv-space-2) 0 0;
  list-style: none;
}
.sv-usermenu__links li + li { margin: 0; }