/*
  admin.css: the few things the admin shell adds on top of the Paces kit. Colours come from
  tokens only (var(--bfau-*) or the kit's token-bound classes) and layout uses logical
  properties, so RTL needs nothing extra (StyleRules enforces both).
*/

/* ---- Brand: the logo (Appearance > Logo and icon), or the short name as a wordmark until one is chosen. ---- */
.bfau-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
}

.bfau-wordmark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 0.5rem;
  background: var(--bfau-primary);
  color: var(--bfau-on-primary);
  font-size: 1.125rem;
}

.sidenav-menu .bfau-wordmark {
  padding-block: 1.1rem;
  padding-inline: 1.25rem;
  color: var(--theme-sidenav-item-active-color, currentColor);
}

/* The Elegant skin's dark side menu marks the page you are on with WHITE text on its pale gold
   (#f2c175, 1.7:1): the selected entry was unreadable as every page loaded. The text stays the kit's
   (it also colours the wordmark above, on the dark menu); the mark becomes a deep tint of the brand
   colour, so it still reads as gold. ThemeContrastTests measures every skin and menu colour. */
html[data-skin="elegant"][data-menu-color="dark"] {
  --theme-sidenav-item-active-bg: color-mix(in srgb, var(--bfau-primary) 25%, var(--theme-sidenav-bg));
}

/* The condensed sidebar has room for the icon only. */
html[data-sidenav-size="condensed"] .sidenav-menu .bfau-wordmark-text {
  display: none;
}

/* The logo: the one that reads on its background shows (a dark side menu, or dark mode), and the
   square mark when the side menu is folded to icons. */
.bfau-logo-set {
  display: inline-flex;
  align-items: center;
}

.bfau-logo {
  display: block;
  max-inline-size: 11rem;
  max-block-size: 2.5rem;
  object-fit: contain;
}

/* Logo size (Appearance > Layout > Logo size): only the largest allowed size changes. */
html[data-bfau-logo-size="small"] .bfau-logo {
  max-inline-size: 8rem;
  max-block-size: 1.75rem;
}

html[data-bfau-logo-size="large"] .bfau-logo {
  max-inline-size: 14rem;
  max-block-size: 3.25rem;
}

html[data-bfau-logo-size="xlarge"] .bfau-logo {
  max-inline-size: 17rem;
  max-block-size: 4rem;
}

.bfau-logo-on-dark,
.bfau-logo-mark {
  display: none;
}

.bfau-logo-mark {
  inline-size: 2rem;
  block-size: 2rem;
}

html[data-bs-theme="dark"] .bfau-logo-on-light,
html[data-menu-color="dark"] .sidenav-menu .bfau-logo-on-light,
html[data-menu-color="gradient"] .sidenav-menu .bfau-logo-on-light,
html[data-menu-color="image"] .sidenav-menu .bfau-logo-on-light {
  display: none;
}

html[data-bs-theme="dark"] .bfau-logo-on-dark,
html[data-menu-color="dark"] .sidenav-menu .bfau-logo-on-dark,
html[data-menu-color="gradient"] .sidenav-menu .bfau-logo-on-dark,
html[data-menu-color="image"] .sidenav-menu .bfau-logo-on-dark {
  display: block;
}

html[data-sidenav-size="condensed"] .sidenav-menu .bfau-logo {
  display: none;
}

html[data-sidenav-size="condensed"] .sidenav-menu .bfau-logo-mark {
  display: block;
}

/* ---- Sign-in: the brand panel beside the form. ---- */
.bfau-auth-panel {
  background-image: linear-gradient(135deg, var(--bfau-auth-panel-from), var(--bfau-auth-panel-end));
  color: var(--bfau-auth-panel-text);
}

.bfau-auth-panel-muted {
  color: var(--bfau-auth-panel-muted);
}

.bfau-auth-panel .bfau-wordmark-icon {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  font-size: 2rem;
  border-radius: 1rem;
  background: var(--bfau-auth-panel-muted);
  color: var(--bfau-auth-panel-from);
}

.bfau-auth-lang {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 2;
}

/* ---- Sign-in, Photo layout (Appearance > Sign-in layout): full-bleed photographs, a dark/gold veil, the
   greeting on the start side and a frosted-glass card on the other. Tokens only (--bfau-photo-*). ---- */
.bfau-photo {
  position: relative;
  min-block-size: 100vh;
  overflow: hidden;
  background: var(--bfau-photo-ink);
  color: var(--bfau-photo-text);
}

.bfau-photo-slides,
.bfau-photo-veil {
  position: fixed;
  inset: 0;
}

.bfau-photo-slide {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease;
  animation: bfau-photo-zoom 24s linear infinite alternate;
}

.bfau-photo-slide.bfau-photo-on {
  opacity: 1;
}

@keyframes bfau-photo-zoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.12); }
}

/* Darker on the greeting's side, a breath of gold on the far side. The gradient has a fixed direction,
   so right-to-left mirrors the whole veil instead. */
.bfau-photo-veil {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--bfau-photo-ink) 82%, transparent),
    color-mix(in srgb, var(--bfau-photo-ink) 40%, transparent) 60%,
    color-mix(in srgb, var(--bfau-photo-gold) 25%, transparent));
}

html[dir="rtl"] .bfau-photo-veil {
  transform: scaleX(-1);
}

.bfau-photo-wrap {
  position: relative;
  min-block-size: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem 8vw;
}

.bfau-photo-hello {
  max-inline-size: 32.5rem;
}

.bfau-photo-crest {
  display: inline-block;
  margin-block-end: 1.5rem;
}

