/* Bayan Learning - signed-in account menu in the WordPress header. */
.bayan-acct { position: relative; display: inline-flex; align-items: center; }

.bayan-acct__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding-block: 4px; padding-inline-start: 4px; padding-inline-end: 10px;
  border: 1px solid var(--border, rgba(15, 10, 24, .12)); border-radius: 999px;
  background: var(--surface, #fff); color: inherit;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
.bayan-acct__btn:hover { background: var(--bayan-50, #f7f3fb); border-color: var(--bayan-300, #bfa5d8); }
.bayan-acct__btn:focus-visible,
.bayan-acct__item:focus-visible { outline: 2px solid var(--bayan-500, #8668b2); outline-offset: 2px; }

.bayan-acct__avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bayan-700, #5e4283); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.bayan-acct__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bayan-acct__chev { flex: none; opacity: .6; transition: transform .15s; }
.bayan-acct__btn[aria-expanded="true"] .bayan-acct__chev { transform: rotate(180deg); }

.bayan-acct__menu {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
  z-index: 70; min-width: 232px; padding: 8px;
  background: var(--surface, #fff); color: var(--text, #18102a);
  border: 1px solid var(--border, rgba(15, 10, 24, .1)); border-radius: 16px;
  box-shadow: 0 18px 40px -16px rgba(45, 30, 64, .35);
  text-align: start;
}
.bayan-acct__menu[hidden] { display: none; }

.bayan-acct__who {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border, rgba(15, 10, 24, .1));
}
.bayan-acct__who strong { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.bayan-acct__who span { font-size: 12px; opacity: .65; overflow-wrap: anywhere; }

.bayan-acct__item {
  display: block; padding: 9px 12px; border-radius: 10px;
  color: inherit; font-size: 14px; font-weight: 500; text-decoration: none;
}
.bayan-acct__item:hover { background: var(--bayan-50, #f7f3fb); color: var(--bayan-700, #5e4283); }

/* Phones: avatar only, the full menu lives in the hamburger panel too. */
@media (max-width: 639px) {
  .bayan-acct__name, .bayan-acct__chev { display: none; }
  .bayan-acct__btn { padding: 3px; }
  .bayan-acct__menu { min-width: min(260px, calc(100vw - 32px)); }
}

/* Mobile hamburger panel. */
#bayan-mobile-menu .bayan-acct-m__who {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 12px 12px 10px; margin-bottom: 4px;
  border-top: 1px solid var(--border, rgba(15, 10, 24, .1));
  border-bottom: 1px solid var(--border, rgba(15, 10, 24, .1));
}
#bayan-mobile-menu .bayan-acct-m__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#bayan-mobile-menu .bayan-acct-m__txt strong { font-size: 14px; }
#bayan-mobile-menu .bayan-acct-m__txt small { font-size: 12px; opacity: .65; }

[data-theme="dark"] .bayan-acct__btn,
body.dark-mode .bayan-acct__btn { background: var(--bayan-900, #2d1e40); border-color: rgba(255, 255, 255, .16); }
[data-theme="dark"] .bayan-acct__menu,
body.dark-mode .bayan-acct__menu { background: var(--bayan-950, #1a1129); color: #f4effb; border-color: rgba(255, 255, 255, .14); }
[data-theme="dark"] .bayan-acct__item:hover,
body.dark-mode .bayan-acct__item:hover { background: var(--bayan-900, #2d1e40); color: #fff; }

/* Returning signed-in visitor: until the live answer arrives, Sign in is gone
   and Get started becomes an invisible placeholder as wide as the chip will
   be (the width is remembered from the last visit), so nothing shifts when the
   chip appears. The head script lifts all of this after 2.5s as a fail-safe. */
html.bayan-auth-hint #bayan-clone-header a[href*="/app/login"] { display: none; }
html.bayan-auth-hint #bayan-clone-header a[href*="/app/signup"] {
  visibility: hidden;
  box-sizing: border-box;
  width: var(--bayan-chip-w, 112px);
  padding-inline: 0 !important;
  overflow: hidden;
  white-space: nowrap;
}