/* Admin mode banner */
/* ================= */
.admin-mode-banner-container {}

.admin-mode-banner {
  display: inline-flex;
  align-items: center;
  column-gap: 0.4rem;

  padding: 0.3rem 0.75rem;

  border: 1px solid color-mix(in srgb, var(--bs-danger) 80%, #000);
  border-radius: 999px;            /* full pill */

  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  color: var(--bs-danger-text-emphasis);
  background-color: var(--bs-danger-bg-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Render the icon as its own flex box so its glyph descender space doesn't
   push the pill's content off-centre against the navbar's centred items. */
.admin-mode-banner .bi {
  display: flex;
  line-height: 1;
}