.bfau-photo-crest .bfau-logo {
  block-size: 5.25rem;
  inline-size: auto;
}

/* The crest sits on a photograph, so the logo made for dark backgrounds is the one that reads. */
.bfau-photo-crest .bfau-logo-on-light {
  display: none;
}

.bfau-photo-crest .bfau-logo-on-dark {
  display: block;
}

.bfau-photo-crest .bfau-wordmark-icon {
  background: var(--bfau-photo-gold);
  color: var(--bfau-photo-ink);
}

.bfau-photo-crest .bfau-wordmark-text {
  color: var(--bfau-photo-text);
}

.bfau-photo-name {
  margin: 0 0 0.75rem;
  color: var(--bfau-photo-text);
  font-size: 1.05rem;
  font-weight: 600;
}

.bfau-photo-title {
  margin: 0 0 0.75rem;
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--bfau-photo-text);
}

.bfau-photo-accent {
  color: var(--bfau-photo-gold);
}

.bfau-photo-line {
  margin: 0 0 0.375rem;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--bfau-photo-text) 90%, transparent);
}

.bfau-photo-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.75rem;
}

.bfau-photo-lang {
  --theme-btn-color: var(--bfau-photo-text);
  --theme-btn-bg: transparent;
  --theme-btn-border-color: color-mix(in srgb, var(--bfau-photo-text) 55%, transparent);
  --theme-btn-hover-color: var(--bfau-photo-text);
  --theme-btn-hover-bg: transparent;
  --theme-btn-hover-border-color: var(--bfau-photo-gold);
  --theme-btn-active-color: var(--bfau-photo-text);
  --theme-btn-active-bg: transparent;
  --theme-btn-active-border-color: var(--bfau-photo-gold);
  --bs-btn-color: var(--bfau-photo-text);
  --bs-btn-hover-color: var(--bfau-photo-text);
  --bs-btn-active-color: var(--bfau-photo-text);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  padding: 0.25rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--bfau-photo-text) 55%, transparent);
  border-radius: 1.25rem;
  background: transparent;
  color: var(--bfau-photo-text);
  font-size: 0.85rem;
  font-weight: 500;
}

.bfau-photo-lang:hover,
.bfau-photo-lang:focus-visible {
  border-color: var(--bfau-photo-gold);
  outline: 0;
}

.bfau-photo-lang.bfau-photo-active,
.bfau-photo-lang.bfau-photo-active:hover {
  --theme-btn-color: var(--bfau-photo-ink);
  --theme-btn-hover-color: var(--bfau-photo-ink);
  --theme-btn-bg: var(--bfau-photo-gold);
  --theme-btn-hover-bg: var(--bfau-photo-gold);
  background: var(--bfau-photo-gold);
  border-color: var(--bfau-photo-gold);
  color: var(--bfau-photo-ink);
}

/* The card is mostly dark so white text clears 4.5 to 1 whatever part of a photograph is behind it. The
   Bootstrap variables are re-bound here, so the form partials need no layout-specific classes. */
.bfau-photo-card {
  inline-size: 25rem;
  max-inline-size: 100%;
  padding: 2.25rem 2rem;
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--bfau-photo-ink) 68%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--bfau-photo-text) 28%, transparent);
  box-shadow: 0 1.5rem 3.75rem color-mix(in srgb, var(--bfau-photo-ink) 45%, transparent);
  --bs-body-color: var(--bfau-photo-text);
  --bs-heading-color: var(--bfau-photo-text);
  --bs-secondary-color: color-mix(in srgb, var(--bfau-photo-text) 82%, transparent);
  --bs-link-color: var(--bfau-photo-gold);
  --bs-link-hover-color: var(--bfau-photo-text);
  --bs-border-color: color-mix(in srgb, var(--bfau-photo-text) 30%, transparent);
  color: var(--bfau-photo-text);
}

.bfau-photo-card .text-muted,
.bfau-photo-card .form-text {
  color: var(--bs-secondary-color) !important;
}

.bfau-photo-card a:not(.btn) {
  color: var(--bfau-photo-gold);
}

.bfau-photo-card .form-control {
  /* Opaque, so the white text keeps its contrast whatever the card sits on (the theme contrast guard
     reads a translucent fill against the page colour, not the photo). */
  background-color: color-mix(in srgb, var(--bfau-photo-ink) 88%, var(--bfau-photo-text));
  border-color: var(--bs-border-color);
  color: var(--bfau-photo-text);
}

.bfau-photo-card .form-control::placeholder {
  color: color-mix(in srgb, var(--bfau-photo-text) 60%, transparent);
}

.bfau-photo-card .form-control:focus {
  border-color: var(--bfau-photo-gold);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bfau-photo-gold) 40%, transparent);
}

.bfau-photo-card .btn-primary {
  --theme-btn-color: var(--bfau-photo-ink);
  --theme-btn-bg: var(--bfau-photo-gold);
  --theme-btn-border-color: var(--bfau-photo-gold);
  --theme-btn-hover-color: var(--bfau-photo-text);
  --theme-btn-hover-bg: var(--bfau-photo-gold-deep);
  --theme-btn-hover-border-color: var(--bfau-photo-gold-deep);
  --theme-btn-active-color: var(--bfau-photo-text);
  --theme-btn-active-bg: var(--bfau-photo-gold-deep);
  --theme-btn-active-border-color: var(--bfau-photo-gold-deep);
  --bs-btn-bg: var(--bfau-photo-gold);
  --bs-btn-border-color: var(--bfau-photo-gold);
  --bs-btn-color: var(--bfau-photo-ink);
  --bs-btn-hover-bg: var(--bfau-photo-gold-deep);
  --bs-btn-hover-border-color: var(--bfau-photo-gold-deep);
  --bs-btn-hover-color: var(--bfau-photo-text);
  --bs-btn-active-bg: var(--bfau-photo-gold-deep);
  --bs-btn-active-border-color: var(--bfau-photo-gold-deep);
  --bs-btn-active-color: var(--bfau-photo-text);
  background-image: linear-gradient(135deg, var(--bfau-photo-gold), var(--bfau-photo-gold-deep));
  color: var(--bfau-photo-ink);
}

