/* ============================================================
   fun-run.co.uk — Components
   Every <fr-...> tag, every variant, every state.
   Class names match the C# tag helpers — do not rename emitted
   classes; add new modifiers freely.
   Depends on tokens.css.
   ============================================================ */

/* Per-feature stylesheets — kept here so the import chain matches what
   the legacy aggregator pulled in. To be folded into a future design
   pass; until then they hold page-specific rules outside the component
   contract. */
@import url("admin-pages.css");
@import url("home.css");
@import url("rp-events.css");
@import url("public-flow.css");

/* ------------------------------------------------------------
   <fr-button>  →  .fr-btn (+ .fr-btn--variant / --size / --full)
   Variants: primary | secondary | danger | ghost (+ text modifier)
   Sizes:    sm | md | lg
   ------------------------------------------------------------ */

.fr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fr-space-2);
  position: relative;
  font-family: inherit;
  font-weight: var(--fr-weight-semibold);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: var(--fr-radius-md);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--fr-duration-base) var(--fr-ease),
    border-color     var(--fr-duration-base) var(--fr-ease),
    color            var(--fr-duration-base) var(--fr-ease),
    box-shadow       var(--fr-duration-base) var(--fr-ease),
    transform        var(--fr-duration-fast) var(--fr-ease);
}

.fr-btn:focus-visible {
  outline: none;
  box-shadow: var(--fr-shadow-focus);
}

.fr-btn:disabled,
.fr-btn[disabled],
.fr-btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

.fr-btn:not(:disabled):active { transform: translateY(1px); }

/* — sizes — */
.fr-btn--sm {
  padding: 0.4rem 0.75rem;
  font-size: var(--fr-text-sm);
  line-height: 1.2;
  border-radius: var(--fr-radius-sm);
}
.fr-btn--md {
  padding: 0.625rem 1.1rem;
  font-size: var(--fr-text-base);
  line-height: 1.25;
}
.fr-btn--lg {
  padding: 1.125rem 2rem;
  font-size: var(--fr-text-lg);
  line-height: 1.25;
  border-radius: var(--fr-radius-lg);
}

.fr-btn--full { display: flex; width: 100%; }

/* — primary — */
.fr-btn--primary {
  background: var(--fr-color-primary);
  border-color: var(--fr-color-primary);
  color: var(--fr-color-primary-on);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 -1px 0 rgba(0,0,0,0.06);
}
.fr-btn--primary:hover:not(:disabled) {
  background: var(--fr-color-primary-hover);
  border-color: var(--fr-color-primary-hover);
}
.fr-btn--primary:active:not(:disabled) {
  background: var(--fr-color-primary-active);
  border-color: var(--fr-color-primary-active);
}

/* — secondary (neutral outline) — */
.fr-btn--secondary {
  background: var(--fr-color-surface);
  border-color: var(--fr-color-border-strong);
  color: var(--fr-color-ink);
}
.fr-btn--secondary:hover:not(:disabled) {
  background: var(--fr-color-surface-sunken);
  border-color: var(--fr-color-ink-muted);
}
.fr-btn--secondary:active:not(:disabled) {
  background: var(--fr-color-bg-strong);
}

/* — danger — */
.fr-btn--danger {
  background: var(--fr-color-danger);
  border-color: var(--fr-color-danger);
  color: var(--fr-color-danger-on);
}
.fr-btn--danger:hover:not(:disabled) {
  background: var(--fr-color-danger-hover);
  border-color: var(--fr-color-danger-hover);
}

/* — ghost (no surface, ideal for toolbar slots) — */
.fr-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fr-color-ink);
}
.fr-btn--ghost:hover:not(:disabled) {
  background: var(--fr-color-surface-sunken);
}
.fr-btn--ghost:active:not(:disabled) {
  background: var(--fr-color-bg-strong);
}

/* — google (federated sign-in — keeps Google's brand mark in colour
       on a neutral surface, per Google's branding guidelines) — */
.fr-btn--google {
  background: var(--fr-color-surface);
  border-color: var(--fr-color-border-strong);
  color: var(--fr-color-ink);
}
.fr-btn--google:hover:not(:disabled) {
  background: var(--fr-color-surface-sunken);
  border-color: var(--fr-color-ink-muted);
}
.fr-btn--google:active:not(:disabled) {
  background: var(--fr-color-bg-strong);
}
.fr-btn--google .fr-google-g {
  flex-shrink: 0;
}

/* — text (link-styled button — used by wizard "Finish later") — */
.fr-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--fr-color-primary);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  box-shadow: none;
}
.fr-btn--text:hover:not(:disabled) {
  color: var(--fr-color-primary-hover);
  background: transparent;
}
.fr-btn--text:focus-visible {
  text-decoration: none;
  background: var(--fr-color-primary-soft);
  border-radius: var(--fr-radius-sm);
}

/* ------------------------------------------------------------
   <fr-card>  →  .fr-card
   ------------------------------------------------------------ */

.fr-card {
  display: block;
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-lg);
  box-shadow: var(--fr-shadow-sm);
  overflow: hidden;
}

.fr-card__header {
  padding: var(--fr-space-6) var(--fr-space-6) 0;
}
.fr-card__title {
  font-size: var(--fr-text-lg);
  font-weight: var(--fr-weight-bold);
  line-height: var(--fr-leading-snug);
  margin: 0;
}
.fr-card__subtitle {
  margin-top: var(--fr-space-1);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-normal);
}
.fr-card__body {
  padding: var(--fr-space-5) var(--fr-space-6) var(--fr-space-6);
}
.fr-card__header + .fr-card__body {
  padding-top: var(--fr-space-5);
}

/* ------------------------------------------------------------
   <fr-section>  →  .fr-section (no surface, lighter than card)
   ------------------------------------------------------------ */

.fr-section {
  display: block;
  margin-block: var(--fr-space-8);
}
.fr-section:first-child { margin-top: 0; }

.fr-section__header {
  margin-bottom: var(--fr-space-5);
  padding-bottom: var(--fr-space-3);
  border-bottom: 1px solid var(--fr-color-border);
}
.fr-section__header--with-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fr-space-4);
}
.fr-section__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--fr-space-2);
}
.fr-section__title {
  font-size: var(--fr-text-xl);
  font-weight: var(--fr-weight-bold);
  line-height: var(--fr-leading-snug);
}
.fr-section__subtitle {
  margin-top: var(--fr-space-1);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-base);
}
.fr-section__body { display: block; }

/* ------------------------------------------------------------
   <fr-form-field>  →  .fr-form-field
   ------------------------------------------------------------ */

.fr-form-field {
  display: block;
  margin-bottom: var(--fr-space-5);
}

.fr-form-field__label {
  display: block;
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  margin-bottom: var(--fr-space-2);
}
.fr-form-field__required {
  color: var(--fr-color-danger);
  font-weight: var(--fr-weight-semibold);
  margin-left: 0.15em;
}

.fr-form-field__input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-normal);
  color: var(--fr-color-ink);
  background: var(--fr-color-surface);
  border: 1.5px solid var(--fr-color-border-input);
  border-radius: var(--fr-radius-md);
  padding: 0.625rem 0.875rem;
  transition:
    border-color var(--fr-duration-base) var(--fr-ease),
    box-shadow   var(--fr-duration-base) var(--fr-ease),
    background   var(--fr-duration-base) var(--fr-ease);
  -webkit-appearance: none;
  appearance: none;
}
.fr-form-field__input::placeholder { color: var(--fr-color-ink-subtle); }

.fr-form-field__input:hover { border-color: var(--fr-color-ink-muted); }

.fr-form-field__input:focus,
.fr-form-field__input:focus-visible {
  outline: none;
  border-color: var(--fr-color-border-focus);
  box-shadow: var(--fr-shadow-focus);
}

.fr-form-field__input:disabled {
  background: var(--fr-color-surface-sunken);
  color: var(--fr-color-ink-muted);
  cursor: not-allowed;
  border-color: var(--fr-color-border);
}

/* textarea variant */
textarea.fr-form-field__input {
  resize: vertical;
  min-height: 6rem;
  line-height: var(--fr-leading-relaxed);
}

/* error state */
.fr-form-field__input--error,
.fr-form-field__input--error:hover {
  border-color: var(--fr-color-danger);
  background: #fff;
}
.fr-form-field__input--error:focus,
.fr-form-field__input--error:focus-visible {
  box-shadow: 0 0 0 4px rgba(195, 57, 44, 0.22);
  border-color: var(--fr-color-danger);
}

.fr-form-field__hint {
  display: block;
  margin-top: var(--fr-space-2);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  line-height: var(--fr-leading-snug);
}
.fr-form-field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: var(--fr-space-2);
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-medium);
  color: var(--fr-color-danger);
  line-height: var(--fr-leading-snug);
}
.fr-form-field__error::before {
  content: '';
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  margin-top: 0.1rem;
  background: var(--fr-color-danger);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm0 3.25a.85.85 0 0 1 .85.85V8.5a.85.85 0 0 1-1.7 0V5.6A.85.85 0 0 1 8 4.75Zm0 7.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm0 3.25a.85.85 0 0 1 .85.85V8.5a.85.85 0 0 1-1.7 0V5.6A.85.85 0 0 1 8 4.75Zm0 7.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
}

