/* Project styles on top of Bootstrap. No inline styles (CSP). */
.form-narrow { max-width: 32rem; }
.qr-code { width: 220px; height: 220px; background: #fff; padding: 8px; }
.backup-codes { font-family: var(--bs-font-monospace); font-size: 1.1rem; columns: 2; }
.form-text ul { padding-left: 1.2rem; margin-bottom: 0; }
.form-wide { max-width: 48rem; }
/* The logo is black on white: "multiply" makes the white background disappear
   on light backgrounds, so no white box shows around it. */
.brand-logo, .home-logo { mix-blend-mode: multiply; height: auto; }
.brand-logo { width: 69px; }
.home-logo { width: 246px; max-width: 60%; }

/* --- Cycling theme: green accent colour --------------------------------------
   Bootstrap compiles its button colours, so buttons are re-themed explicitly.
   #2d7a4f on white has a contrast ratio of 5.3:1 (WCAG AA). */
:root {
  --tandem-green: #2d7a4f;
  --tandem-green-dark: #22603d;
  --tandem-green-light: #e8f3ec;
  --bs-primary: #2d7a4f;
  --bs-primary-rgb: 45, 122, 79;
  --bs-link-color: #2d7a4f;
  --bs-link-color-rgb: 45, 122, 79;
  --bs-link-hover-color: #22603d;
  --bs-link-hover-color-rgb: 34, 96, 61;
}
.btn-primary {
  --bs-btn-bg: var(--tandem-green);
  --bs-btn-border-color: var(--tandem-green);
  --bs-btn-hover-bg: var(--tandem-green-dark);
  --bs-btn-hover-border-color: var(--tandem-green-dark);
  --bs-btn-active-bg: var(--tandem-green-dark);
  --bs-btn-active-border-color: var(--tandem-green-dark);
  --bs-btn-disabled-bg: var(--tandem-green);
  --bs-btn-disabled-border-color: var(--tandem-green);
  --bs-btn-focus-shadow-rgb: 45, 122, 79;
}
.btn-outline-primary {
  --bs-btn-color: var(--tandem-green);
  --bs-btn-border-color: var(--tandem-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tandem-green);
  --bs-btn-hover-border-color: var(--tandem-green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tandem-green-dark);
  --bs-btn-active-border-color: var(--tandem-green-dark);
  --bs-btn-focus-shadow-rgb: 45, 122, 79;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #8cc0a2;
  box-shadow: 0 0 0 .25rem rgba(45, 122, 79, .25);
}
.form-check-input:checked { background-color: var(--tandem-green); border-color: var(--tandem-green); }
.navbar { border-bottom: 3px solid var(--tandem-green) !important; }
.navbar-brand span { font-weight: 600; letter-spacing: .02em; }
.home-hero { background: var(--tandem-green-light); border-radius: var(--bs-border-radius-lg); }
.event-details { color: var(--tandem-green-dark); font-weight: 500; }
.participants { columns: 2; }
.audit-filter { max-width: 24rem; }
.audit-data { max-width: 28rem; word-break: break-word; }