.bfau-photo-card .btn-primary:hover,
.bfau-photo-card .btn-primary:focus-visible {
  color: var(--bfau-photo-text);
}

.bfau-photo-card .btn-outline-primary {
  --theme-btn-color: var(--bfau-photo-gold);
  --theme-btn-bg: transparent;
  --theme-btn-border-color: var(--bfau-photo-gold);
  --theme-btn-hover-color: var(--bfau-photo-ink);
  --theme-btn-hover-bg: var(--bfau-photo-gold);
  --theme-btn-hover-border-color: var(--bfau-photo-gold);
  --theme-btn-active-color: var(--bfau-photo-ink);
  --theme-btn-active-bg: var(--bfau-photo-gold);
  --theme-btn-active-border-color: var(--bfau-photo-gold);
  --bs-btn-color: var(--bfau-photo-gold);
  --bs-btn-border-color: var(--bfau-photo-gold);
  --bs-btn-hover-bg: var(--bfau-photo-gold);
  --bs-btn-hover-border-color: var(--bfau-photo-gold);
  --bs-btn-hover-color: var(--bfau-photo-ink);
  --bs-btn-active-bg: var(--bfau-photo-gold);
  --bs-btn-active-border-color: var(--bfau-photo-gold);
  --bs-btn-active-color: var(--bfau-photo-ink);
}

/* Kit-blue accents on the other sign-in pages (the round icon above the heading) become gold. */
.bfau-photo-card .text-primary {
  color: var(--bfau-photo-gold) !important;
}

/* Opaque, so the gold glyph keeps its contrast whatever sits behind the card. */
.bfau-photo-card .bg-primary-subtle {
  background-color: color-mix(in srgb, var(--bfau-photo-gold) 22%, var(--bfau-photo-ink)) !important;
}

.bfau-photo-card .form-check-input {
  /* Opaque, so the white text keeps its contrast whatever the card sits on (the theme contrast guard
     reads a translucent fill against the page colour, not the photo). */
  background-color: color-mix(in srgb, var(--bfau-photo-ink) 88%, var(--bfau-photo-text));
  border-color: var(--bs-border-color);
}

.bfau-photo-card .form-check-input:focus {
  border-color: var(--bfau-photo-gold);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bfau-photo-gold) 40%, transparent);
}

.bfau-photo-card .form-check-input:checked {
  background-color: var(--bfau-photo-gold);
  border-color: var(--bfau-photo-gold);
}

.bfau-photo-foot {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--bfau-photo-text) 80%, transparent);
}

.bfau-photo-credit {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 1.25rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--bfau-photo-text) 80%, transparent);
}

.bfau-photo-dots {
  position: absolute;
  inset-block-end: 0.875rem;
  inset-inline-end: 1.25rem;
  display: flex;
  gap: 0.375rem;
}

.bfau-photo-dots i {
  inline-size: 1.375rem;
  block-size: 0.1875rem;
  border-radius: 0.125rem;
  background: color-mix(in srgb, var(--bfau-photo-text) 40%, transparent);
}

.bfau-photo-dots i.bfau-photo-on {
  background: var(--bfau-photo-gold);
}

@media (max-width: 820px) {
  .bfau-photo-wrap {
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1rem 3rem;
    gap: 1.5rem;
  }

  .bfau-photo-hello {
    text-align: center;
  }

  .bfau-photo-title {
    font-size: 1.8rem;
  }

  .bfau-photo-langs {
    justify-content: center;
  }

  .bfau-photo-card {
    padding: 1.5rem 1.25rem;
  }
}

/* No slow zoom and no crossfade for readers who asked for less motion (auth-photo.js also stops rotating). */
@media (prefers-reduced-motion: reduce) {
  .bfau-photo-slide {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* ---- Page title bar: the help pill sits at the far end. ---- */
.bfau-page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

/* ---- Help drawer content. ---- */
.bfau-help-body h4,
.bfau-help-body .h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-block: 1.25rem 0.5rem;
}

.bfau-help-body h4:first-child {
  margin-block-start: 0;
}

.bfau-help-body p {
  color: var(--theme-secondary-color, inherit);
}

/* ---- A flex child that may shrink below its content, so a long name wraps instead of pushing
   the actions off the card (Bootstrap has no min-width utility). Shared by every module. ---- */
.bfau-min-w-0 {
  min-inline-size: 0;
}

/* ---- Mobile-first grids: rows become labelled cards on phones (CLAUDE.md §11). ----
   Each cell becomes a block with its column name above the value, so a cell holding several
   elements (a title and a detail) never squeezes them side by side. */
@media (max-width: 767.98px) {
  .bfau-stack thead,
  .bfau-mobile-table thead {
    display: none;
  }

  .bfau-stack tr,
  .bfau-mobile-table tr {
    display: block;
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--theme-border-color);
  }

  .bfau-stack td,
  .bfau-mobile-table td {
    display: block;
    border: 0;
    padding-block: 0.35rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .bfau-stack td::before,
  .bfau-mobile-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-secondary-color);
    margin-block-end: 0.15rem;
  }
}