/* — inline prefix (e.g. £) — */
.fr-form-field--with-prefix .fr-form-field__input {
  padding-left: 2.25rem;
}
.fr-form-field__prefix {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fr-color-ink-muted);
  font-weight: var(--fr-weight-medium);
  pointer-events: none;
}
.fr-form-field--with-prefix {
  position: relative;
}
.fr-form-field--with-prefix .fr-form-field__label {
  position: static;
}
/* The wrapper around input+prefix — generated by the tag helper.
   We treat the .fr-form-field as the positioning context and assume
   prefix and input are siblings inside it. */

/* — url-prefix group (e.g. fun-run.co.uk/<org>/) — */
.fr-form-field__url-group {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--fr-color-border-input);
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  overflow: hidden;
  transition:
    border-color var(--fr-duration-base) var(--fr-ease),
    box-shadow   var(--fr-duration-base) var(--fr-ease);
}
.fr-form-field__url-group:focus-within {
  border-color: var(--fr-color-border-focus);
  box-shadow: var(--fr-shadow-focus);
}
.fr-form-field__url-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: var(--fr-color-surface-sunken);
  border-right: 1px solid var(--fr-color-border);
  color: var(--fr-color-ink-muted);
  font-family: var(--fr-font-mono);
  font-size: var(--fr-text-sm);
  white-space: nowrap;
}
.fr-form-field__url-group .fr-form-field__input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.fr-form-field__url-group .fr-form-field__input:focus {
  box-shadow: none;
}

/* ------------------------------------------------------------
   <fr-page-header>  →  .fr-page-header
   ------------------------------------------------------------ */

.fr-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fr-space-6);
  padding-block: var(--fr-space-5) var(--fr-space-6);
  border-bottom: 1px solid var(--fr-color-border);
  margin-bottom: var(--fr-space-7);
}

.fr-page-header__main {
  min-width: 0;
  flex: 1 1 auto;
}

.fr-page-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-medium);
  color: var(--fr-color-ink-muted);
  text-decoration: none;
  margin-bottom: var(--fr-space-3);
  padding: 0.15rem 0;
}
.fr-page-header__back::before {
  content: '';
  width: 0.9rem; height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9.7 3.3 5 8l4.7 4.7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9.7 3.3 5 8l4.7 4.7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.fr-page-header__back:hover { color: var(--fr-color-ink); }

.fr-page-header__title {
  font-size: var(--fr-text-3xl);
  line-height: var(--fr-leading-tight);
  letter-spacing: -0.025em;
}

.fr-page-header__subtitle {
  margin-top: var(--fr-space-2);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-snug);
}

/* Inline spinner glyph used by fr-submit-spinner.js while a form is in flight. */
.fr-btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fr-btn-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}
@keyframes fr-btn-spin {
  to { transform: rotate(360deg); }
}

.fr-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .fr-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--fr-space-4);
  }
  .fr-page-header__title { font-size: var(--fr-text-2xl); }
  .fr-page-header__actions { justify-content: flex-start; }
}

/* ------------------------------------------------------------
   <fr-empty-state>  →  .fr-empty-state
   ------------------------------------------------------------ */

.fr-empty-state {
  display: block;
  text-align: center;
  padding: var(--fr-space-9) var(--fr-space-6);
  background: var(--fr-color-surface);
  border: 1.5px dashed var(--fr-color-border-strong);
  border-radius: var(--fr-radius-lg);
}

.fr-empty-state__title {
  font-size: var(--fr-text-lg);
  font-weight: var(--fr-weight-bold);
  margin-bottom: var(--fr-space-2);
}
.fr-empty-state__body {
  color: var(--fr-color-ink-muted);
  max-width: 44ch;
  margin: 0 auto var(--fr-space-5);
  line-height: var(--fr-leading-normal);
}
.fr-empty-state .fr-btn { margin-top: var(--fr-space-2); }

/* ------------------------------------------------------------
   <fr-thermometer>  →  .fr-thermometer (full | slim)
   Race-finish bar with subtle 25% / 50% / 75% tick marks.
   ------------------------------------------------------------ */

.fr-thermometer {
  display: block;
}

.fr-thermometer__amount {
  display: block;
  font-size: var(--fr-text-2xl);
  font-weight: var(--fr-weight-bold);
  color: var(--fr-color-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.fr-thermometer__caption {
  display: block;
  margin-top: var(--fr-space-1);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
}

.fr-thermometer__bar {
  position: relative;
  margin-top: var(--fr-space-3);
  height: 14px;
  background: var(--fr-color-surface-sunken);
  border-radius: var(--fr-radius-pill);
  overflow: hidden;
  border: 1px solid var(--fr-color-border);
}

.fr-thermometer__bar-fill {
  position: absolute;
  inset: 0;
  width: var(--fr-thermometer-pct, 0%);
  background:
    linear-gradient(90deg,
      var(--fr-color-success) 0%,
      color-mix(in oklch, var(--fr-color-success), white 18%) 100%);
  border-radius: inherit;
  transition: width 600ms var(--fr-ease);
}

/* tick marks at 25/50/75 — subtle finishing-line cues */
.fr-thermometer__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent calc(25% - 1px), rgba(22,33,58,0.10) 25%, transparent calc(25% + 1px),
      transparent calc(50% - 1px), rgba(22,33,58,0.14) 50%, transparent calc(50% + 1px),
      transparent calc(75% - 1px), rgba(22,33,58,0.10) 75%, transparent calc(75% + 1px));
}

.fr-thermometer__pct {
  display: inline-block;
  margin-top: var(--fr-space-2);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  font-variant-numeric: tabular-nums;
}
.fr-thermometer__pct strong {
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
}

/* — slim variant: smaller numerals, thinner bar, single-line layout — */
.fr-thermometer--slim .fr-thermometer__amount {
  font-size: var(--fr-text-lg);
}
.fr-thermometer--slim .fr-thermometer__bar {
  height: 8px;
  margin-top: var(--fr-space-2);
}
.fr-thermometer--slim .fr-thermometer__caption,
.fr-thermometer--slim .fr-thermometer__pct {
  font-size: var(--fr-text-xs);
}

/* full bar at 100%+ — kicks in colour shift to gold */
.fr-thermometer__bar-fill[data-state='complete'] {
  background:
    linear-gradient(90deg,
      var(--fr-color-success) 0%,
      #d6a534 100%);
}

/* ------------------------------------------------------------
   <fr-stepper>  →  .fr-stepper (wizard sidebar)
   Item states: incomplete | complete | problematic | current
   ------------------------------------------------------------ */

.fr-stepper {
  display: block;
}

.fr-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-1);
}

.fr-stepper__item {
  display: block;
}

.fr-stepper__link {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  width: 100%;
  padding: var(--fr-space-3) var(--fr-space-3);
  border-radius: var(--fr-radius-md);
  text-decoration: none;
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-snug);
  transition: background-color var(--fr-duration-base) var(--fr-ease),
              color            var(--fr-duration-base) var(--fr-ease);
}
.fr-stepper__link:hover {
  background: var(--fr-color-surface-sunken);
  color: var(--fr-color-ink);
}
.fr-stepper__link:focus-visible {
  outline: none;
  box-shadow: var(--fr-shadow-focus);
}

/* number chip — race-bib */
.fr-stepper__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-surface);
  border: 1.5px solid var(--fr-color-border-strong);
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-bold);
  color: var(--fr-color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.fr-stepper__label {
  display: block;
  font-weight: var(--fr-weight-medium);
}
.fr-stepper__label small {
  display: block;
  font-size: var(--fr-text-xs);
  font-weight: var(--fr-weight-regular);
  color: var(--fr-color-ink-subtle);
  margin-top: 1px;
}

/* — complete — */
.fr-stepper__item--complete .fr-stepper__num {
  background: var(--fr-color-success);
  border-color: var(--fr-color-success);
  color: var(--fr-color-success-on);
  /* tick */
  font-size: 0;
}
.fr-stepper__item--complete .fr-stepper__num::before {
  content: '';
  width: 0.85rem; height: 0.85rem;
  background: var(--fr-color-success-on);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m3.5 8.3 3 3 6-6.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m3.5 8.3 3 3 6-6.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.fr-stepper__item--complete .fr-stepper__label {
  color: var(--fr-color-ink);
}

/* — problematic — */
.fr-stepper__item--problematic .fr-stepper__num {
  background: var(--fr-color-warning-soft);
  border-color: var(--fr-color-warning);
  color: var(--fr-color-warning);
}
.fr-stepper__item--problematic .fr-stepper__label {
  color: var(--fr-color-ink);
}
.fr-stepper__item--problematic .fr-stepper__label small {
  color: var(--fr-color-warning);
  font-weight: var(--fr-weight-medium);
}

/* — current — */
.fr-stepper__item--current .fr-stepper__link {
  background: var(--fr-color-primary-soft);
  color: var(--fr-color-ink);
}
.fr-stepper__item--current .fr-stepper__num {
  background: var(--fr-color-primary);
  border-color: var(--fr-color-primary);
  color: var(--fr-color-primary-on);
}
.fr-stepper__item--current .fr-stepper__label {
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
}

/* ------------------------------------------------------------
   <fr-step-nav>  →  .fr-step-nav (inline Back/Continue under step body)
   ------------------------------------------------------------ */

.fr-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fr-space-4);
  margin-top: var(--fr-space-8);
  padding-top: var(--fr-space-6);
  border-top: 1px solid var(--fr-color-border);
}

