/* Profile pictures, the account menu and Edit profile ----------------------------------- */

.avatar-img {
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--avatar-bg);
}
.user-chip .avatar-img { width: 28px; height: 28px; transition: box-shadow 120ms ease-out; }
.user-chip:hover .avatar-img,
.user-chip[aria-expanded="true"] .avatar-img { box-shadow: 0 0 0 2px var(--brand); }
.avatar-img.avatar-xl { width: 56px; height: 56px; }
.avatar-img.avatar-xxl { width: 96px; height: 96px; }
.acc-hero-avatar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.acc-hero-avatar .link-btn { font-size: 11px; }

/* Account menu: who you are, what you can do, the theme, then Log out. Groups are separated by
   space and two faint rules (under the header, above Log out). */
.menu-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--menu-rule);
}
.menu-profile .avatar-img { width: 44px; height: 44px; }
.menu-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.menu-name-row strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-handle {
  font-size: 12.5px;
  line-height: 17px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Role badge: a quiet outlined pill beside the name */
.menu-profile .role-badge {
  flex: 0 0 auto;
  padding: 0 7px;
  border: 1px solid var(--menu-rule);
  background: var(--menu-pill);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu-profile .role-badge.role-admin {
  border-color: var(--badge-admin-edge);
  background: var(--badge-admin-bg);
  color: var(--badge-admin-text);
}

/* Keyboard shortcut pill */
.menu-kbd {
  margin-left: auto;
  min-width: 0;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: var(--menu-pill);
  color: var(--text-muted);
  font: 500 11px/14px var(--font);
  letter-spacing: 0.02em;
}
/* No keyboard on a touchscreen, so no shortcut hint */
@media (hover: none) { .menu-kbd { display: none; } }

/* Theme: a three-way segmented control. Real radio buttons underneath, so arrow keys move
   between the options and screen readers hear a radio group. */
.menu-theme {
  padding: 4px 6px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--menu-rule);
}
.menu-theme-label { display: block; margin: 0 2px 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--menu-pill);
}
.segmented label { position: relative; display: block; cursor: pointer; }
.segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-muted);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.segmented .icon { width: 13px; height: 13px; }
.segmented label:hover span { color: var(--text); }
.segmented input:checked + span {
  background: var(--segment-on);
  box-shadow: var(--segment-on-shadow);
  color: var(--text);
  font-weight: 600;
}
.segmented input:focus-visible + span { outline: var(--focus); outline-offset: 1px; }

/* Log out: one red for the label, icon and hover wash */
.menu-logout { color: var(--danger); }
.menu-logout:hover { background: var(--menu-danger-hover); color: var(--danger); }

/* The glass needs backdrop-filter; without it, or when the reader asks for less transparency,
   the menu is the plain solid surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu { background: var(--surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .menu { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .menu { border-color: CanvasText; }
  .segmented input:checked + span { outline: 2px solid Highlight; }
}

@media (pointer: coarse) {
  .menu-item { min-height: 44px; }
  .segmented span { height: 36px; }
}

/* Edit profile */
.profile-modal { width: min(480px, 100%); }
.avatar-edit { display: flex; align-items: center; gap: 16px; margin: 4px 0 14px; }
.avatar-drop { position: relative; flex: 0 0 96px; border-radius: 50%; cursor: pointer; }
.avatar-drop:focus-within .avatar-img { outline: var(--focus); outline-offset: 3px; }
.avatar-drop.is-over .avatar-img { outline: 3px dashed var(--brand); outline-offset: 3px; }
.avatar-drop-badge {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--surface-solid);
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-accent);
}
.avatar-actions { flex: 1; min-width: 0; }
.avatar-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-actions .sub { margin: 8px 0 0; font-size: 11.5px; }
.avatar-actions .form-error { min-height: 0; margin: 6px 0 0; }

@media (max-width: 850px) {
  /* The Profile tab (last cell of the phone bar) and the menu that rises from it */
  .bottom-nav .nav-profile .nav-avatar { width: 24px; height: 24px; }
  .bottom-nav .nav-profile[aria-expanded="true"] { background: var(--active-tab); color: var(--brand); }
  .bottom-nav .nav-profile[aria-expanded="true"] .nav-avatar { box-shadow: 0 0 0 2px var(--brand); }
  .menu {
    position: fixed;
    top: auto;
    left: auto;
    right: 8px;
    bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom));
    z-index: 40;
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100dvh - var(--nav-h) - 24px);
    overflow-y: auto;
    transform-origin: bottom right;
  }
  .mobile-header .topbar-right { gap: 0; }
  .avatar-edit { flex-direction: column; align-items: flex-start; }
}