/* ---- Forms: validation states that fit the kit. ---- */

/* A field that already shows its own icon (the kit's .app-search) does not also get Bootstrap's
   validity icon, which would sit on top of it. */
.app-search .form-control.is-invalid,
.app-search .form-control.is-valid,
.was-validated .app-search .form-control:invalid,
.was-validated .app-search .form-control:valid {
  background-image: none;
}

/* Only mistakes are marked. A field that is merely filled in, or an optional checkbox, is not
   painted green: green reads as "approved", which a form never is before it is saved. */
.was-validated .form-control:valid {
  border-color: var(--theme-border-color);
  background-image: none;
}

.was-validated .form-check-input:valid {
  border-color: var(--theme-border-color);
}

.was-validated .form-check-input:valid:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.was-validated .form-check-input:valid ~ .form-check-label {
  color: inherit;
}

/* ---- Dialogs: the success tick keeps SweetAlert's own geometry. ----
   Paces' app.min.css (loaded after SweetAlert's sheet) moves the tick's long stroke with an equally
   specific rule sized for the big dialog icon, using inset-inline-end: it wins inside toasts too (the
   stroke lands outside the 32px icon, like a magnifying glass) and mirrors the tick in Arabic. The tick
   is a drawing, not text, so the icon is always laid out left to right, and toasts get their size back. */
.swal2-icon.swal2-success {
  direction: ltr;
}

.swal2-toast .swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 0.9375em;
  inset-inline-end: 0.1875em;
  width: 1.375em;
}

/* ---- Dialogs: a toast never blurs or blocks the page behind it. ---- */
.swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container {
  backdrop-filter: none;
}

/* A toast's own backdrop container must never intercept clicks: only its small popup should
   (SweetAlert2 sets that inline). Defense in depth alongside the JS fix in dialogs.js that closes
   any dialog before opening the next one — belt and suspenders against a toast ever outliving its
   timer and blocking the page underneath it. */
body.swal2-toast-shown .swal2-container {
  pointer-events: none !important;
}

body.swal2-toast-shown .swal2-container .swal2-popup {
  pointer-events: auto !important;
}

/* A confirm's backdrop dims the page but never blurs it. Paces blurs it (.swal2-backdrop-show
   backdrop-filter: blur), and Chrome fills a backdrop blur's edges by MIRRORING the page, so
   behind every confirm the shell showed up again, reversed, along the right and bottom edges
   (seen on the page editor's Publish confirm). The dim colour alone separates the dialog. */
.swal2-container.swal2-backdrop-show {
  backdrop-filter: none;
}

/* ---- The language menu outside the topbar (sign-in page) ---- */
.bfau-auth-lang .topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: inherit;
}

/* ---- Arrows that point "back" or "forward" turn round in right-to-left pages. ---- */
[dir="rtl"] .bfau-flip {
  transform: scaleX(-1);
}

/* ---- A save bar that stays in view at the bottom of a long form. ---- */
.bfau-save-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-block: 0.75rem;
  background: var(--theme-body-bg);
  border-block-start: 1px solid var(--theme-border-color);
}

/* ---- The shared panel (panels.js): three widths; phones always get the full width. ---- */
.bfau-panel.bfau-panel-sm {
  --theme-offcanvas-width: 360px;
}

.bfau-panel.bfau-panel-md {
  --theme-offcanvas-width: 480px;
}

.bfau-panel.bfau-panel-lg {
  --theme-offcanvas-width: 760px;
}

@media (max-width: 575.98px) {
  .bfau-panel.offcanvas-end {
    --theme-offcanvas-width: 100%;
  }
}

/* ---- Columns inside a panel follow the PANEL's width, not the window's. ----
   Bootstrap's col-sm/md/lg/xl-* switch on at WINDOW breakpoints, but a panel is 360 to 760px wide on
   every screen, so on a desktop a col-md-2 got a sixth of a narrow panel and its text was cut off
   (the association officers, BFAUCRM-124). Inside a panel each tier switches on at the panel body's
   own width instead: sm from 26rem, md from 34rem, lg from 44rem, xl from 56rem; below its tier a
   column takes the full width. A column that also names a phone width (col-6 col-md-4) keeps it.
   The full-width reset sits in :where() so it weighs no more than ".row > x" and every
   per-width rule below overrides it (twelve :not() parts would otherwise outweigh them). */
.bfau-panel .offcanvas-body {
  container: bfau-panel / inline-size;
}

.bfau-panel .offcanvas-body .row > :where([class*="col-sm-"]:not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12)),
.bfau-panel .offcanvas-body .row > :where([class*="col-md-"]:not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12)),
.bfau-panel .offcanvas-body .row > :where([class*="col-lg-"]:not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12)),
.bfau-panel .offcanvas-body .row > :where([class*="col-xl-"]:not(.col-1):not(.col-2):not(.col-3):not(.col-4):not(.col-5):not(.col-6):not(.col-7):not(.col-8):not(.col-9):not(.col-10):not(.col-11):not(.col-12)) {
  flex: 0 0 auto;
  inline-size: 100%;
}