.fr-step-nav__back  { margin-right: auto; }
.fr-step-nav__next  { margin-left: auto; }

@media (max-width: 520px) {
  .fr-step-nav { flex-direction: column-reverse; align-items: stretch; }
  .fr-step-nav .fr-btn { width: 100%; }
}

/* ------------------------------------------------------------
   <fr-wizard-footer>  →  .fr-wizard__footer (sticky bottom bar)
   ------------------------------------------------------------ */

.fr-wizard__footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--fr-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--fr-space-4);
  padding: var(--fr-space-4) var(--fr-container-pad-x);
  background: color-mix(in oklch, var(--fr-color-surface), transparent 4%);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--fr-color-border);
}

.fr-wizard__footer-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
}

@media (max-width: 560px) {
  /* Keep the wizard footer as a single row on mobile: Finish later on the
     left, Continue on the right. The earlier wrap-to-two-rows layout made
     Continue look adrift on its own row. */
  .fr-wizard__footer {
    padding: var(--fr-space-3) var(--fr-space-4);
    gap: var(--fr-space-3);
  }
}

/* ============================================================
   PROPOSED NEW PRIMITIVES (documented in new-components.md)
   ============================================================ */

/* ------------------------------------------------------------
   <fr-masthead variant="public|admin|auth">
   Shared header bar across all four layouts.
   Emits: .fr-masthead, .fr-masthead--{variant},
          .fr-masthead__brand, .fr-masthead__brand-mark,
          .fr-masthead__org, .fr-masthead__nav,
          .fr-masthead__user, .fr-masthead__signout
   ------------------------------------------------------------ */

.fr-masthead {
  position: sticky;
  top: 0;
  z-index: var(--fr-z-sticky);
  background: var(--fr-color-surface);
  border-bottom: 1px solid var(--fr-color-border);
}

.fr-masthead__inner {
  max-width: var(--fr-container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--fr-space-5);
  padding: var(--fr-space-4) var(--fr-container-pad-x);
  min-height: 3.75rem;
}

.fr-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-3);
  text-decoration: none;
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-bold);
  font-size: calc(var(--fr-text-md) * 1.1);
  letter-spacing: -0.015em;
}
.fr-masthead__brand:hover { color: var(--fr-color-ink); }

.fr-masthead__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--fr-radius-sm);
  background: var(--fr-color-primary);
  color: var(--fr-color-primary-on);
  font-weight: var(--fr-weight-bold);
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* Brand logo (wide wordmark + trainer) — public + auth mastheads */
.fr-masthead__brand-logo {
  display: block;
  height: 3.5rem;
  width: auto;
  flex: 0 0 auto;
}
/* Brand icon (trainer only) — admin + wizard mastheads */
.fr-masthead__brand-icon {
  display: block;
  height: 2.2rem;
  width: 2.2rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.fr-masthead__brand-text {
  display: inline-block;
}
.fr-masthead__brand-text strong { font-weight: var(--fr-weight-bold); }
.fr-masthead__brand-text .fr-masthead__mode {
  margin-left: 0.35rem;
  color: var(--fr-color-ink-muted);
  font-weight: var(--fr-weight-medium);
}

.fr-masthead__org {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-3);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-medium);
}
.fr-masthead__org::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1.4rem;
  background: var(--fr-color-border-strong);
}

.fr-masthead__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--fr-space-2);
}
.fr-masthead__nav a {
  color: var(--fr-color-ink);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--fr-radius-sm);
  font-weight: var(--fr-weight-medium);
  font-size: calc(var(--fr-text-sm) * 1.1);
}
.fr-masthead__nav a:hover { background: var(--fr-color-surface-sunken); }
.fr-masthead__nav a[aria-current='page'] { color: var(--fr-color-primary); }

.fr-masthead__user-wrap {
  display: flex;
  align-items: center;
  gap: var(--fr-space-4);
  margin-left: auto;
}

.fr-masthead__user {
  color: var(--fr-color-ink);
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-medium);
}

.fr-masthead__signout {
  color: var(--fr-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-medium);
}

/* mobile — collapse nav to a menu trigger */
.fr-masthead__menu-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--fr-color-border-strong);
  border-radius: var(--fr-radius-sm);
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-medium);
  color: var(--fr-color-ink);
  cursor: pointer;
}

@media (max-width: 720px) {
  .fr-masthead__inner { gap: var(--fr-space-3); }
  .fr-masthead__org   { display: none; }
  .fr-masthead__nav   { gap: 0; }
  .fr-masthead--public .fr-masthead__nav a:not([data-keep]) { display: none; }
  .fr-masthead__menu-toggle { display: inline-flex; margin-left: auto; }
}

/* — auth variant: centred, no nav — */
.fr-masthead--auth .fr-masthead__inner {
  justify-content: center;
  max-width: 100%;
  min-height: 4.5rem;
}

/* — admin / wizard variant: subtle tonal tint — */
.fr-masthead--admin,
.fr-masthead--wizard {
  background: var(--fr-color-surface);
}

/* ------------------------------------------------------------
   <fr-footer variant="public|minimal">
   Emits: .fr-footer, .fr-footer__brand, .fr-footer__tagline,
          .fr-footer__meta
   ------------------------------------------------------------ */

.fr-footer {
  margin-top: var(--fr-space-7);
  background: var(--fr-color-bg-strong);
  border-top: 1px solid var(--fr-color-border);
  padding: var(--fr-space-8) 0 var(--fr-space-7);
}
@media (max-width: 640px) {
  .fr-footer {
    padding: var(--fr-space-6) 0;
  }
}
.fr-footer__inner {
  max-width: var(--fr-container-wide);
  margin: 0 auto;
  padding: 0 var(--fr-container-pad-x);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fr-space-6);
  flex-wrap: wrap;
}
.fr-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-3);
  color: var(--fr-color-ink);
  text-decoration: none;
  font-weight: var(--fr-weight-bold);
  font-size: var(--fr-text-md);
}
.fr-footer__brand-logo {
  display: block;
  height: 2.2rem;
  width: auto;
}
.fr-footer__tagline {
  margin-top: var(--fr-space-2);
  color: var(--fr-color-ink-muted);
  font-size: calc(var(--fr-text-sm) * 1.1);
  max-width: 32ch;
}
.fr-footer__meta {
  display: flex;
  gap: var(--fr-space-5);
  align-items: center;
  flex-wrap: wrap;
  font-size: calc(var(--fr-text-sm) * 1.1);
  color: var(--fr-color-ink-muted);
}
.fr-footer__legal {
  max-width: var(--fr-container-wide);
  margin: var(--fr-space-6) auto 0;
  padding: var(--fr-space-5) var(--fr-container-pad-x) 0;
  border-top: 1px solid var(--fr-color-border);
  font-size: calc(var(--fr-text-xs) * 1.1);
  color: var(--fr-color-ink-subtle);
  line-height: var(--fr-leading-relaxed);
}
.fr-footer__meta a,
.fr-footer__meta-button {
  color: var(--fr-color-ink-muted);
  text-decoration: none;
}
.fr-footer__meta-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.fr-footer__meta a:hover,
.fr-footer__meta-button:hover { color: var(--fr-color-ink); text-decoration: underline; }
.fr-footer__social {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.fr-footer__social:hover { text-decoration: none; }
.fr-footer__social-icon {
  display: block;
  height: 1.25rem;
  width: 1.25rem;
}

/* ------------------------------------------------------------
   <fr-flash variant="success|error|info|warning">
   Flash messages slot, admin layouts. Inline alert above content.
   Emits: .fr-flash, .fr-flash--{variant}, .fr-flash__icon,
          .fr-flash__body, .fr-flash__close
   ------------------------------------------------------------ */

.fr-flash {
  display: flex;
  align-items: flex-start;
  gap: var(--fr-space-3);
  padding: var(--fr-space-3) var(--fr-space-4);
  border: 1px solid var(--fr-color-border);
  border-left-width: 4px;
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink);
}
.fr-flash__icon {
  flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.1rem;
  border-radius: var(--fr-radius-pill);
}
.fr-flash__body { flex: 1 1 auto; line-height: var(--fr-leading-snug); }
.fr-flash__body strong { font-weight: var(--fr-weight-semibold); }
.fr-flash__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fr-color-ink-muted);
  padding: 0.1rem 0.3rem;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
}
.fr-flash--success { border-left-color: var(--fr-color-success); background: var(--fr-color-success-soft); }
.fr-flash--success .fr-flash__icon { background: var(--fr-color-success); }
.fr-flash--error   { border-left-color: var(--fr-color-danger);  background: var(--fr-color-danger-soft); }
.fr-flash--error   .fr-flash__icon { background: var(--fr-color-danger); }
.fr-flash--info    { border-left-color: var(--fr-color-info);    background: var(--fr-color-info-soft); }
.fr-flash--info    .fr-flash__icon { background: var(--fr-color-info); }
.fr-flash--warning { border-left-color: var(--fr-color-warning); background: var(--fr-color-warning-soft); }
.fr-flash--warning .fr-flash__icon { background: var(--fr-color-warning); }

