/* /js/account-chip.css - the shared signed-in chip.
   Deliberately quiet: it inherits the surface's font, size and colour, so the
   same markup reads as native in a nav, a header bar or a corner. */

.ccu-account{
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  font: inherit;
  color: inherit;
  white-space: nowrap;
}

.ccu-account .ccu-acct-who{
  opacity: .7;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Explicit, not inherited from the browser default. A sibling element on the
   landing page carried a display rule that silently beat the hidden attribute,
   and the address stayed on screen. Not risking the same here. */
.ccu-account .ccu-acct-who[hidden]{ display: none !important; }

.ccu-account .ccu-acct-out,
.ccu-account .ccu-acct-in{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: .92;
  -webkit-appearance: none;
  appearance: none;
}

.ccu-account .ccu-acct-out:hover,
.ccu-account .ccu-acct-in:hover,
.ccu-account .ccu-acct-out:focus-visible,
.ccu-account .ccu-acct-in:focus-visible{
  opacity: 1;
}