/* The account line ("Signed in as Amanda · Log out", the failure line under it) and the one danger button, the same
   on every page that has them: the player rooms (after /assets/site.css), the front door, the Home Lab and the admin.
   Tokens: a room's own (--ink-muted, --border-accent, --accent-strong), else the lab's and front door's
   (--ink-mid, --hairline, --accent). --danger is each page's: the one danger red (dark #ef8f7a, light #b42318). */
/* Top right of the masthead on every page. */
.who { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8, 8px); font-size: 13.5px; color: var(--ink-muted, var(--ink-mid)); }
.who[hidden] { display: none; }
/* The Log out failure line ("Couldn't log out. Try again."): the row right under the button (4px row gap), only when there is something to say. */
.who [role="status"] { flex-basis: 100%; text-align: right; color: var(--danger); font-size: 12.5px; }
.who [role="status"]:empty { display: none; }
.who > span { min-width: 0; max-width: 100%; }
.who strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; display: inline-block; max-width: 100%; line-height: 1.3; overflow: hidden; vertical-align: bottom; }
/* The outlined Log out button (44px tall). */
.who button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--border-accent, var(--hairline)); border-radius: 10px; padding: 7px 12px; min-height: 44px;
}
.who button:hover { border-color: var(--accent); color: var(--accent-strong, var(--accent)); }
.who button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Phones: the account line sits on its own row, name left and Log out right, on every page. */
@media (max-width: 560px) {
  .who { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
}
@media (pointer: coarse), (max-width: 860px) {
  .who button { min-height: 44px; }
}

/* The one danger button (the Characters page takes it without the button set; the admin's buttons are plain <button>s):
   outlined in the danger colour, a soft wash on hover. */
.btn.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 70%, transparent); }
.btn.btn-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); color: var(--danger); }