/* ------------------------------------------------------------
   <fr-stat label="" value="" caption="" />
   Small KPI block, used in admin dashboards.
   Emits: .fr-stat, .fr-stat__label, .fr-stat__value, .fr-stat__caption
   ------------------------------------------------------------ */

.fr-stat {
  display: block;
}
.fr-stat__label {
  font-size: var(--fr-text-xs);
  font-weight: var(--fr-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fr-tracking-wide);
  color: var(--fr-color-ink-subtle);
}
.fr-stat__value {
  display: block;
  margin-top: var(--fr-space-1);
  font-size: var(--fr-text-2xl);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fr-stat__caption {
  display: block;
  margin-top: var(--fr-space-1);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
}

/* ------------------------------------------------------------
   <fr-tag variant="neutral|success|warning|danger|info">
   Inline status pill — draft, live, problem, etc.
   Emits: .fr-tag, .fr-tag--{variant}
   ------------------------------------------------------------ */

.fr-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-surface-sunken);
  border: 1px solid var(--fr-color-border);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-xs);
  font-weight: var(--fr-weight-semibold);
  letter-spacing: 0.01em;
  text-transform: none;
}
.fr-tag::before {
  content: '';
  display: inline-block;
  width: 0.45rem; height: 0.45rem;
  border-radius: var(--fr-radius-pill);
  background: currentColor;
}
.fr-tag--success { color: var(--fr-color-success); background: var(--fr-color-success-soft); border-color: color-mix(in oklch, var(--fr-color-success) 25%, white); }
.fr-tag--warning { color: var(--fr-color-warning); background: var(--fr-color-warning-soft); border-color: color-mix(in oklch, var(--fr-color-warning) 25%, white); }
.fr-tag--danger  { color: var(--fr-color-danger);  background: var(--fr-color-danger-soft);  border-color: color-mix(in oklch, var(--fr-color-danger) 25%, white); }
.fr-tag--info    { color: var(--fr-color-info);    background: var(--fr-color-info-soft);    border-color: color-mix(in oklch, var(--fr-color-info) 25%, white); }
.fr-tag--neutral { color: var(--fr-color-ink-muted); }

/* ============================================================
   Image upload — dropzone and current-image preview
   Used by the wizard hero-image step and the org profile.
   ============================================================ */

.fr-dropzone {
  border: 2px dashed var(--fr-color-border-strong);
  border-radius: var(--fr-radius-lg);
  padding: var(--fr-space-8) var(--fr-space-4);
  text-align: center;
  background: var(--fr-color-surface);
}
.fr-dropzone__icon {
  width: 40px; height: 40px;
  margin: 0 auto var(--fr-space-3);
  color: var(--fr-color-ink-muted);
}
.fr-dropzone__title {
  margin: 0 0 4px;
  font-weight: var(--fr-weight-semibold);
}
.fr-dropzone__hint {
  margin: 0;
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
}

.fr-image-preview {
  margin: 0 0 var(--fr-space-4);
  max-width: 32rem;
  border-radius: var(--fr-radius-lg);
  overflow: hidden;
  border: 1px solid var(--fr-color-border);
  background: var(--fr-color-surface-sunken);
}
.fr-image-preview img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --hero crops to the public event hero's aspect ratio (.fr-event-hero is 16/7).
   Use this for previews of images that get rendered as a fixed-ratio hero
   on the public side (event hero). Omit for natural-ratio renders (logo). */
.fr-image-preview--hero img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* ============================================================
   Phone-size fixes (≤560px)
   ============================================================ */

@media (max-width: 560px) {
  /* Tables — fall back to a horizontal scroller. Cells stay on one line so
     long event names produce a scroll rather than wrapping cells unevenly.
     `.fr-table` is the legacy admin-list table (rp-events.css);
     `.fr-data-table` is the wizard step table (wizard-pages.css). */
  .fr-data-table,
  .fr-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fr-data-table thead, .fr-data-table tbody,
  .fr-table thead,      .fr-table tbody {
    display: table;
    width: 100%;
  }
  .fr-data-table th, .fr-data-table td,
  .fr-table th,      .fr-table td {
    white-space: nowrap;
  }

  /* URL-prefix form field — stack prefix above input so a long prefix
     (e.g. "fun-run.co.uk/<org>/participant-events/") doesn't push the
     input off-screen. Allow the prefix itself to wrap if necessary. */
  .fr-form-field__url-group { flex-direction: column; align-items: stretch; }
  .fr-form-field__url-prefix {
    border-right: 0;
    border-bottom: 1px solid var(--fr-color-border);
    white-space: normal;
    word-break: break-all;
  }

  /* Masthead — on admin/wizard the brand text crowds out the user-wrap.
     Drop the text and keep just the mark; identity is preserved by the
     mark and the page context. Public variant is fine — its nav already
     collapses at 720px. */
  .fr-masthead--admin .fr-masthead__brand-text,
  .fr-masthead--wizard .fr-masthead__brand-text { display: none; }

  /* Cognito display names are unbounded — truncate so a long name can't
     push the signout button off-screen. */
  .fr-masthead__user {
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Tables should print as normal tables, not horizontal scrollers. */
@media print {
  .fr-data-table, .fr-table {
    display: table;
    overflow: visible;
    white-space: normal;
  }
}

/* ============================================================
   <fr-cta-bar>  →  .fr-cta-bar
   Sticky mobile bottom action bar. Hidden above 640px.
   ============================================================ */

.fr-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--fr-z-sticky);
  display: none;                 /* shown only on phone */
  align-items: stretch;
  gap: var(--fr-space-2);
  padding: var(--fr-space-3) var(--fr-container-pad-x);
  background: color-mix(in oklch, var(--fr-color-surface), transparent 4%);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--fr-color-border);
  box-shadow: 0 -4px 20px -8px rgba(22,33,58,0.08);
}
.fr-cta-bar .fr-btn { flex: 1 1 auto; }
.fr-cta-bar__primary { flex: 2 1 auto !important; }

@media (max-width: 640px) {
  .fr-cta-bar { display: flex; }
}

/* ============================================================
   <fr-presenter>  →  .fr-presenter (chip | card | inline)
   "Presented by Org X" identity primitive. The chip overlays a
   hero image; the card sits in an aside; the inline form is the
   eyebrow variant.
   ============================================================ */

.fr-presenter {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-3);
  text-decoration: none;
}

.fr-presenter__logo {
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  /* Explicit max-* matches width/height — without it, the universal
     `img { max-width: 100% }` rule from tokens.css interacts with a
     shrink-wrapped inline-flex chip to let a fixed-pixel PNG logo
     render at its intrinsic size. */
  max-width: 2.25rem; max-height: 2.25rem;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  object-fit: cover;
  overflow: hidden;
}

.fr-presenter__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fr-presenter__eyebrow {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink-subtle);
}
.fr-presenter__name {
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  line-height: var(--fr-leading-snug);
  white-space: nowrap;
}

/* — chip: hero overlay — */
.fr-presenter--chip {
  padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-radius: var(--fr-radius-pill);
  box-shadow: 0 4px 14px -4px rgba(22,33,58,0.20);
}
.fr-presenter--chip .fr-presenter__logo {
  width: 1.75rem; height: 1.75rem;
  max-width: 1.75rem; max-height: 1.75rem;
}
.fr-presenter--chip .fr-presenter__eyebrow {
  color: rgba(22, 33, 58, 0.6);
  font-size: 0.65rem;
}
.fr-presenter--chip .fr-presenter__name {
  font-size: var(--fr-text-sm);
}

/* — card: sidebar trust card — */
.fr-presenter--card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--fr-space-3);
  padding: var(--fr-space-4);
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
}
.fr-presenter--card .fr-presenter__logo {
  width: 2.5rem; height: 2.5rem;
  max-width: 2.5rem; max-height: 2.5rem;
}
.fr-presenter--card .fr-presenter__action {
  margin-left: auto;
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.fr-presenter--card .fr-presenter__action:hover {
  color: var(--fr-color-primary-hover);
  text-decoration: underline;
}

/* — inline: small eyebrow form (kept available) — */
.fr-presenter--inline .fr-presenter__logo {
  width: 1.5rem; height: 1.5rem;
  max-width: 1.5rem; max-height: 1.5rem;
}
.fr-presenter--inline .fr-presenter__name {
  font-size: var(--fr-text-sm);
}

/* ------------------------------------------------------------
   Stepper — number input flanked by minus and plus buttons.
   Touch targets ≥ 44×44px. Reusable across forms.
   ------------------------------------------------------------ */

.fr-stepper-group {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-5);
}