@container bfau-panel (min-width: 26rem) {
  .bfau-panel .offcanvas-body .row > .col-sm-1 {
    flex: 0 0 auto;
    inline-size: 8.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-2 {
    flex: 0 0 auto;
    inline-size: 16.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-3 {
    flex: 0 0 auto;
    inline-size: 25%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-4 {
    flex: 0 0 auto;
    inline-size: 33.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-5 {
    flex: 0 0 auto;
    inline-size: 41.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-6 {
    flex: 0 0 auto;
    inline-size: 50%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-7 {
    flex: 0 0 auto;
    inline-size: 58.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-8 {
    flex: 0 0 auto;
    inline-size: 66.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-9 {
    flex: 0 0 auto;
    inline-size: 75%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-10 {
    flex: 0 0 auto;
    inline-size: 83.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-11 {
    flex: 0 0 auto;
    inline-size: 91.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-12 {
    flex: 0 0 auto;
    inline-size: 100%;
  }

  .bfau-panel .offcanvas-body .row > .col-sm-auto {
    flex: 0 0 auto;
    inline-size: auto;
  }
}

@container bfau-panel (min-width: 34rem) {
  .bfau-panel .offcanvas-body .row > .col-md-1 {
    flex: 0 0 auto;
    inline-size: 8.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-2 {
    flex: 0 0 auto;
    inline-size: 16.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-3 {
    flex: 0 0 auto;
    inline-size: 25%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-4 {
    flex: 0 0 auto;
    inline-size: 33.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-5 {
    flex: 0 0 auto;
    inline-size: 41.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-6 {
    flex: 0 0 auto;
    inline-size: 50%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-7 {
    flex: 0 0 auto;
    inline-size: 58.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-8 {
    flex: 0 0 auto;
    inline-size: 66.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-9 {
    flex: 0 0 auto;
    inline-size: 75%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-10 {
    flex: 0 0 auto;
    inline-size: 83.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-11 {
    flex: 0 0 auto;
    inline-size: 91.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-12 {
    flex: 0 0 auto;
    inline-size: 100%;
  }

  .bfau-panel .offcanvas-body .row > .col-md-auto {
    flex: 0 0 auto;
    inline-size: auto;
  }
}

@container bfau-panel (min-width: 44rem) {
  .bfau-panel .offcanvas-body .row > .col-lg-1 {
    flex: 0 0 auto;
    inline-size: 8.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-2 {
    flex: 0 0 auto;
    inline-size: 16.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-3 {
    flex: 0 0 auto;
    inline-size: 25%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-4 {
    flex: 0 0 auto;
    inline-size: 33.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-5 {
    flex: 0 0 auto;
    inline-size: 41.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-6 {
    flex: 0 0 auto;
    inline-size: 50%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-7 {
    flex: 0 0 auto;
    inline-size: 58.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-8 {
    flex: 0 0 auto;
    inline-size: 66.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-9 {
    flex: 0 0 auto;
    inline-size: 75%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-10 {
    flex: 0 0 auto;
    inline-size: 83.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-11 {
    flex: 0 0 auto;
    inline-size: 91.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-12 {
    flex: 0 0 auto;
    inline-size: 100%;
  }

  .bfau-panel .offcanvas-body .row > .col-lg-auto {
    flex: 0 0 auto;
    inline-size: auto;
  }
}

@container bfau-panel (min-width: 56rem) {
  .bfau-panel .offcanvas-body .row > .col-xl-1 {
    flex: 0 0 auto;
    inline-size: 8.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-2 {
    flex: 0 0 auto;
    inline-size: 16.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-3 {
    flex: 0 0 auto;
    inline-size: 25%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-4 {
    flex: 0 0 auto;
    inline-size: 33.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-5 {
    flex: 0 0 auto;
    inline-size: 41.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-6 {
    flex: 0 0 auto;
    inline-size: 50%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-7 {
    flex: 0 0 auto;
    inline-size: 58.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-8 {
    flex: 0 0 auto;
    inline-size: 66.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-9 {
    flex: 0 0 auto;
    inline-size: 75%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-10 {
    flex: 0 0 auto;
    inline-size: 83.33333333%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-11 {
    flex: 0 0 auto;
    inline-size: 91.66666667%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-12 {
    flex: 0 0 auto;
    inline-size: 100%;
  }

  .bfau-panel .offcanvas-body .row > .col-xl-auto {
    flex: 0 0 auto;
    inline-size: auto;
  }
}

/* The searchable dropdown's list is at least as wide as its field and may grow to show a whole option,
   so a narrow field never truncates its choices; long options wrap instead of being cut. */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  min-inline-size: 100%;
  inline-size: max-content;
  max-inline-size: min(28rem, 90vw);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Bootstrap floats a legend with a PHYSICAL float, which in right-to-left pages pushes the first
   field after it out of line. A legend here is simply a heading above its group. */
fieldset > legend {
  float: none;
}

/* ---- Appearance (theme editor) ---- */
.bfau-preset-active {
  border-color: var(--bfau-primary);
  box-shadow: 0 0 0 1px var(--bfau-primary);
}

/* The chips are created by theme-editor.js from the preset's values. */
.bfau-swatch {
  display: flex;
  gap: 0.25rem;
  min-block-size: 1.5rem;
}

.bfau-swatch-chip {
  flex: 1 1 0;
  block-size: 1.5rem;
  border-radius: var(--bfau-radius);
  border: 1px solid var(--bfau-border);
}

.bfau-token {
  padding-block: 0.875rem;
  border-block-end: 1px dashed var(--bfau-border);
}

.bfau-token:last-child {
  border-block-end: 0;
}

.bfau-token-dirty {
  border-inline-start: 3px solid var(--bfau-primary);
  padding-inline-start: 0.75rem;
}

.bfau-token-invalid {
  border-inline-start: 3px solid var(--bfau-danger);
  padding-inline-start: 0.75rem;
}

/* A Sidebar-tab control while "Menu position" (Layout tab) is Top: nothing to apply to right now. */
.bfau-token-disabled {
  opacity: 0.5;
}

.bfau-token-disabled .bfau-token-reset {
  pointer-events: none;
}

.bfau-color-pick {
  max-inline-size: 3rem;
  flex: 0 0 3rem;
}

/* A dot on a tab that holds unsaved or refused values. */
.bfau-tab-dot {
  display: none;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  margin-inline-start: 0.35rem;
  border-radius: 50%;
  background: var(--bfau-primary);
  vertical-align: middle;
}

.bfau-tab-marked .bfau-tab-dot {
  display: inline-block;
}

@media (min-width: 1200px) {
  .bfau-preview-card {
    position: sticky;
    inset-block-start: 5.5rem;
  }
}

/* The preview box: it carries its own --bfau-* values, set by theme-editor.js. */
.bfau-theme-preview {
  padding: 1rem;
  background: var(--bfau-body-bg);
  color: var(--bfau-text);
  /* The kit sets the font once, on <body>; re-applied here so the box shows the chosen fonts. */
  font-family: var(--bfau-font-sans);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.bfau-preview-auth {
  padding: 1rem;
  border-radius: var(--bfau-radius-lg);
}

/* Logo size preview (Appearance > Logo size). The frame is the largest space the logo may use; the numbers
   repeat the real header's (.bfau-logo above, .bfau-public-logo in public.css) so the preview is honest. */
.bfau-logo-preview {
  color: var(--bfau-text);
}

.bfau-logo-preview-chrome {
  padding: 0.75rem;
  background: var(--bfau-surface);
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
}

.bfau-logo-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.bfau-logo-preview-frame {
  display: flex;
  align-items: center;
  max-inline-size: 100%;
  inline-size: 11rem;
  block-size: 2.5rem;
  border: 1px dashed var(--bfau-border);
  border-radius: var(--bfau-radius);
}

.bfau-logo-preview-image {
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.bfau-logo-preview-on-dark {
  display: none;
}

.bfau-theme-preview[data-bs-theme="dark"] .bfau-logo-preview-on-light {
  display: none;
}

.bfau-theme-preview[data-bs-theme="dark"] .bfau-logo-preview-on-dark {
  display: block;
}

.bfau-logo-preview-wordmark {
  padding-inline: 0.5rem;
  overflow: hidden;
  font-family: var(--bfau-font-heading);
  font-weight: 700;
  color: var(--bfau-heading);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bfau-logo-preview-lines {
  display: flex;
  gap: 0.5rem;
}

.bfau-logo-preview-menu .bfau-logo-preview-lines {
  flex-direction: column;
  margin-block-start: 0.75rem;
}

.bfau-logo-preview-bar .bfau-logo-preview-lines {
  margin-inline-start: auto;
}

.bfau-logo-preview-lines span {
  display: block;
  inline-size: 3rem;
  block-size: 0.5rem;
  border-radius: var(--bfau-radius);
  background: var(--bfau-border);
}

.bfau-logo-preview-menu .bfau-logo-preview-lines span {
  inline-size: 70%;
}

[data-bfau-logo-preview-site="admin"][data-bfau-logo-preview-size="small"] .bfau-logo-preview-frame {
  inline-size: 8rem;
  block-size: 1.75rem;
}

[data-bfau-logo-preview-site="admin"][data-bfau-logo-preview-size="large"] .bfau-logo-preview-frame {
  inline-size: 14rem;
  block-size: 3.25rem;
}

[data-bfau-logo-preview-site="admin"][data-bfau-logo-preview-size="xlarge"] .bfau-logo-preview-frame {
  inline-size: 17rem;
  block-size: 4rem;
}

[data-bfau-logo-preview-site="public"] .bfau-logo-preview-frame {
  inline-size: 13rem;
  block-size: 3.25rem;
}

[data-bfau-logo-preview-site="public"][data-bfau-logo-preview-size="small"] .bfau-logo-preview-frame {
  inline-size: 9rem;
  block-size: 2.25rem;
}

[data-bfau-logo-preview-site="public"][data-bfau-logo-preview-size="large"] .bfau-logo-preview-frame {
  inline-size: 17rem;
  block-size: 4.25rem;
}

[data-bfau-logo-preview-site="public"][data-bfau-logo-preview-size="xlarge"] .bfau-logo-preview-frame {
  inline-size: 21rem;
  block-size: 5.25rem;
}

/* The save bar: pinned to the bottom of the screen while something is unsaved. */
.bfau-savebar {
  position: sticky;
  inset-block-end: 1rem;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bfau-surface);
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
  box-shadow: var(--bfau-shadow);
}

.bfau-savebar.d-none {
  display: none;
}

/* Preset groups with many members scroll instead of pushing the editor far down. */
.bfau-preset-scroll {
  max-block-size: 26rem;
  overflow-y: auto;
  padding-block-start: 0.25rem;
}

.bfau-preset-picture {
  inline-size: 100%;
  border-radius: var(--bfau-radius);
  border: 1px solid var(--bfau-border);
}

/* Choices the kit ships a preview picture for (skins, side menu, top bar, width). */
.bfau-picture-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}

.bfau-picture-choices-many {
  max-block-size: 18rem;
  overflow-y: auto;
  padding: 0.125rem;
}

.bfau-picture-choice {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 2px solid var(--bfau-border);
  border-radius: var(--bfau-radius);
  cursor: pointer;
  text-align: center;
  font-size: 0.8125rem;
}

.bfau-picture-choice img {
  inline-size: 100%;
  border-radius: calc(var(--bfau-radius) * 0.8);
}

.btn-check:checked + .bfau-picture-choice {
  border-color: var(--bfau-primary);
  background: var(--bfau-primary-subtle);
}

.btn-check:focus-visible + .bfau-picture-choice {
  outline: 2px solid var(--bfau-focus-ring);
  outline-offset: 2px;
}

/* ---- Typography set on the Appearance screen ----
   Absent ("kit"), the Paces skin's own size and weight apply. When set, each rule is repeated with
   [data-skin] so it out-ranks the skin's html[data-skin=x] block. */
html[data-bfau-font-size="13"],
html[data-bfau-font-size="13"][data-skin] {
  --theme-body-font-size: 13px;
  --theme-font-size-base: 13px;
}

html[data-bfau-font-size="14"],
html[data-bfau-font-size="14"][data-skin] {
  --theme-body-font-size: 14px;
  --theme-font-size-base: 14px;
}

html[data-bfau-font-size="15"],
html[data-bfau-font-size="15"][data-skin] {
  --theme-body-font-size: 15px;
  --theme-font-size-base: 15px;
}

html[data-bfau-font-size="16"],
html[data-bfau-font-size="16"][data-skin] {
  --theme-body-font-size: 16px;
  --theme-font-size-base: 16px;
}

html[data-bfau-heading-weight="500"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .page-main-title) {
  font-weight: 500;
}

html[data-bfau-heading-weight="600"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .page-main-title) {
  font-weight: 600;
}

html[data-bfau-heading-weight="700"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .page-main-title) {
  font-weight: 700;
}

/* Font choices on the Appearance screen: each card shows its font (fonts.css sample classes). */
.bfau-font-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}

.bfau-font-choice {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
  border: 2px solid var(--bfau-border);
  border-radius: var(--bfau-radius);
  cursor: pointer;
}

.bfau-font-choice-sample {
  font-size: 1.125rem;
  line-height: 1.4;
}

.bfau-font-choice-name {
  font-size: 0.75rem;
  color: var(--bfau-text-muted);
}

.btn-check:checked + .bfau-font-choice {
  border-color: var(--bfau-primary);
  background: var(--bfau-primary-subtle);
}

.btn-check:focus-visible + .bfau-font-choice {
  outline: 2px solid var(--bfau-focus-ring);
  outline-offset: 2px;
}

/* ---- Preloader (Appearance > Staff site > Layout > Loading animation): admin-shell.js removes it
   once the page has loaded, or at once for a reader who asked for less motion. ---- */
.bfau-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bfau-body-bg);
  transition: opacity 0.2s ease-out;
}

.bfau-preloader-hidden {
  opacity: 0;
  pointer-events: none;
}

.bfau-preloader-spinner {
  position: relative;
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.bfau-preloader-spinner span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bfau-primary);
  animation: bfau-preloader-pulse 1.3s linear infinite;
}

.bfau-preloader-spinner span:last-child {
  animation-delay: -0.8s;
}

@keyframes bfau-preloader-pulse {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bfau-preloader-spinner span {
    animation: none;
    opacity: 0.6;
  }
}

/*
  Accessible text/icon colour for the Paces kit's "soft" status accents (staff visual guard,
  CLAUDE.md §9/contrast). The kit's own .badge-soft-*, .btn-soft-* and the .text-success/.text-info/
  .text-warning/.text-danger utilities all colour their text (and, through inherited `color`, the
  Tabler icon glyph drawn via ::before) with the plain, fully-saturated accent —
  --theme-success/-info/-warning/-danger — which the guard measured at ~1.7:1-2.68:1 on a
  white/near-white card: short of the 3:1 floor for icons and UI text. The kit already ships a
  purpose-built -text-emphasis variant of each accent for exactly this (kit-bridge.css), and one
  vendor component (.alert-light) already uses the pattern correctly for its own "light" accent —
  these rules just point the status accents at their own -text-emphasis token too, the same way.
  Loaded after the kit and kit-bridge.css, so at equal specificity these win.

  .badge-soft-danger/.btn-soft-danger/.text-danger were missing from this block entirely (not merely
  mistuned) — the fuller staff guard run (KnownIssues emptied by this same change) is what surfaced
  them, on a data table's row "Delete" action and a page editor's "Unpublish" action, both measuring
  ~2.68:1. --theme-danger-text-emphasis already mixes at 85/15 (not 50/50 like success/warning/info —
  see that comment in kit-bridge.css), which clears 3:1 here with a little room (~3.1:1), so only the
  wiring below was missing, not the token itself.
*/
.badge-soft-success,
.badge-soft-success[href],
.btn-soft-success,
.text-success {
  --theme-badge-color: var(--theme-success-text-emphasis);
  --theme-btn-color: var(--theme-success-text-emphasis);
  color: var(--theme-success-text-emphasis) !important;
}

.badge-soft-info,
.badge-soft-info[href],
.btn-soft-info,
.text-info {
  --theme-badge-color: var(--theme-info-text-emphasis);
  --theme-btn-color: var(--theme-info-text-emphasis);
  color: var(--theme-info-text-emphasis) !important;
}

.badge-soft-warning,
.badge-soft-warning[href],
.btn-soft-warning,
.text-warning {
  --theme-badge-color: var(--theme-warning-text-emphasis);
  --theme-btn-color: var(--theme-warning-text-emphasis);
  color: var(--theme-warning-text-emphasis) !important;
}

.badge-soft-danger,
.badge-soft-danger[href],
.btn-soft-danger,
.text-danger {
  --theme-badge-color: var(--theme-danger-text-emphasis);
  --theme-btn-color: var(--theme-danger-text-emphasis);
  color: var(--theme-danger-text-emphasis) !important;
}

/*
  The same for the brand and second colours (BFAUCRM-141). The kit draws .badge-soft-primary,
  .btn-soft-primary, .text-primary (avatar initials, card icons) and .btn-outline-primary in the plain
  brand colour, and the secondary ones in the plain second colour. The preset sweep measured that at
  1.5 to 2.9:1 on white or the brand tint for every skin with a light brand colour (Elegant, Soft, Zen,
  Galaxy, Luxe, Modern…). --bfau-primary-text (derived in the theme builder, BFAUCRM-148) is the brand
  colour mixed toward the text colour only as far as needed to read: it darkens in light mode and lightens
  in dark mode and still looks like the brand colour. Hover keeps the kit's own solid fill.
*/
.badge-soft-primary,
.badge-soft-primary[href],
.btn-soft-primary,
.text-primary {
  --theme-badge-color: var(--bfau-primary-text);
  --theme-btn-color: var(--bfau-primary-text);
  color: var(--bfau-primary-text) !important;
}

.btn-outline-primary {
  --theme-btn-color: var(--bfau-primary-text);
}

.btn-outline-secondary {
  --theme-btn-color: var(--theme-secondary-text-emphasis);
}

/* The kit's active pill is hard-coded white on the brand colour: dark on a light brand colour. */
.nav-pills {
  --theme-nav-pills-link-active-color: var(--bfau-on-primary);
}

.badge-soft-secondary,
.badge-soft-secondary[href],
.btn-soft-secondary,
.text-secondary,
.text-secondary-emphasis {
  --theme-badge-color: var(--theme-secondary-text-emphasis);
  --theme-btn-color: var(--theme-secondary-text-emphasis);
  color: var(--theme-secondary-text-emphasis) !important;
}

/*
  .alert-light's own text colour (--theme-light-text-emphasis, vendor-defined, not bridged through our
  own tokens) measured ~2.93:1 on its own near-white background — just short of 3:1. These "note" alerts
  (Settings, Theme editor) are ordinary body copy, not a soft accent, so they get the same treatment
  ordinary paragraph text already has (--theme-body-color = --bfau-text), which is tuned for body-text
  contrast on the page background in both modes.
*/
.alert-light {
  --theme-alert-color: var(--theme-body-color);
}

/*
  A stray extra closing brace used to sit right here — one "}" too many after .alert-light's own.
  It is not cosmetic: Chrome's CSS parser treats an unexpected top-level "}" as the end of useful
  parsing and silently drops every rule written after it from the stylesheet's CSSOM (confirmed with
  document.styleSheets[…].cssRules: the parsed rule count stopped exactly at .alert-light). Any CSS
  appended below this comment in the past — including, most likely, an earlier attempt to fix the
  .btn-success contrast defect below — was served correctly over HTTP but never took effect in the
  browser, with no visible error. Removing it is what let the .btn-success fix immediately below
  actually apply at all.

  Solid .btn-success (e.g. "Approve and list", Directory > registration details) painted white text
  directly on --theme-success/--bfau-success at rest, ~2.4:1 — short of 4.5:1. --bfau-success-contrast
  (tokens.css) is the fix: it is mixed toward black rather than toward --bfau-text on purpose, so it
  stays dark enough for white text in BOTH light and dark mode (--bfau-text itself flips from dark to
  light between modes, which would have made this lighter — not darker — in dark mode; that is also
  why the kit's own --theme-success-text-emphasis is the wrong token for a SOLID fill: it is a
  foreground-text colour, tuned for contrast against --bfau-surface, not a background). Only the rest
  state changes; :hover/:active already point at --theme-success-text-emphasis via the kit's own
  app.min.css rule and already clear the guard's 3:1 floor. Loaded after the kit and kit-bridge.css,
  so at equal specificity this wins.
*/
.btn-success {
  background-color: var(--bfau-success-contrast);
  border-color: var(--bfau-success-contrast);
}

/* ---- Modules in the menu (Appearance > Layout > Modules in the menu) ----
   Grouped: each module is a Paces collapsible folder (the kit styles .sub-menu and .menu-arrow).
   Switcher: a launcher in the top bar with one tile per module the person can reach. */
.bfau-module-launcher .dropdown-menu.bfau-module-tiles {
  inline-size: min(22rem, calc(100vw - 2rem));
  animation: bfau-module-fade 0.15s ease-out;
}

@keyframes bfau-module-fade {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bfau-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.25rem;
}

.bfau-module-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.75rem;
  padding-inline: 0.5rem;
  border-radius: var(--bfau-radius);
  text-align: center;
  white-space: normal;
}

/* The kit paints an active dropdown item solid brand with its own text colour; a tile is only tinted,
   so its text stays the normal body colour. The kit reads these two variables. A flat surface, not a
   colour mix: a translucent mix hides what is really behind the text from a contrast checker. */
.bfau-module-tile {
  --theme-dropdown-link-active-bg: var(--bs-tertiary-bg);
  --theme-dropdown-link-active-color: var(--bs-body-color);
  border: 1px solid transparent;
}

.bfau-module-tile.active {
  border-color: var(--bfau-primary);
}

.bfau-module-tile-name {
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 575.98px) {
  .bfau-module-launcher-name {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bfau-module-launcher .dropdown-menu.bfau-module-tiles {
    animation: none;
  }
}