/* Ui::AccountComponent — a conta na linha do breadcrumb.
   Duas correções, uma sobre a outra: o e-mail saiu da linha dos BOTÕES (identidade não é ação) e
   NÃO virou um avatar de iniciais — contas de ambientes diferentes colidem nas mesmas duas letras,
   e é o ambiente que se precisa distinguir. Então o endereço fica por extenso, no mesmo mono
   discreto do breadcrumb, na linha que já responde "onde estou". O "Sair" desce para um menu:
   ele é raro, e não precisa ocupar a barra o tempo todo. */

.c-ui-account{ position: relative; flex: 0 0 auto; }

.c-ui-account__trigger{
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px; padding: 3px 0;
  color: var(--ink-3); transition: color var(--t1) var(--ease);
}
.c-ui-account__trigger::-webkit-details-marker{ display: none; }
.c-ui-account__trigger:hover{ color: var(--ink); }
.c-ui-account__trigger:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }
.c-ui-account[open] .c-ui-account__trigger{ color: var(--ink); }

/* mesma voz do breadcrumb: mono, caixa alta, tracking largo — é cromo de contexto, não um botão */
.c-ui-account__host{
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.c-ui-account__caret{
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--t1) var(--ease);
}
.c-ui-account[open] .c-ui-account__caret{ transform: rotate(180deg); }

.c-ui-account__menu{
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 108px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -22px rgba(17, 17, 17, .5);
  animation: c-ui-account-in 120ms var(--ease) both;
}
@keyframes c-ui-account-in{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }

/* "Sair" é ITEM DE MENU, não CTA: sem borda, sem preenchimento, altura de linha — a ação é rara e
   não merece o peso de um botão primário. Só o hover a materializa. */
.c-ui-account__menu form{ margin: 0; }
.c-ui-account__out{
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 7px 9px;
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.c-ui-account__out:hover{ background: var(--surface-sunken); color: var(--danger); }
.c-ui-account__out:focus-visible{ outline: 2px solid var(--brand); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce){ .c-ui-account__menu{ animation: none; } }

/* ── variante :rail (doc 51) ──────────────────────────────────────────────────
   No rail de 52px o e-mail por extenso não cabe: o gatilho vira o bloco de iniciais e o extenso
   desce para a PRIMEIRA LINHA do menu — distinguir o ambiente continua a um clique. O menu abre
   para a DIREITA e para CIMA (a conta mora no pé do rail; para baixo sairia da tela). */
.c-ui-account--rail .c-ui-account__initials{
  display: grid; place-items: center; width: 30px; height: 30px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .04em;
  color: var(--surface); background: var(--brand);
}
.c-ui-account--rail .c-ui-account__trigger{ padding: 0; }
.c-ui-account--rail .c-ui-account__menu{
  top: auto; bottom: 0; right: auto; left: calc(100% + 10px);
  min-width: 180px;
  animation-name: c-ui-account-in-rail;
}
@keyframes c-ui-account-in-rail{ from{ opacity: 0; transform: translateX(-4px); } to{ opacity: 1; transform: none; } }
/* o e-mail que abre o menu: identidade, não ação — sem hover, separado do "Sair" pela hairline */
.c-ui-account__who{
  display: block; padding: 8px 9px; border-bottom: var(--bd);
  font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); word-break: break-all;
}