.fr-stepper {
  display: block;
}

.fr-stepper__label {
  display: block;
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  margin-bottom: var(--fr-space-2);
}

.fr-stepper__control {
  display: flex;
  align-items: stretch;
  border-radius: var(--fr-radius-md);
  overflow: hidden;
  border: 1.5px solid var(--fr-color-border-input);
  background: var(--fr-color-surface);
  transition: border-color var(--fr-duration-base) var(--fr-ease),
              box-shadow   var(--fr-duration-base) var(--fr-ease);
}
.fr-stepper__control:focus-within {
  border-color: var(--fr-color-border-focus);
  box-shadow: var(--fr-shadow-focus);
}

.fr-stepper__btn {
  flex: 0 0 auto;
  width: 3rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--fr-text-xl);
  font-weight: var(--fr-weight-semibold);
  line-height: 1;
  background: var(--fr-color-surface);
  color: var(--fr-color-ink);
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--fr-duration-base) var(--fr-ease);
}
.fr-stepper__btn:hover {
  background: var(--fr-color-surface-sunken);
}
.fr-stepper__btn:active {
  background: var(--fr-color-bg-strong);
}
.fr-stepper__btn:focus-visible {
  outline: none;
}

.fr-stepper__control input[type='number'] {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: inherit;
  font-size: var(--fr-text-lg);
  font-weight: var(--fr-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
  background: var(--fr-color-surface);
  border: 0;
  border-left: 1px solid var(--fr-color-border);
  border-right: 1px solid var(--fr-color-border);
  padding: var(--fr-space-2) var(--fr-space-2);
  -moz-appearance: textfield;
  appearance: textfield;
}
.fr-stepper__control input[type='number']:focus {
  outline: none;
}
.fr-stepper__control input[type='number']::-webkit-outer-spin-button,
.fr-stepper__control input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ------------------------------------------------------------
   Disclosure — clickable header that expands to reveal content.
   Built on the native <details> element so it works without JS.
   ------------------------------------------------------------ */

.fr-disclosure {
  border-top: 1px solid var(--fr-color-border);
  padding-top: var(--fr-space-4);
}

.fr-disclosure__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fr-space-3);
  list-style: none;
  cursor: pointer;
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  padding: var(--fr-space-2) 0;
  user-select: none;
}
.fr-disclosure__summary::-webkit-details-marker { display: none; }
.fr-disclosure__summary:focus-visible {
  outline: 2px solid var(--fr-color-primary);
  outline-offset: 2px;
  border-radius: var(--fr-radius-xs);
}

.fr-disclosure__chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--fr-color-ink-muted);
  transition: transform 200ms var(--fr-ease);
}
.fr-disclosure[open] .fr-disclosure__chevron {
  transform: rotate(180deg);
}

.fr-disclosure__body {
  padding-top: var(--fr-space-4);
  padding-bottom: var(--fr-space-2);
}

.fr-disclosure__note {
  margin: var(--fr-space-3) 0 0;
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  line-height: var(--fr-leading-relaxed);
}

/* ------------------------------------------------------------
   FAQ accordion — questions in a stack of native <details>.
   ------------------------------------------------------------ */

.fr-faq {
  max-width: 48rem;
  margin: 0 auto;
}

.fr-faq__item {
  border-bottom: 1px solid var(--fr-color-border);
}
.fr-faq__item:first-child {
  border-top: 1px solid var(--fr-color-border);
}

.fr-faq__question {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  list-style: none;
  cursor: pointer;
  padding: var(--fr-space-3) 0;
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  user-select: none;
}
.fr-faq__question > span { flex: 1; }
.fr-faq__question::-webkit-details-marker { display: none; }
.fr-faq__question:focus-visible {
  outline: 2px solid var(--fr-color-primary);
  outline-offset: 2px;
  border-radius: var(--fr-radius-xs);
}
.fr-faq__icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--fr-color-heading);
}
.fr-faq__question::after {
  content: '';
  flex: 0 0 auto;
  margin-left: auto;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--fr-color-ink-muted);
  border-bottom: 2px solid var(--fr-color-ink-muted);
  transform: rotate(45deg);
  transition: transform 200ms var(--fr-ease);
  margin-top: -0.25rem;
}
.fr-faq__item[open] .fr-faq__question::after {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}

.fr-faq__answer {
  padding: 0 0 var(--fr-space-4);
}
.fr-faq__answer p {
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0;
  max-width: 56ch;
}
.fr-faq__answer p + p {
  margin-top: var(--fr-space-3);
}
.fr-faq__answer a {
  color: var(--fr-color-primary);
  font-weight: var(--fr-weight-semibold);
}

/* ------------------------------------------------------------
   Mobile sticky summary bar — pinned to top of viewport on
   narrow screens. Slides in once shown. Hidden ≥ 900px.
   Used by the sponsored-event calculator; available to any
   tool page that wants a single live headline figure on mobile.
   ------------------------------------------------------------ */

.fr-calc-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--fr-z-sticky);
  background: var(--fr-color-surface-inverse);
  color: #fff;
  /* Hidden by default. visibility is a belt-and-braces fallback so the
     bar can't appear if a JS race or stale cache leaves the transform
     in place. The class toggle below handles the slide-in animation. */
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 200ms var(--fr-ease),
              visibility 0s linear 200ms;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.fr-calc-sticky.is-visible {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 200ms var(--fr-ease),
              visibility 0s;
}
.fr-calc-sticky__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fr-space-4);
  max-width: var(--fr-container-wide);
  margin: 0 auto;
  padding: var(--fr-space-3) var(--fr-container-pad-x);
}
.fr-calc-sticky__label {
  font-size: var(--fr-text-sm);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fr-weight-semibold);
}
.fr-calc-sticky__value {
  font-family: var(--fr-font-serif);
  font-size: var(--fr-text-xl);
  font-weight: var(--fr-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
@media (min-width: 900px) {
  .fr-calc-sticky { display: none; }
}

/* ============================================================
   Pricing card
   A single card listing fee or feature rows, each with a label
   plus sub-text on the left and a value on the right, separated
   by hairline rules. Visual sibling of the calculator's results
   card. Reusable on the pricing page, the homepage and any
   future "what this costs / what this includes" block.
   ============================================================ */

.fr-pricing-card {
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-xl);
  padding: var(--fr-space-7);
  box-shadow: var(--fr-shadow-md);
  max-width: 44rem;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .fr-pricing-card {
    padding: var(--fr-space-6);
    border-radius: var(--fr-radius-lg);
  }
}

.fr-pricing-card__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--fr-space-4) var(--fr-space-6);
}
@media (max-width: 640px) {
  .fr-pricing-card__row {
    grid-template-columns: 1fr;
    gap: var(--fr-space-2);
  }
}

.fr-pricing-card__label {
  font-family: var(--fr-font-serif);
  font-size: var(--fr-text-lg);
  font-weight: var(--fr-weight-bold);
  color: var(--fr-color-heading);
  margin: 0;
  letter-spacing: -0.01em;
}

.fr-pricing-card__value {
  font-family: var(--fr-font-serif);
  font-size: var(--fr-text-xl);
  font-weight: var(--fr-weight-bold);
  color: var(--fr-color-heading);
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .fr-pricing-card__value {
    text-align: left;
  }
}

.fr-pricing-card__sub {
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink-muted);
  margin: var(--fr-space-2) 0 0;
  max-width: 30rem;
}

.fr-pricing-card__rule {
  border: 0;
  border-top: 1px solid var(--fr-color-border);
  margin: var(--fr-space-5) 0;
}


/* ============================================================
   Run-operate redesign primitives
   Appended from Claude Design handoff admin-operate.css.
   APIs in Fundraisy.FunRunWebApp/Components/*TagHelper.cs
   ============================================================ */
/* admin-operate.css — NEW components proposed by this redesign.
   Drop this file into Fundraisy.FunRunWebApp/wwwroot/css/ as a new file,
   OR append these blocks to components.css. Each block names the proposed
   TagHelper. APIs are detailed in HANDOFF.md.
*/

/* =====================================================
   therm-caption — small two-end caption under a slim thermometer.
   Mockup-only helper. In implementation, render this as a sibling using
   <fr-thermometer>'s built-in __caption and __pct, OR add a `caption-end`
   attribute to <fr-thermometer> that emits this split layout.
   ===================================================== */
.therm-caption{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--fr-space-2);
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
}
.therm-caption strong { color: var(--fr-color-ink); font-weight: var(--fr-weight-semibold); }


/* =====================================================
   fr-kpi — KPI tile
   The workhorse of both dashboards. Bigger than fr-stat; can host a
   thermometer or sparkline. Sits inside a .fr-kpi-row grid wrapper.
   ===================================================== */
