/* ============================================================
   Drawer-top user widget (mvsd-uw)
   Renders at the very top-right of the utility drawer.
   - Anon: small "Login" pill
   - Auth: 28px avatar + first name + native <details> dropdown
   ============================================================ */

/* The .drawer-user-widget wrapper sits between the drawer title and
   the close button. Push it to the right of the title using margin
   so the close button stays at the absolute right edge. */
.drawer-header .drawer-user-widget {
  margin-left: auto;
  margin-right: 0.6rem;
  display: inline-flex;
  align-items: center;
}

.mvsd-uw {
  display: inline-flex;
  align-items: center;
  position: relative;
  align-self: flex-end;     /* push to right edge inside drawer-header flex */
  margin: 0 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

/* ── Anon "Login" link ────────────────────────────────────── */
.mvsd-uw__login {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: background 150ms ease, border-color 150ms ease;
}
.mvsd-uw__login:hover,
.mvsd-uw__login:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  text-decoration: none;
}
.mvsd-uw__login:focus-visible {
  outline: 2px solid var(--color-focus-ring-on-dark, #ffbf47);
  outline-offset: 2px;
}

/* ── Auth: details/summary dropdown ───────────────────────── */
details.mvsd-uw {
  /* details element is block by default; switch to inline-flex via the
     .mvsd-uw base class above. summary takes the flex row. */
}

.mvsd-uw__trigger {
  list-style: none;            /* hide default disclosure triangle */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.55rem 0.2rem 0.25rem;
  border-radius: 999px;
  user-select: none;
  transition: background 150ms ease;
}
.mvsd-uw__trigger::-webkit-details-marker {
  display: none;
}

.mvsd-uw__trigger:hover,
.mvsd-uw[open] .mvsd-uw__trigger {
  background: rgba(255, 255, 255, 0.12);
}

.mvsd-uw__trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring-on-dark, #ffbf47);
  outline-offset: 2px;
}

.mvsd-uw__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--color-primary, #01491f) 18%, #fff);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mvsd-uw__avatar--initial {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary, #01491f);
  background: var(--color-accent, #c5a000);
}

.mvsd-uw__name {
  max-width: 9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mvsd-uw__chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 150ms ease;
  margin-left: 0.15rem;
}

.mvsd-uw[open] .mvsd-uw__chevron {
  transform: rotate(-135deg) translate(-1px, -1px);
}

/* ── Dropdown menu (the panel that appears under the trigger) ──
   Lives inside the dark drawer (desktop) or mobile menu, so we have to
   fight their `a { color: rgba(255,255,255,...) }` and `color: white`
   cascades. Bump specificity by including the container in the selectors
   and pin explicit colors on the panel + its links. */
.utility-drawer .mvsd-uw__menu,
.mobile-menu .mvsd-uw__menu,
.mvsd-uw__menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 180px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1a2a20);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border, #e2e8e5);
  padding: 0.3rem 0;
  z-index: 50;
}

/* In the mobile menu the widget sits at the LEFT of the header (close
   button is on the right). Anchor the dropdown to the widget's left edge
   so it opens into the panel rather than overflowing the panel's left
   side. The mobile panel is 320px so 180px min-width fits cleanly. */
.mobile-menu .mvsd-uw__menu {
  right: auto;
  left: 0;
}

.utility-drawer .mvsd-uw__menu a.mvsd-uw__menu-item,
.mobile-menu .mvsd-uw__menu a.mvsd-uw__menu-item,
.mvsd-uw__menu-item {
  display: block;
  padding: 0.55rem 0.95rem;
  color: var(--color-text, #1a2a20);
  background: transparent;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.utility-drawer .mvsd-uw__menu a.mvsd-uw__menu-item:hover,
.utility-drawer .mvsd-uw__menu a.mvsd-uw__menu-item:focus-visible,
.mobile-menu .mvsd-uw__menu a.mvsd-uw__menu-item:hover,
.mobile-menu .mvsd-uw__menu a.mvsd-uw__menu-item:focus-visible,
.mvsd-uw__menu-item:hover,
.mvsd-uw__menu-item:focus-visible {
  background: color-mix(in srgb, var(--color-primary, #01491f) 8%, #fff);
  color: var(--color-primary, #01491f);
  text-decoration: none;
}
.mvsd-uw__menu-item:focus-visible {
  outline: 2px solid var(--color-focus-ring, #b45309);
  outline-offset: -2px;
}

/* Quick-links section label + divider inside the dropdown */
.mvsd-uw__label {
  padding: 0.35rem 0.85rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-primary, #01491f) 55%, #666);
}
.mvsd-uw__divider {
  height: 1px;
  margin: 0.3rem 0;
  background: color-mix(in srgb, var(--color-primary, #01491f) 14%, #e5e5e5);
}

/* Hide name (keep avatar only) on phone widths where space is tight */
@media (max-width: 480px) {
  .mvsd-uw__name {
    display: none;
  }
}