/* Domovoi · account avatar + menu. Sits in a dark nav bar; the panel is light. */

.dv-acct { position: relative; flex-shrink: 0; display: inline-flex; }

.dv-acct-btn {
  position: relative; display: inline-flex; align-items: center;
  padding: 0; border: none; background: none; cursor: pointer; line-height: 0;
}
.dv-acct-btn.pair { padding-right: 20px; }

.dv-acct-orb {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 800;
  color: var(--plum-800); background: var(--butter-200);
  border: 1.5px solid rgba(252,251,246,0.55);
  transition: border-color var(--dur, .18s) var(--ease, ease);
}
.dv-acct-orb.b {
  position: absolute; left: 19px; top: 0;
  background: var(--coral-200); border-color: rgba(252,251,246,0.55);
}
.dv-acct-btn:hover .dv-acct-orb,
.dv-acct-btn[aria-expanded="true"] .dv-acct-orb { border-color: var(--milk-50); }
.dv-acct-btn:focus-visible { outline: 2px solid var(--butter-200); outline-offset: 3px; border-radius: 999px; }

.dv-acct-orb.big {
  width: 38px; height: 38px; font-size: 15px;
  border: 1.5px solid var(--plum-800); position: static;
}

/* ---- panel ---- */
.dv-acct-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 200;
  width: 274px; text-align: left;
  background: var(--milk-50); border: 1.5px solid var(--plum-800);
  border-radius: 14px; box-shadow: 5px 5px 0 var(--plum-800); overflow: hidden;
}
.dv-acct.dv-acct-open .dv-acct-panel { display: block; }

.dv-acct-head { display: flex; align-items: center; gap: 11px; padding: 14px; border-bottom: 1.5px solid var(--milk-200); }
.dv-acct-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dv-acct-name { font-family: var(--font-body); font-weight: 800; font-size: 14.5px; color: var(--plum-800); }
.dv-acct-mail { font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dv-acct-pair {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1.5px solid var(--milk-200);
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  background: var(--pistachio-100, #EAF3E6); color: var(--pistachio-500, #4F8842);
}
.dv-acct-pair.invite { background: var(--coral-100); color: var(--coral-500); }
.dv-acct-pair.invite:hover { background: var(--coral-200); }
.dv-acct-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pistachio-400, #6FB35E); flex-shrink: 0; }

.dv-acct-items { padding: 5px; }
.dv-acct-item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 10px; border-radius: 8px; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--plum-800);
}
.dv-acct-item:hover { background: var(--milk-100); }
.dv-acct-item.quiet { color: var(--fg-2); }
.dv-acct-item svg { color: var(--fg-3); flex-shrink: 0; }
.dv-acct-item i {
  margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
  border: 1.5px solid var(--milk-300); border-radius: 999px; padding: 2px 7px;
}
.dv-acct-item.is-soon { cursor: default; color: var(--fg-3); }
.dv-acct-item.is-soon:hover { background: none; }
.dv-acct-sep { height: 1.5px; background: var(--milk-200); margin: 5px 0; }

/* ---- phone: a sheet under the bar, not a floating card ---- */
@media (max-width: 620px) {
  .dv-acct { position: static; }
  .dv-acct-panel {
    right: 12px; left: 12px; width: auto; top: calc(100% + 8px);
  }
}
@media print { .dv-acct { display: none; } }