.fr-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fr-space-4);
  margin: 0 0 var(--fr-space-6);
}
.fr-kpi {
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-lg);
  padding: var(--fr-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-3);
  box-shadow: var(--fr-shadow-sm);
}
.fr-kpi__label {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  color: var(--fr-color-ink-subtle);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-space-2);
}
.fr-kpi__value {
  font-family: var(--fr-font-serif);
  color: var(--fr-color-heading);
  font-size: var(--fr-text-3xl);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.fr-kpi__value--sm { font-size: var(--fr-text-2xl); }
.fr-kpi__value-secondary {
  color: var(--fr-color-ink-subtle);
  font-size: var(--fr-text-xl);
  font-family: inherit;
  margin-left: 2px;
}
.fr-kpi__caption {
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}
.fr-kpi__caption strong { color: var(--fr-color-ink); font-weight: 600; }
.fr-kpi__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-1);
  font-size: var(--fr-text-xs);
  font-weight: 600;
  color: var(--fr-color-ink-muted);
  text-transform: none;
  letter-spacing: 0;
}
.fr-kpi__hint--success { color: var(--fr-color-success); }
.fr-kpi__hint--warning { color: var(--fr-color-warning); }
.fr-kpi--accent {
  background: linear-gradient(180deg, #ffffff 0%, var(--fr-color-primary-soft) 140%);
  border-color: color-mix(in srgb, var(--fr-color-primary) 30%, var(--fr-color-border));
}

/* =====================================================
   fr-next-up — Next-up hero strip
   The lead block on both dashboards. Big date, capacity bar, one CTA.
   ===================================================== */
.fr-next-up {
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-lg);
  padding: var(--fr-space-6);
  margin: 0 0 var(--fr-space-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--fr-space-7);
  align-items: center;
  box-shadow: var(--fr-shadow-sm);
  position: relative;
  overflow: hidden;
}
.fr-next-up::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--fr-color-primary-soft) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0.6;
}
.fr-next-up > * { position: relative; z-index: 1; }

.fr-next-up__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--fr-space-3) var(--fr-space-5);
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border-strong);
  min-width: 96px;
  text-align: center;
}
.fr-next-up__date-month {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  color: var(--fr-color-primary);
  font-weight: 700;
  margin-bottom: var(--fr-space-1);
}
.fr-next-up__date-day {
  font-family: var(--fr-font-serif);
  color: var(--fr-color-heading);
  font-size: 2.5rem;
  line-height: 1;
}
.fr-next-up__date-weekday {
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
  margin-top: var(--fr-space-1);
  font-weight: 600;
}

.fr-next-up__main { min-width: 0; display: flex; flex-direction: column; gap: var(--fr-space-2); }
.fr-next-up__eyebrow {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  color: var(--fr-color-ink-subtle);
  font-weight: 600;
}
.fr-next-up__title {
  font-family: var(--fr-font-serif);
  color: var(--fr-color-heading);
  font-size: var(--fr-text-2xl);
  line-height: var(--fr-leading-tight);
  margin: 0;
}
.fr-next-up__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-2) var(--fr-space-5);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  margin-top: var(--fr-space-2);
}
.fr-next-up__meta strong { color: var(--fr-color-ink); font-weight: 600; }
.fr-next-up__progress { margin-top: var(--fr-space-3); max-width: 28rem; }

.fr-next-up__cta {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-2);
  align-items: flex-end;
  flex-shrink: 0;
}
.fr-next-up__countdown {
  font-family: var(--fr-font-serif);
  color: var(--fr-color-heading);
  font-size: var(--fr-text-xl);
  line-height: 1;
}
.fr-next-up__countdown-label {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  color: var(--fr-color-ink-subtle);
  font-weight: 600;
}

@media (max-width: 760px) {
  .fr-next-up {
    grid-template-columns: 1fr;
    gap: var(--fr-space-4);
    padding: var(--fr-space-5);
  }
  .fr-next-up__date { flex-direction: row; justify-content: flex-start; min-width: 0; padding: var(--fr-space-3); gap: var(--fr-space-3); }
  .fr-next-up__date-day { font-size: var(--fr-text-2xl); }
  .fr-next-up__cta { align-items: stretch; }
  .fr-next-up__cta .fr-btn { width: 100%; }
}

/* =====================================================
   fr-action-queue — operational to-do list card
   Replaces ad-hoc fr-alert strips. Sits high on org / run dashboards.
   ===================================================== */
.fr-action-queue {
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-lg);
  padding: var(--fr-space-5) var(--fr-space-6);
  margin: 0 0 var(--fr-space-6);
  box-shadow: var(--fr-shadow-sm);
}
.fr-action-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-space-3);
  margin-bottom: var(--fr-space-4);
}
.fr-action-queue__title {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-3);
  font-size: var(--fr-text-lg);
  font-weight: 600;
  color: var(--fr-color-ink);
}
.fr-action-queue__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-warning-soft);
  color: var(--fr-color-warning);
  font-size: var(--fr-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fr-action-queue--clear .fr-action-queue__count {
  background: var(--fr-color-success-soft);
  color: var(--fr-color-success);
}

.fr-action-queue__list {
  list-style: none;
  margin: 0; padding: 0;
}
.fr-action-queue__item {
  display: flex;
  align-items: center;
  gap: var(--fr-space-4);
  padding: var(--fr-space-3) 0;
  border-top: 1px solid var(--fr-color-border);
}
.fr-action-queue__item:first-child { border-top: none; padding-top: 0; }
.fr-action-queue__icon {
  width: 36px; height: 36px;
  border-radius: var(--fr-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fr-color-warning-soft);
  color: var(--fr-color-warning);
  flex-shrink: 0;
}
.fr-action-queue__icon svg { width: 18px; height: 18px; }
.fr-action-queue__icon--info { background: var(--fr-color-info-soft); color: var(--fr-color-info); }
.fr-action-queue__icon--danger { background: var(--fr-color-danger-soft); color: var(--fr-color-danger); }
.fr-action-queue__icon--neutral { background: var(--fr-color-bg-strong); color: var(--fr-color-ink-muted); }

.fr-action-queue__body { flex: 1; min-width: 0; }
.fr-action-queue__heading {
  font-size: var(--fr-text-base);
  font-weight: 600;
  color: var(--fr-color-ink);
  margin: 0;
}
.fr-action-queue__sub {
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  margin-top: 2px;
}
.fr-action-queue__action { flex-shrink: 0; }

.fr-action-queue__empty {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  padding: var(--fr-space-3) 0;
  color: var(--fr-color-success);
  font-weight: 600;
}
.fr-action-queue__empty-sub {
  color: var(--fr-color-ink-muted);
  font-weight: 400;
  font-size: var(--fr-text-sm);
  margin-top: var(--fr-space-1);
}

/* =====================================================
   fr-data-table — searchable / sortable / summary-row data table
   Replaces .fr-table. Wears the card's chrome.
   ===================================================== */
.fr-data-table {
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-lg);
  overflow: hidden;
  box-shadow: var(--fr-shadow-sm);
  margin: 0 0 var(--fr-space-6);
}
.fr-data-table__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-space-4);
  padding: var(--fr-space-4) var(--fr-space-5);
  border-bottom: 1px solid var(--fr-color-border);
  flex-wrap: wrap;
}
.fr-data-table__title-block { display: flex; flex-direction: column; gap: 2px; }
.fr-data-table__title {
  font-size: var(--fr-text-lg);
  font-weight: 600;
  color: var(--fr-color-ink);
}
.fr-data-table__sub { font-size: var(--fr-text-sm); color: var(--fr-color-ink-muted); }
.fr-data-table__controls { display: flex; gap: var(--fr-space-3); align-items: center; }
.fr-data-table__search {
  position: relative;
}
.fr-data-table__search input {
  font: inherit;
  padding: 8px 12px 8px 36px;
  width: 240px;
  border: 1px solid var(--fr-color-border-input);
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  color: var(--fr-color-ink);
}
.fr-data-table__search::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  border: 1.6px solid var(--fr-color-ink-subtle);
  border-radius: 50%;
}
.fr-data-table__search::after {
  content: "";
  position: absolute;
  left: 22px; top: 50%;
  width: 7px; height: 1.6px;
  background: var(--fr-color-ink-subtle);
  transform: rotate(45deg) translateY(2px);
}
.fr-data-table__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-2);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}
.fr-data-table__filter select {
  font: inherit;
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--fr-color-border-input);
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  color: var(--fr-color-ink);
  font-size: var(--fr-text-sm);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fr-color-ink-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--fr-color-ink-muted) 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.fr-data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fr-text-sm);
}
.fr-data-table thead th {
  text-align: left;
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  color: var(--fr-color-ink-subtle);
  font-weight: 600;
  padding: var(--fr-space-3) var(--fr-space-5);
  border-bottom: 1px solid var(--fr-color-border);
  background: var(--fr-color-surface-sunken);
  white-space: nowrap;
}
.fr-data-table thead th[data-sortable] {
  cursor: pointer;
  user-select: none;
}
.fr-data-table thead th[data-sortable]::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--fr-color-ink-subtle);
  opacity: 0.4;
  vertical-align: middle;
}
.fr-data-table thead th[data-sort="asc"]::after { border-top: 0; border-bottom: 4px solid var(--fr-color-heading); opacity: 1; }
.fr-data-table thead th[data-sort="desc"]::after { border-top-color: var(--fr-color-heading); opacity: 1; }
.fr-data-table th--num, .fr-data-table td--num { text-align: right; font-variant-numeric: tabular-nums; }
.fr-data-table tbody td {
  padding: var(--fr-space-4) var(--fr-space-5);
  border-bottom: 1px solid var(--fr-color-border);
  vertical-align: middle;
}
.fr-data-table tbody tr:last-child td { border-bottom: none; }
.fr-data-table tbody tr:hover { background: var(--fr-color-surface-sunken); }

