/* ==========================================================================
   The top bar's magnifier and avatar (js/components/top-menus.js). Round
   glass buttons since the new look (2026-10-17); the popover is the Accounts menu's
   window (radius 22, one ring, no animation). One pair sits in the top menu
   (.top-menu--desk), one in the phone's top bar (.top-menu--phone); the
   stylesheet shows one of them.
   ========================================================================== */

.top-menu {
  position: relative;
  flex: none;
}

.top-menu--phone {
  display: none;
}

/* The "?" waits for a signed-in journal (top-menus.js mountHelp); the
   phone's display rule below must not bring it back. */
.top-menu[hidden] {
  display: none !important;
}

.top-tool,
.top-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
}

.top-tool {
  background: var(--tool-bg);
  box-shadow: var(--tool-edge);
  color: var(--text-2);
}

.top-tool:hover,
.top-menu.is-open > .top-tool {
  color: var(--text-1);
}

.top-avatar {
  background: var(--tile-2);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
}

.top-tool:focus-visible,
.top-avatar:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
}

.top-menu.is-open > .top-avatar {
  box-shadow: inset 0 0 0 1.5px var(--text-3);
}

.top-avatar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-top-face] {
  display: grid;
  place-items: center;
}

/* ---- The popover ---- */
.top-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  padding: 8px;
  border-radius: 22px;
  background: var(--desk-hi);
  box-shadow: 0 0 0 1px var(--color-border-strong), 0 24px 48px -16px rgba(0, 0, 0, 0.6);
  color: var(--text-1);
}

.top-pop[hidden] {
  display: none;
}

/* A column: the field, the results (they scroll inside their own box) and the
   "Show all" row under them. The footer is its own row, never laid over the
   last result, however tall the results get. */
.top-pop--search {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
}

.top-pop--search > * {
  flex: none;
}

.top-pop--search > .top-pop__list {
  flex: 0 1 auto;
  min-height: 0;
}

.top-pop--user {
  width: 220px;
}

.top-pop__field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--tile);
  color: var(--text-3);
}

.top-pop__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text-1);
}

.top-pop__input::placeholder {
  color: var(--text-3);
}

.top-pop__input::-webkit-search-cancel-button {
  display: none;
}

.top-pop__field:focus-within {
  box-shadow: 0 0 0 2px var(--lead);
}

.top-pop__list {
  max-height: min(60vh, 420px);
  margin-top: 4px;
  overflow-y: auto;
}

.top-pop__row,
.top-pop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}

/* is-active: the combobox's highlighted result (focus stays in the field). */
.top-pop__row:hover,
.top-pop__row.is-active,
.top-pop__item:hover,
.top-pop__item:focus-visible {
  background: var(--tile);
  outline: none;
}

.top-pop__row.is-active,
.top-pop__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--lead);
}

.top-pop__item:focus-visible {
  outline: none;
}

/* Sign out with unsent changes (v12's one alert): the three choices stacked. */
.modal--alert .modal__footer.modal__footer--stack {
  flex-direction: column;
}

.modal--alert .modal__footer--stack > .btn {
  flex: none;
}

.top-pop__row > span:first-child {
  display: grid;
  min-width: 0;
}

.top-pop__main {
  font-weight: 500;
}

.top-pop__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 13px;
  color: var(--text-2);
}

.top-pop__val {
  flex: none;
  font-weight: 600;
  color: var(--text-2);
}

.top-pop__val.is-gain {
  color: var(--gain);
}

.top-pop__val.is-loss {
  color: var(--loss);
}

.top-pop__note {
  margin: 0;
  padding: 8px 14px 4px;
  font-size: 12px;
  color: var(--text-3);
}

.top-pop__note:empty {
  display: none;
}

.top-pop__who {
  margin: 0;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- A phone: the top bar carries them; the popover spans the bar ---- */
@media (max-width: 880px) {
  .top-menu--desk {
    display: none;
  }

  .top-menu--phone {
    display: block;
    position: static;
  }

  .top-tool {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .topbar {
    position: relative;
  }

  .topbar__avatar {
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  .top-menu.is-open > .topbar__avatar {
    box-shadow: inset 0 0 0 1.5px var(--text-3);
  }

  .top-pop {
    top: calc(100% + 8px);
    right: var(--space-4);
    left: var(--space-4);
    width: auto;
  }

  .top-pop--user {
    left: auto;
    width: 220px;
  }
}