/* Menus and notices: popover menu (language), account menu (details, so Log out works everywhere) and one-time notices above the page. */
/* Menus are popovers: the browser handles open, close on outside click and Escape, and focus */
.menu[popover] {
  position: fixed;
  inset: auto;
  inset-block-start: calc(var(--topbar-h) + var(--s-1));
  inset-inline-end: var(--s-3);
  min-inline-size: 13rem;
  max-block-size: 70vh;
  margin: 0;
  padding: var(--s-2);
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    display var(--dur) allow-discrete,
    overlay var(--dur) allow-discrete;
}

.menu[popover]:popover-open {
  opacity: 1;
  transform: none;
}

@starting-style {
  .menu[popover]:popover-open {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@supports (anchor-name: --lang) {
  #lang-menu {
    position-anchor: --lang;
    inset-block-start: calc(anchor(bottom) + var(--s-1));
    inset-inline-end: anchor(end);
  }
}

/* Without the Popover API the footer's language list stands in for the menu */
@supports not selector(:popover-open) {
  .lang {
    display: none;
  }
}

.lang-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-list a {
  display: block;
  font-family: var(--font-system);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.lang-list a:hover,
.lang-list a[aria-current] {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
}

.lang-list a[aria-current] {
  font-weight: 800;
}

.account {
  position: relative;
}

.account > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: var(--fw-strong);
  list-style: none;
  cursor: pointer;
}

.account > summary:hover,
.account[open] > summary {
  background: var(--surface-2);
}

.account > summary::-webkit-details-marker {
  display: none;
}

.account-name {
  display: none;
  max-inline-size: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .account-name {
    display: inline;
  }
}

.account-list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s-1));
  min-inline-size: 12rem;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.account-list a,
.account-list button {
  display: block;
  inline-size: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.account-list a:hover,
.account-list button:hover {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
}

/* One-time notices above the page */
.messages {
  max-inline-size: 38rem;
  margin: var(--s-4) auto 0;
  padding-inline: var(--s-4);
}

.message {
  margin: 0 0 var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in oklab, var(--c-teal) 18%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--c-teal) 60%, transparent);
  border-radius: var(--radius-sm);
}

.message-error,
.message-warning {
  background: color-mix(in oklab, var(--c-coral) 20%, var(--surface));
  border-color: var(--c-coral);
}

@media (max-width: 479px) {
  .account > summary {
    padding-inline: var(--s-2);
  }
}