.fr-data-table__primary {
  font-weight: 600;
  color: var(--fr-color-ink);
  display: block;
}
.fr-data-table__secondary {
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
  display: block;
  margin-top: 2px;
}

.fr-data-table__actions {
  display: flex;
  gap: var(--fr-space-2);
  justify-content: flex-end;
}

.fr-data-table__notes-row td {
  padding: var(--fr-space-3) var(--fr-space-5);
  background: var(--fr-color-surface-sunken);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  border-top: 0;
}
.fr-data-table tbody tr.fr-data-table__notes-row:hover { background: var(--fr-color-surface-sunken); }
.fr-data-table__notes-label {
  font-weight: var(--fr-weight-bold);
  color: var(--fr-color-ink);
  margin-right: var(--fr-space-2);
}
.fr-data-table__notes-body { white-space: pre-wrap; }

.fr-data-table__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fr-space-3) var(--fr-space-5);
  background: var(--fr-color-surface-sunken);
  border-top: 1px solid var(--fr-color-border);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  font-variant-numeric: tabular-nums;
}
.fr-data-table__foot strong { color: var(--fr-color-ink); font-weight: 600; }

.fr-data-table__pagination { display: inline-flex; gap: var(--fr-space-1); align-items: center; }

/* Mobile — render each row as a summary card */
@media (max-width: 760px) {
  .fr-data-table table thead { display: none; }
  .fr-data-table table, .fr-data-table tbody, .fr-data-table tr, .fr-data-table td { display: block; }
  .fr-data-table tbody tr {
    padding: var(--fr-space-4) var(--fr-space-5);
    border-bottom: 1px solid var(--fr-color-border);
  }
  .fr-data-table tbody tr:hover { background: transparent; }
  .fr-data-table tbody td {
    border-bottom: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--fr-space-3);
  }
  .fr-data-table tbody td + td { margin-top: var(--fr-space-2); }
  .fr-data-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: var(--fr-text-xs);
    letter-spacing: var(--fr-tracking-wide);
    text-transform: uppercase;
    color: var(--fr-color-ink-subtle);
    font-weight: 600;
    flex-shrink: 0;
  }
  .fr-data-table tbody td[data-label="primary"]::before { display: none; }
  .fr-data-table tbody td[data-label="primary"] { display: block; }
  .fr-data-table__head { padding: var(--fr-space-4); }
  .fr-data-table__search input { width: 100%; }
}

/* =====================================================
   fr-combobox — typeahead single-select
   Replaces native <select size="8"> on the donation picker.
   Mocked here as a closed and open state. Real component is keyboard-navigable.
   ===================================================== */
.fr-combobox { position: relative; }
.fr-combobox__input {
  font: inherit;
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--fr-color-border-input);
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  color: var(--fr-color-ink);
}
.fr-combobox__input:focus { border-color: var(--fr-color-primary); outline: none; box-shadow: var(--fr-shadow-focus); }
.fr-combobox__icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  color: var(--fr-color-ink-subtle);
}
.fr-combobox__listbox {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
  box-shadow: var(--fr-shadow-md);
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
  padding: var(--fr-space-1);
  list-style: none;
  margin: 0;
}
.fr-combobox__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fr-space-2) var(--fr-space-3);
  border-radius: var(--fr-radius-sm);
  font-size: var(--fr-text-sm);
  cursor: pointer;
}
.fr-combobox__option mark { background: var(--fr-color-primary-soft); color: var(--fr-color-ink); border-radius: 2px; }
.fr-combobox__option:hover, .fr-combobox__option[aria-selected="true"] {
  background: var(--fr-color-primary-soft);
}
.fr-combobox__option-sub {
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
}
.fr-combobox__empty {
  padding: var(--fr-space-3);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  text-align: center;
}

/* =====================================================
   fr-confirm-in-place — inline reveal "are you sure?"
   Avoids a route hop for low-stakes confirmations.
   ===================================================== */
.fr-confirm-in-place {
  border: 1px solid var(--fr-color-warning);
  background: var(--fr-color-warning-soft);
  border-radius: var(--fr-radius-md);
  padding: var(--fr-space-4) var(--fr-space-5);
  display: flex;
  gap: var(--fr-space-4);
  align-items: center;
  flex-wrap: wrap;
}
.fr-confirm-in-place__body { flex: 1; min-width: 220px; }
.fr-confirm-in-place__title {
  font-weight: 600;
  color: var(--fr-color-warning);
  margin: 0 0 2px;
}
.fr-confirm-in-place__sub {
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}
.fr-confirm-in-place__actions {
  display: flex;
  gap: var(--fr-space-2);
}

/* =====================================================
   Suggestion list — fr-suggestion-list
   For the match-resolve "Suggested matches" block. Replaces .fr-pick-row.
   ===================================================== */
.fr-suggestion-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fr-space-3);
}
.fr-suggestion {
  border: 1px solid var(--fr-color-border);
  background: var(--fr-color-surface);
  border-radius: var(--fr-radius-md);
  padding: var(--fr-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-2);
  transition: border-color var(--fr-duration-fast) var(--fr-ease);
  text-align: left;
  font: inherit;
  cursor: pointer;
  width: 100%;
}
.fr-suggestion:hover {
  border-color: var(--fr-color-primary);
  background: var(--fr-color-primary-soft);
}
.fr-suggestion__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fr-space-2); }
.fr-suggestion__name { font-weight: 600; color: var(--fr-color-ink); }
.fr-suggestion__match {
  font-size: var(--fr-text-xs);
  font-weight: 700;
  color: var(--fr-color-success);
  background: var(--fr-color-success-soft);
  padding: 2px 8px;
  border-radius: var(--fr-radius-pill);
}
.fr-suggestion__detail { font-size: var(--fr-text-sm); color: var(--fr-color-ink-muted); }



/* =====================================================
   fr-auth-motif — decorative SVG behind the auth shell.
   Soft amber ribbon arc + dashed navy lane line + scattered dots.
   Restraint is the point — opacity values baked into the SVG, not here.
   ===================================================== */
.fr-auth-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  display: block;
}
.fr-auth-motif > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  max-width: 140vw;
  transform: translate(-50%, -52%);
  opacity: 0.85;
}
@media (max-width: 720px) {
  .fr-auth-motif > svg { width: 800px; transform: translate(-50%, -55%); }
}


/* =====================================================
   fr-auth-links — link row beneath the form on every auth page.
   Two patterns: default (space-between, two links) and --single
   (one link, left-aligned).
   ===================================================== */
.fr-auth-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fr-space-3) var(--fr-space-5);
  margin-top: var(--fr-space-5);
  font-size: var(--fr-text-sm);
}
.fr-auth-links a,
.fr-auth-links .fr-link-button {
  color: var(--fr-color-primary-active);
  font-weight: var(--fr-weight-medium);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.fr-auth-links a:hover,
.fr-auth-links .fr-link-button:hover { text-decoration: underline; }
.fr-auth-links--single { justify-content: flex-start; }


/* =====================================================
   fr-otp — six-cell one-time-code input used on Verify + ResetPassword.
   Behaviour wired by wwwroot/js/fr-otp-input.js; OtpTagHelper emits the
   markup.
   ===================================================== */
.fr-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--fr-space-2);
  max-width: 22rem;
}
.fr-otp__cell {
  font-family: var(--fr-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--fr-text-2xl);
  font-weight: var(--fr-weight-bold);
  text-align: center;
  color: var(--fr-color-ink);

  width: 100%;
  height: 3.5rem;
  padding: 0;

  background: var(--fr-color-surface);
  border: 1.5px solid var(--fr-color-border-input);
  border-radius: var(--fr-radius-md);

  transition: border-color var(--fr-duration-fast) var(--fr-ease),
              box-shadow   var(--fr-duration-fast) var(--fr-ease),
              background   var(--fr-duration-fast) var(--fr-ease);

  appearance: textfield;
  -moz-appearance: textfield;
}
.fr-otp__cell::-webkit-outer-spin-button,
.fr-otp__cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fr-otp__cell:hover { border-color: var(--fr-color-ink-muted); }
.fr-otp__cell:focus,
.fr-otp__cell:focus-visible {
  outline: none;
  border-color: var(--fr-color-primary);
  box-shadow: var(--fr-shadow-focus);
}
.fr-otp__cell[data-filled="true"] {
  background: var(--fr-color-primary-soft);
  border-color: color-mix(in oklch, var(--fr-color-primary) 35%, white);
}
.fr-otp--error .fr-otp__cell {
  border-color: var(--fr-color-danger);
  background: #fff;
}
.fr-otp--error .fr-otp__cell:focus,
.fr-otp--error .fr-otp__cell:focus-visible {
  border-color: var(--fr-color-danger);
  box-shadow: 0 0 0 4px rgba(195, 57, 44, 0.22);
}
.fr-otp--busy .fr-otp__cell {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 420px) {
  .fr-otp { gap: 6px; }
  .fr-otp__cell {
    height: 3rem;
    font-size: var(--fr-text-xl);
  }
}


/* =====================================================
   fr-password-meter — live "satisfies the rules" indicator beneath
   any new-password field marked with [data-fr-password]. Rendered
   automatically by <fr-form-field password-meter="true" />; behaviour
   wired by wwwroot/js/fr-password-meter.js.
   ===================================================== */
.fr-password-meter {
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-1);
  margin-top: var(--fr-space-2);
}
.fr-password-meter__rule {
  display: flex;
  align-items: center;
  gap: var(--fr-space-2);
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
  line-height: 1.4;
}
.fr-password-meter__rule::before {
  content: '';
  width: 14px; height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.4px solid var(--fr-color-border-strong);
  background: var(--fr-color-surface);
  transition: all var(--fr-duration-fast) var(--fr-ease);
}
.fr-password-meter__rule[data-met] {
  color: var(--fr-color-success);
}
.fr-password-meter__rule[data-met]::before {
  background: var(--fr-color-success);
  border-color: var(--fr-color-success);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m3.5 8.3 3 3 6-6.6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}


/* =====================================================
   fr-alert--soft — info-toned variant for routine errors that shouldn't
   shout (bad credentials, wrong code). Real --danger stays for real
   server problems (Cognito unreachable, account locked).
   Composed on top of the existing .fr-alert in site.css.
   ===================================================== */
.fr-alert--soft {
  background: var(--fr-color-info-soft);
  color: var(--fr-color-info);
  border: 1px solid color-mix(in oklch, var(--fr-color-info) 22%, white);
}


/* =====================================================
   fr-auth-confirm-chip — small "Code sent" pill that sits above the
   ResetPassword card title, absorbing the "we sent you a code"
   message so ForgotPassword can skip its own confirmation interstitial.
   ===================================================== */
.fr-auth-confirm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-2);
  background: var(--fr-color-success-soft);
  color: var(--fr-color-success);
  border-radius: var(--fr-radius-pill);
  padding: 4px 12px 4px 8px;
  font-size: var(--fr-text-xs);
  font-weight: var(--fr-weight-semibold);
  margin-bottom: var(--fr-space-3);
  border: 1px solid color-mix(in oklch, var(--fr-color-success) 22%, white);
}
.fr-auth-confirm-chip svg { width: 14px; height: 14px; }


/* =====================================================
   fr-callout — small framed block for warm/contextual framing.
   Used by Interstitial (no-orgs welcome), Bank (onboarding "what
   will happen" panel), OrgProfile (preview-helper text), and Signup
   (auth welcome moment). Lived in admin-onboarding.css originally —
   promoted here when the auth-pages pass needed it too.
   ===================================================== */
.fr-callout {
  background: var(--fr-color-primary-soft);
  border: 1px solid color-mix(in oklch, var(--fr-color-primary) 25%, white);
  border-radius: var(--fr-radius-lg);
  padding: var(--fr-space-6);
  margin: 0 0 var(--fr-space-6);
}
.fr-callout__eyebrow {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  color: var(--fr-color-primary-active);
  font-weight: var(--fr-weight-semibold);
  margin: 0 0 var(--fr-space-2);
}
.fr-callout__title {
  font-family: var(--fr-font-serif);
  color: var(--fr-color-heading);
  font-size: var(--fr-text-2xl);
  line-height: var(--fr-leading-tight);
  margin: 0 0 var(--fr-space-2);
  font-weight: var(--fr-weight-bold);
}
.fr-callout__body {
  color: var(--fr-color-ink);
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-normal);
  margin: 0;
}
.fr-callout--neutral {
  background: var(--fr-color-surface-sunken);
  border-color: var(--fr-color-border);
}
.fr-callout--neutral .fr-callout__eyebrow { color: var(--fr-color-ink-muted); }

/* ------------------------------------------------------------
   C6 — reusable share strip. Persistent (not dismissible) horizontal
   row used on the live event dashboard and (eventually) other places
   that want a QR + URL + downloads + social block. Wraps to a stacked
   layout on narrow screens.
   ------------------------------------------------------------ */
.fr-share-strip {
  max-width: var(--fr-container-wide);
  margin: var(--fr-space-4) auto;
  padding: var(--fr-space-4);
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
}
.fr-share-strip__intro { margin-bottom: var(--fr-space-3); }
.fr-share-strip__heading {
  margin: 0 0 var(--fr-space-1);
  font-family: var(--fr-font-serif);
  font-size: var(--fr-text-xl);
  color: var(--fr-color-heading);
}
.fr-share-strip__subtitle {
  margin: 0;
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}

.fr-share-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fr-space-4);
}

.fr-share-strip__qr {
  flex: 0 0 auto;
  display: inline-flex;
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-sm);
  padding: 4px;
  background: var(--fr-color-surface);
}
.fr-share-strip__qr img { display: block; width: 64px; height: 64px; }
.fr-share-strip__qr:hover { border-color: var(--fr-color-border-strong); }

.fr-share-strip__url {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fr-share-strip__url-label {
  font-size: var(--fr-text-xs);
  color: var(--fr-color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fr-weight-medium);
}
.fr-share-strip__url-input {
  font: inherit;
  font-size: var(--fr-text-sm);
  padding: var(--fr-space-2) var(--fr-space-3);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-sm);
  background: var(--fr-color-surface-sunken);
  color: var(--fr-color-ink);
  width: 100%;
  min-width: 0;
}

.fr-share-strip__actions,
.fr-share-strip__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-2);
}

@media (max-width: 720px) {
  .fr-share-strip__row { gap: var(--fr-space-3); }
  .fr-share-strip__url { flex: 1 0 100%; }
  .fr-share-strip__actions,
  .fr-share-strip__social { flex: 1 0 100%; }
}

/* ------------------------------------------------------------
   vanilla-cookieconsent v3 — brand theme override.
   The library exposes ~30 CSS variables under #cc-main; we remap
   only the ones that affect colour, type and surface to match the
   fr- tokens. Layout, spacing and animation defaults are kept.
   ------------------------------------------------------------ */
#cc-main {
  --cc-font-family: var(--fr-font-sans);

  /* Modal surfaces */
  --cc-bg: var(--fr-color-surface);
  --cc-primary-color: var(--fr-color-ink);
  --cc-secondary-color: var(--fr-color-ink-muted);
  --cc-link-color: var(--fr-color-primary);
  --cc-overlay-bg: rgba(26, 26, 26, 0.5);

  /* Primary CTA — Accept all */
  --cc-btn-primary-bg: var(--fr-color-primary);
  --cc-btn-primary-color: var(--fr-color-primary-on);
  --cc-btn-primary-border-color: var(--fr-color-primary);
  --cc-btn-primary-hover-bg: var(--fr-color-primary-hover);
  --cc-btn-primary-hover-color: var(--fr-color-primary-on);
  --cc-btn-primary-hover-border-color: var(--fr-color-primary-hover);

  /* Secondary CTA — Reject / Manage preferences */
  --cc-btn-secondary-bg: var(--fr-color-surface);
  --cc-btn-secondary-color: var(--fr-color-ink);
  --cc-btn-secondary-border-color: var(--fr-color-border-strong);
  --cc-btn-secondary-hover-bg: var(--fr-color-surface-sunken);
  --cc-btn-secondary-hover-color: var(--fr-color-ink);
  --cc-btn-secondary-hover-border-color: var(--fr-color-border-strong);

  /* Toggle switches — on = brand primary, off = muted */
  --cc-toggle-bg-on: var(--fr-color-primary);
  --cc-toggle-bg-off: var(--fr-color-border-strong);
  --cc-toggle-bg-readonly: var(--fr-color-border);
  --cc-toggle-knob-bg: var(--fr-color-surface);
  --cc-toggle-knob-icon-color: var(--fr-color-primary);

  /* Per-category cards in the preferences modal */
  --cc-cookie-category-block-bg: var(--fr-color-surface-sunken);
  --cc-cookie-category-block-border: var(--fr-color-border);
  --cc-cookie-category-block-hover-bg: var(--fr-color-bg-strong);
  --cc-cookie-category-block-bg-toggled: var(--fr-color-primary-soft);
  --cc-cookie-category-block-border-toggled: var(--fr-color-primary);

  /* Section dividers + cookie tables */
  --cc-section-border: var(--fr-color-border);
  --cc-cookie-table-border: var(--fr-color-border);

  /* Scrollbar */
  --cc-webkit-scrollbar-bg: var(--fr-color-border-strong);
  --cc-webkit-scrollbar-bg-hover: var(--fr-color-ink-muted);
}