/* GAMLS brand stylesheet -- color tokens, gamls-* utilities, ribbons, fs-7/-8.
   Documentation: https://members.gamls.com/branding

   Optional companion: branding-bs-overrides.css bends Bootstrap 5's stock
   chrome (.btn-primary, .alert-info, etc.) into the brand palette. Load it
   AFTER this file. Documentation: https://members.gamls.com/branding/bs-overrides */

:root {
	/* Each color family has 3 base shades (light/base/dark) plus a -pale step
	   (6% of -light mixed with white) for low-saturation surface tones.
	   --gamls-on-X-pale points to --gamls-on-body since pale surfaces are
	   near-white. Exception: --gamls-on-red-pale uses --gamls-red -- dismiss
	   and clear affordances on red-pale should read as red, not body color. */
	--gamls-blue-light: #0776AE;
	--gamls-on-blue-light: #FFFFFF;
	--gamls-blue: #055983;
	--gamls-on-blue: #FFFFFF;
	--gamls-blue-dark: #043C59;
	--gamls-on-blue-dark: #FFFFFF;
	--gamls-blue-pale: color-mix(in srgb, var(--gamls-blue-light) 6%, white);
	--gamls-on-blue-pale: var(--gamls-on-body);

	--gamls-gold-light: #D9BB7A;
	--gamls-on-gold-light: #171717;
	--gamls-gold: #C09F63;
	--gamls-on-gold: #171717;
	--gamls-gold-dark: #A08550;
	--gamls-on-gold-dark: #171717;
	--gamls-gold-pale: color-mix(in srgb, var(--gamls-gold-light) 6%, white);
	--gamls-on-gold-pale: var(--gamls-on-body);

	--gamls-gray-light: #BDBDBD;
	--gamls-on-gray-light: #171717;
	--gamls-gray: #757575;
	--gamls-on-gray: #FFFFFF;
	--gamls-gray-dark: #262626;
	--gamls-on-gray-dark: #FFFFFF;
	--gamls-gray-pale: color-mix(in srgb, var(--gamls-gray-light) 6%, white);
	--gamls-on-gray-pale: var(--gamls-on-body);

	--gamls-purple-light: #9A7BD4;
	--gamls-on-purple-light: #171717;
	--gamls-purple: #6F42C1;
	--gamls-on-purple: #FFFFFF;
	--gamls-purple-dark: #452978;
	--gamls-on-purple-dark: #FFFFFF;
	--gamls-purple-pale: color-mix(in srgb, var(--gamls-purple-light) 6%, white);
	--gamls-on-purple-pale: var(--gamls-on-body);

	--gamls-red-light: #C42424;
	--gamls-on-red-light: #FFFFFF;
	--gamls-red: #8F0808;
	--gamls-on-red: #FFFFFF;
	--gamls-red-dark: #590000;
	--gamls-on-red-dark: #FFFFFF;
	--gamls-red-pale: color-mix(in srgb, var(--gamls-red-light) 6%, white);
	--gamls-on-red-pale: var(--gamls-red);

	--gamls-green-light: #25822F;
	--gamls-on-green-light: #FFFFFF;
	--gamls-green: #1B5E20;
	--gamls-on-green: #FFFFFF;
	--gamls-green-dark: #154A19;
	--gamls-on-green-dark: #FFFFFF;
	--gamls-green-pale: color-mix(in srgb, var(--gamls-green-light) 6%, white);
	--gamls-on-green-pale: var(--gamls-on-body);

	--gamls-body: #FFFFFF;
	--gamls-on-body: #171717;

	/* Reserved for future WAVE testing. */
	--gamls-wave: #FFFFFF;
	--gamls-on-wave: #171717;
}

/* Font-size scale - extends BS5's .fs-1 through .fs-6 with two smaller steps for fine print and captions. Not native BS5. */
.fs-7 {
	font-size: 0.875rem;
}

.fs-8 {
	font-size: 0.69rem;
}

/* Shared focus halo for every gamls button (filled + outline). Brand gold at 25% alpha.
   Specificity (0,2,0) ties with each per-variant :focus-visible rule below; outline + box-shadow
   here compose with each variant's background/border/color rules because they touch disjoint properties. */
[class*="btn-gamls-"]:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(192, 159, 99, 0.25);
}

/* Buttons - filled. Each variant pair: base color at rest, one shade darker on hover/focus.
   Edge rungs clamp: dark hovers back to base (dark is the floor), pale hovers up to -light
   (one step up the saturation ladder, matching the established progression). */
.btn-gamls-blue-light {
	background-color: var(--gamls-blue-light);
	border-color: var(--gamls-blue-light);
	color: var(--gamls-on-blue-light);
}

.btn-gamls-blue-light:hover,
.btn-gamls-blue-light:focus-visible,
.btn-gamls-blue-light:active,
.btn-gamls-blue-light.active,
.btn-gamls-blue-light.dropdown-toggle.show {
	background-color: var(--gamls-blue);
	border-color: var(--gamls-blue);
	color: var(--gamls-on-blue);
}

.btn-gamls-blue {
	background-color: var(--gamls-blue);
	border-color: var(--gamls-blue);
	color: var(--gamls-on-blue);
}

.btn-gamls-blue:hover,
.btn-gamls-blue:focus-visible,
.btn-gamls-blue:active,
.btn-gamls-blue.active,
.btn-gamls-blue.dropdown-toggle.show {
	background-color: var(--gamls-blue-dark);
	border-color: var(--gamls-blue-dark);
	color: var(--gamls-on-blue-dark);
}

.btn-gamls-blue-dark {
	background-color: var(--gamls-blue-dark);
	border-color: var(--gamls-blue-dark);
	color: var(--gamls-on-blue-dark);
}

.btn-gamls-blue-dark:hover,
.btn-gamls-blue-dark:focus-visible,
.btn-gamls-blue-dark:active,
.btn-gamls-blue-dark.active,
.btn-gamls-blue-dark.dropdown-toggle.show {
	background-color: var(--gamls-blue);
	border-color: var(--gamls-blue);
	color: var(--gamls-on-blue);
}

.btn-gamls-blue-pale {
	background-color: var(--gamls-blue-pale);
	border-color: var(--gamls-blue-pale);
	color: var(--gamls-on-blue-pale);
}

.btn-gamls-blue-pale:hover,
.btn-gamls-blue-pale:focus-visible,
.btn-gamls-blue-pale:active,
.btn-gamls-blue-pale.active,
.btn-gamls-blue-pale.dropdown-toggle.show {
	background-color: var(--gamls-blue-light);
	border-color: var(--gamls-blue-light);
	color: var(--gamls-on-blue-light);
}

.btn-gamls-gold-light {
	background-color: var(--gamls-gold-light);
	border-color: var(--gamls-gold-light);
	color: var(--gamls-on-gold-light);
}

.btn-gamls-gold-light:hover,
.btn-gamls-gold-light:focus-visible,
.btn-gamls-gold-light:active,
.btn-gamls-gold-light.active,
.btn-gamls-gold-light.dropdown-toggle.show {
	background-color: var(--gamls-gold);
	border-color: var(--gamls-gold);
	color: var(--gamls-on-gold);
}

.btn-gamls-gold {
	background-color: var(--gamls-gold);
	border-color: var(--gamls-gold);
	color: var(--gamls-on-gold);
}

.btn-gamls-gold:hover,
.btn-gamls-gold:focus-visible,
.btn-gamls-gold:active,
.btn-gamls-gold.active,
.btn-gamls-gold.dropdown-toggle.show {
	background-color: var(--gamls-gold-dark);
	border-color: var(--gamls-gold-dark);
	color: var(--gamls-on-gold-dark);
}

.btn-gamls-gold-dark {
	background-color: var(--gamls-gold-dark);
	border-color: var(--gamls-gold-dark);
	color: var(--gamls-on-gold-dark);
}

.btn-gamls-gold-dark:hover,
.btn-gamls-gold-dark:focus-visible,
.btn-gamls-gold-dark:active,
.btn-gamls-gold-dark.active,
.btn-gamls-gold-dark.dropdown-toggle.show {
	background-color: var(--gamls-gold);
	border-color: var(--gamls-gold);
	color: var(--gamls-on-gold);
}

.btn-gamls-gold-pale {
	background-color: var(--gamls-gold-pale);
	border-color: var(--gamls-gold-pale);
	color: var(--gamls-on-gold-pale);
}

.btn-gamls-gold-pale:hover,
.btn-gamls-gold-pale:focus-visible,
.btn-gamls-gold-pale:active,
.btn-gamls-gold-pale.active,
.btn-gamls-gold-pale.dropdown-toggle.show {
	background-color: var(--gamls-gold-light);
	border-color: var(--gamls-gold-light);
	color: var(--gamls-on-gold-light);
}

.btn-gamls-gray-light {
	background-color: var(--gamls-gray-light);
	border-color: var(--gamls-gray-light);
	color: var(--gamls-on-gray-light);
}

.btn-gamls-gray-light:hover,
.btn-gamls-gray-light:focus-visible,
.btn-gamls-gray-light:active,
.btn-gamls-gray-light.active,
.btn-gamls-gray-light.dropdown-toggle.show {
	background-color: var(--gamls-gray);
	border-color: var(--gamls-gray);
	color: var(--gamls-on-gray);
}

.btn-gamls-gray {
	background-color: var(--gamls-gray);
	border-color: var(--gamls-gray);
	color: var(--gamls-on-gray);
}

.btn-gamls-gray:hover,
.btn-gamls-gray:focus-visible,
.btn-gamls-gray:active,
.btn-gamls-gray.active,
.btn-gamls-gray.dropdown-toggle.show {
	background-color: var(--gamls-gray-dark);
	border-color: var(--gamls-gray-dark);
	color: var(--gamls-on-gray-dark);
}

.btn-gamls-gray-dark {
	background-color: var(--gamls-gray-dark);
	border-color: var(--gamls-gray-dark);
	color: var(--gamls-on-gray-dark);
}

.btn-gamls-gray-dark:hover,
.btn-gamls-gray-dark:focus-visible,
.btn-gamls-gray-dark:active,
.btn-gamls-gray-dark.active,
.btn-gamls-gray-dark.dropdown-toggle.show {
	background-color: var(--gamls-gray);
	border-color: var(--gamls-gray);
	color: var(--gamls-on-gray);
}

.btn-gamls-gray-pale {
	background-color: var(--gamls-gray-pale);
	border-color: var(--gamls-gray-pale);
	color: var(--gamls-on-gray-pale);
}

.btn-gamls-gray-pale:hover,
.btn-gamls-gray-pale:focus-visible,
.btn-gamls-gray-pale:active,
.btn-gamls-gray-pale.active,
.btn-gamls-gray-pale.dropdown-toggle.show {
	background-color: var(--gamls-gray-light);
	border-color: var(--gamls-gray-light);
	color: var(--gamls-on-gray-light);
}

.btn-gamls-purple-light {
	background-color: var(--gamls-purple-light);
	border-color: var(--gamls-purple-light);
	color: var(--gamls-on-purple-light);
}

.btn-gamls-purple-light:hover,
.btn-gamls-purple-light:focus-visible,
.btn-gamls-purple-light:active,
.btn-gamls-purple-light.active,
.btn-gamls-purple-light.dropdown-toggle.show {
	background-color: var(--gamls-purple);
	border-color: var(--gamls-purple);
	color: var(--gamls-on-purple);
}

.btn-gamls-purple {
	background-color: var(--gamls-purple);
	border-color: var(--gamls-purple);
	color: var(--gamls-on-purple);
}

.btn-gamls-purple:hover,
.btn-gamls-purple:focus-visible,
.btn-gamls-purple:active,
.btn-gamls-purple.active,
.btn-gamls-purple.dropdown-toggle.show {
	background-color: var(--gamls-purple-dark);
	border-color: var(--gamls-purple-dark);
	color: var(--gamls-on-purple-dark);
}

.btn-gamls-purple-dark {
	background-color: var(--gamls-purple-dark);
	border-color: var(--gamls-purple-dark);
	color: var(--gamls-on-purple-dark);
}

.btn-gamls-purple-dark:hover,
.btn-gamls-purple-dark:focus-visible,
.btn-gamls-purple-dark:active,
.btn-gamls-purple-dark.active,
.btn-gamls-purple-dark.dropdown-toggle.show {
	background-color: var(--gamls-purple);
	border-color: var(--gamls-purple);
	color: var(--gamls-on-purple);
}

.btn-gamls-purple-pale {
	background-color: var(--gamls-purple-pale);
	border-color: var(--gamls-purple-pale);
	color: var(--gamls-on-purple-pale);
}

.btn-gamls-purple-pale:hover,
.btn-gamls-purple-pale:focus-visible,
.btn-gamls-purple-pale:active,
.btn-gamls-purple-pale.active,
.btn-gamls-purple-pale.dropdown-toggle.show {
	background-color: var(--gamls-purple-light);
	border-color: var(--gamls-purple-light);
	color: var(--gamls-on-purple-light);
}

.btn-gamls-red-light {
	background-color: var(--gamls-red-light);
	border-color: var(--gamls-red-light);
	color: var(--gamls-on-red-light);
}

.btn-gamls-red-light:hover,
.btn-gamls-red-light:focus-visible,
.btn-gamls-red-light:active,
.btn-gamls-red-light.active,
.btn-gamls-red-light.dropdown-toggle.show {
	background-color: var(--gamls-red);
	border-color: var(--gamls-red);
	color: var(--gamls-on-red);
}

.btn-gamls-red {
	background-color: var(--gamls-red);
	border-color: var(--gamls-red);
	color: var(--gamls-on-red);
}

.btn-gamls-red:hover,
.btn-gamls-red:focus-visible,
.btn-gamls-red:active,
.btn-gamls-red.active,
.btn-gamls-red.dropdown-toggle.show {
	background-color: var(--gamls-red-dark);
	border-color: var(--gamls-red-dark);
	color: var(--gamls-on-red-dark);
}

.btn-gamls-red-dark {
	background-color: var(--gamls-red-dark);
	border-color: var(--gamls-red-dark);
	color: var(--gamls-on-red-dark);
}

.btn-gamls-red-dark:hover,
.btn-gamls-red-dark:focus-visible,
.btn-gamls-red-dark:active,
.btn-gamls-red-dark.active,
.btn-gamls-red-dark.dropdown-toggle.show {
	background-color: var(--gamls-red);
	border-color: var(--gamls-red);
	color: var(--gamls-on-red);
}

.btn-gamls-red-pale {
	background-color: var(--gamls-red-pale);
	border-color: var(--gamls-red-pale);
	color: var(--gamls-on-red-pale);
}

.btn-gamls-red-pale:hover,
.btn-gamls-red-pale:focus-visible,
.btn-gamls-red-pale:active,
.btn-gamls-red-pale.active,
.btn-gamls-red-pale.dropdown-toggle.show {
	background-color: var(--gamls-red-light);
	border-color: var(--gamls-red-light);
	color: var(--gamls-on-red-light);
}

.btn-gamls-green-light {
	background-color: var(--gamls-green-light);
	border-color: var(--gamls-green-light);
	color: var(--gamls-on-green-light);
}

.btn-gamls-green-light:hover,
.btn-gamls-green-light:focus-visible,
.btn-gamls-green-light:active,
.btn-gamls-green-light.active,
.btn-gamls-green-light.dropdown-toggle.show {
	background-color: var(--gamls-green);
	border-color: var(--gamls-green);
	color: var(--gamls-on-green);
}

.btn-gamls-green {
	background-color: var(--gamls-green);
	border-color: var(--gamls-green);
	color: var(--gamls-on-green);
}

.btn-gamls-green:hover,
.btn-gamls-green:focus-visible,
.btn-gamls-green:active,
.btn-gamls-green.active,
.btn-gamls-green.dropdown-toggle.show {
	background-color: var(--gamls-green-dark);
	border-color: var(--gamls-green-dark);
	color: var(--gamls-on-green-dark);
}

.btn-gamls-green-dark {
	background-color: var(--gamls-green-dark);
	border-color: var(--gamls-green-dark);
	color: var(--gamls-on-green-dark);
}

.btn-gamls-green-dark:hover,
.btn-gamls-green-dark:focus-visible,
.btn-gamls-green-dark:active,
.btn-gamls-green-dark.active,
.btn-gamls-green-dark.dropdown-toggle.show {
	background-color: var(--gamls-green);
	border-color: var(--gamls-green);
	color: var(--gamls-on-green);
}

.btn-gamls-green-pale {
	background-color: var(--gamls-green-pale);
	border-color: var(--gamls-green-pale);
	color: var(--gamls-on-green-pale);
}

.btn-gamls-green-pale:hover,
.btn-gamls-green-pale:focus-visible,
.btn-gamls-green-pale:active,
.btn-gamls-green-pale.active,
.btn-gamls-green-pale.dropdown-toggle.show {
	background-color: var(--gamls-green-light);
	border-color: var(--gamls-green-light);
	color: var(--gamls-on-green-light);
}

/* Buttons - outline. Transparent bg, colored border. Rest-state text matches the border
   color (per BS5 convention), except where the border fails WCAG AA contrast on white:
   the gold family (all three), gray-light, gray, and purple-light fall back to
   --gamls-on-body for legibility. Hover/focus fills with the variant color + matching
   --gamls-on-X text across all variants. */
.btn-outline-gamls-blue-light {
	background-color: transparent;
	border-color: var(--gamls-blue-light);
	color: var(--gamls-blue-light);
}

.btn-outline-gamls-blue-light:hover,
.btn-outline-gamls-blue-light:focus-visible,
.btn-outline-gamls-blue-light:active,
.btn-outline-gamls-blue-light.active,
.btn-outline-gamls-blue-light.dropdown-toggle.show {
	background-color: var(--gamls-blue-light);
	border-color: var(--gamls-blue-light);
	color: var(--gamls-on-blue-light);
}

.btn-outline-gamls-blue {
	background-color: transparent;
	border-color: var(--gamls-blue);
	color: var(--gamls-blue);
}

.btn-outline-gamls-blue:hover,
.btn-outline-gamls-blue:focus-visible,
.btn-outline-gamls-blue:active,
.btn-outline-gamls-blue.active,
.btn-outline-gamls-blue.dropdown-toggle.show {
	background-color: var(--gamls-blue);
	border-color: var(--gamls-blue);
	color: var(--gamls-on-blue);
}

.btn-outline-gamls-blue-dark {
	background-color: transparent;
	border-color: var(--gamls-blue-dark);
	color: var(--gamls-blue-dark);
}

.btn-outline-gamls-blue-dark:hover,
.btn-outline-gamls-blue-dark:focus-visible,
.btn-outline-gamls-blue-dark:active,
.btn-outline-gamls-blue-dark.active,
.btn-outline-gamls-blue-dark.dropdown-toggle.show {
	background-color: var(--gamls-blue-dark);
	border-color: var(--gamls-blue-dark);
	color: var(--gamls-on-blue-dark);
}

.btn-outline-gamls-gold-light {
	background-color: transparent;
	border-color: var(--gamls-gold-light);
	color: var(--gamls-on-body);
}

.btn-outline-gamls-gold-light:hover,
.btn-outline-gamls-gold-light:focus-visible,
.btn-outline-gamls-gold-light:active,
.btn-outline-gamls-gold-light.active,
.btn-outline-gamls-gold-light.dropdown-toggle.show {
	background-color: var(--gamls-gold-light);
	border-color: var(--gamls-gold-light);
	color: var(--gamls-on-gold-light);
}

.btn-outline-gamls-gold {
	background-color: transparent;
	border-color: var(--gamls-gold);
	color: var(--gamls-on-body);
}

.btn-outline-gamls-gold:hover,
.btn-outline-gamls-gold:focus-visible,
.btn-outline-gamls-gold:active,
.btn-outline-gamls-gold.active,
.btn-outline-gamls-gold.dropdown-toggle.show {
	background-color: var(--gamls-gold);
	border-color: var(--gamls-gold);
	color: var(--gamls-on-gold);
}

.btn-outline-gamls-gold-dark {
	background-color: transparent;
	border-color: var(--gamls-gold-dark);
	color: var(--gamls-on-body);
}

.btn-outline-gamls-gold-dark:hover,
.btn-outline-gamls-gold-dark:focus-visible,
.btn-outline-gamls-gold-dark:active,
.btn-outline-gamls-gold-dark.active,
.btn-outline-gamls-gold-dark.dropdown-toggle.show {
	background-color: var(--gamls-gold-dark);
	border-color: var(--gamls-gold-dark);
	color: var(--gamls-on-gold-dark);
}

.btn-outline-gamls-gray-light {
	background-color: transparent;
	border-color: var(--gamls-gray-light);
	color: var(--gamls-on-body);
}

.btn-outline-gamls-gray-light:hover,
.btn-outline-gamls-gray-light:focus-visible,
.btn-outline-gamls-gray-light:active,
.btn-outline-gamls-gray-light.active,
.btn-outline-gamls-gray-light.dropdown-toggle.show {
	background-color: var(--gamls-gray-light);
	border-color: var(--gamls-gray-light);
	color: var(--gamls-on-gray-light);
}

.btn-outline-gamls-gray {
	background-color: transparent;
	border-color: var(--gamls-gray);
	color: var(--gamls-on-body);
}

.btn-outline-gamls-gray:hover,
.btn-outline-gamls-gray:focus-visible,
.btn-outline-gamls-gray:active,
.btn-outline-gamls-gray.active,
.btn-outline-gamls-gray.dropdown-toggle.show {
	background-color: var(--gamls-gray);
	border-color: var(--gamls-gray);
	color: var(--gamls-on-gray);
}

.btn-outline-gamls-gray-dark {
	background-color: transparent;
	border-color: var(--gamls-gray-dark);
	color: var(--gamls-gray-dark);
}

.btn-outline-gamls-gray-dark:hover,
.btn-outline-gamls-gray-dark:focus-visible,
.btn-outline-gamls-gray-dark:active,
.btn-outline-gamls-gray-dark.active,
.btn-outline-gamls-gray-dark.dropdown-toggle.show {
	background-color: var(--gamls-gray-dark);
	border-color: var(--gamls-gray-dark);
	color: var(--gamls-on-gray-dark);
}

.btn-outline-gamls-purple-light {
	background-color: transparent;
	border-color: var(--gamls-purple-light);
	color: var(--gamls-on-body);
}

.btn-outline-gamls-purple-light:hover,
.btn-outline-gamls-purple-light:focus-visible,
.btn-outline-gamls-purple-light:active,
.btn-outline-gamls-purple-light.active,
.btn-outline-gamls-purple-light.dropdown-toggle.show {
	background-color: var(--gamls-purple-light);
	border-color: var(--gamls-purple-light);
	color: var(--gamls-on-purple-light);
}

.btn-outline-gamls-purple {
	background-color: transparent;
	border-color: var(--gamls-purple);
	color: var(--gamls-purple);
}

.btn-outline-gamls-purple:hover,
.btn-outline-gamls-purple:focus-visible,
.btn-outline-gamls-purple:active,
.btn-outline-gamls-purple.active,
.btn-outline-gamls-purple.dropdown-toggle.show {
	background-color: var(--gamls-purple);
	border-color: var(--gamls-purple);
	color: var(--gamls-on-purple);
}

.btn-outline-gamls-purple-dark {
	background-color: transparent;
	border-color: var(--gamls-purple-dark);
	color: var(--gamls-purple-dark);
}

.btn-outline-gamls-purple-dark:hover,
.btn-outline-gamls-purple-dark:focus-visible,
.btn-outline-gamls-purple-dark:active,
.btn-outline-gamls-purple-dark.active,
.btn-outline-gamls-purple-dark.dropdown-toggle.show {
	background-color: var(--gamls-purple-dark);
	border-color: var(--gamls-purple-dark);
	color: var(--gamls-on-purple-dark);
}

.btn-outline-gamls-red-light {
	background-color: transparent;
	border-color: var(--gamls-red-light);
	color: var(--gamls-red-light);
}

.btn-outline-gamls-red-light:hover,
.btn-outline-gamls-red-light:focus-visible,
.btn-outline-gamls-red-light:active,
.btn-outline-gamls-red-light.active,
.btn-outline-gamls-red-light.dropdown-toggle.show {
	background-color: var(--gamls-red-light);
	border-color: var(--gamls-red-light);
	color: var(--gamls-on-red-light);
}

.btn-outline-gamls-red {
	background-color: transparent;
	border-color: var(--gamls-red);
	color: var(--gamls-red);
}

.btn-outline-gamls-red:hover,
.btn-outline-gamls-red:focus-visible,
.btn-outline-gamls-red:active,
.btn-outline-gamls-red.active,
.btn-outline-gamls-red.dropdown-toggle.show {
	background-color: var(--gamls-red);
	border-color: var(--gamls-red);
	color: var(--gamls-on-red);
}

.btn-outline-gamls-red-dark {
	background-color: transparent;
	border-color: var(--gamls-red-dark);
	color: var(--gamls-red-dark);
}

.btn-outline-gamls-red-dark:hover,
.btn-outline-gamls-red-dark:focus-visible,
.btn-outline-gamls-red-dark:active,
.btn-outline-gamls-red-dark.active,
.btn-outline-gamls-red-dark.dropdown-toggle.show {
	background-color: var(--gamls-red-dark);
	border-color: var(--gamls-red-dark);
	color: var(--gamls-on-red-dark);
}

.btn-outline-gamls-green-light {
	background-color: transparent;
	border-color: var(--gamls-green-light);
	color: var(--gamls-green-light);
}

.btn-outline-gamls-green-light:hover,
.btn-outline-gamls-green-light:focus-visible,
.btn-outline-gamls-green-light:active,
.btn-outline-gamls-green-light.active,
.btn-outline-gamls-green-light.dropdown-toggle.show {
	background-color: var(--gamls-green-light);
	border-color: var(--gamls-green-light);
	color: var(--gamls-on-green-light);
}

.btn-outline-gamls-green {
	background-color: transparent;
	border-color: var(--gamls-green);
	color: var(--gamls-green);
}

.btn-outline-gamls-green:hover,
.btn-outline-gamls-green:focus-visible,
.btn-outline-gamls-green:active,
.btn-outline-gamls-green.active,
.btn-outline-gamls-green.dropdown-toggle.show {
	background-color: var(--gamls-green);
	border-color: var(--gamls-green);
	color: var(--gamls-on-green);
}

.btn-outline-gamls-green-dark {
	background-color: transparent;
	border-color: var(--gamls-green-dark);
	color: var(--gamls-green-dark);
}

.btn-outline-gamls-green-dark:hover,
.btn-outline-gamls-green-dark:focus-visible,
.btn-outline-gamls-green-dark:active,
.btn-outline-gamls-green-dark.active,
.btn-outline-gamls-green-dark.dropdown-toggle.show {
	background-color: var(--gamls-green-dark);
	border-color: var(--gamls-green-dark);
	color: var(--gamls-on-green-dark);
}

/* List group branded active state. Compound selector (.list-group.list-group-gamls-X)
   gives specificity (0,2,0) -- needed to beat branding-bs-overrides.css's bare .list-group
   rule (0,1,0) which loads after this file. Apply alongside .list-group, e.g.
   <ul class="list-group list-group-gamls-blue">. */
.list-group.list-group-gamls-blue {
	--bs-list-group-active-bg: var(--gamls-blue);
	--bs-list-group-active-border-color: var(--gamls-blue);
	--bs-list-group-active-color: var(--gamls-on-blue);
}

.list-group.list-group-gamls-gold {
	--bs-list-group-active-bg: var(--gamls-gold);
	--bs-list-group-active-border-color: var(--gamls-gold);
	--bs-list-group-active-color: var(--gamls-on-gold);
}

/* Nav pills branded active state. Compound selector (.nav-pills.nav-pills-gamls-X) gives
   specificity (0,2,0) -- needed to beat branding-bs-overrides.css's bare .nav-pills rule
   (0,1,0). Apply alongside .nav .nav-pills, e.g. <ul class="nav nav-pills nav-pills-gamls-gold">. */
.nav-pills.nav-pills-gamls-blue {
	--bs-nav-pills-link-active-bg: var(--gamls-blue);
	--bs-nav-pills-link-active-color: var(--gamls-on-blue);
}

.nav-pills.nav-pills-gamls-gold {
	--bs-nav-pills-link-active-bg: var(--gamls-gold);
	--bs-nav-pills-link-active-color: var(--gamls-on-gold);
}

/* Table row contextual variants. Modifier classes applied on <tr>, mirroring BS5's
   .table-info/.table-warning pattern. BS5 paints cell backgrounds via
   .table > :not(caption) > * > * so .bg-gamls-* utilities won't work on <tr> -- these
   variants redefine --bs-table-bg/-color/-border-color so cells pick up the brand color.
   bg/color/border only; striped/active/hover fall back to table defaults. */
.table-gamls-blue-pale {
	--bs-table-color: var(--gamls-on-blue-pale);
	--bs-table-bg: var(--gamls-blue-pale);
	--bs-table-border-color: var(--gamls-blue-light);
	color: var(--bs-table-color);
	border-color: var(--bs-table-border-color);
}

/* Background utilities. !important to override BS5's bg-* utilities. Each rule also sets
   the matching --gamls-on-* foreground for any text inside. */
.bg-gamls-blue {
	background-color: var(--gamls-blue) !important;
	color: var(--gamls-on-blue);
}

.bg-gamls-blue-light {
	background-color: var(--gamls-blue-light) !important;
	color: var(--gamls-on-blue-light);
}

.bg-gamls-blue-dark {
	background-color: var(--gamls-blue-dark) !important;
	color: var(--gamls-on-blue-dark);
}

.bg-gamls-blue-pale {
	background-color: var(--gamls-blue-pale) !important;
	color: var(--gamls-on-blue-pale);
}

.bg-gamls-gold-light {
	background-color: var(--gamls-gold-light) !important;
	color: var(--gamls-on-gold-light);
}

.bg-gamls-gold {
	background-color: var(--gamls-gold) !important;
	color: var(--gamls-on-gold);
}

.bg-gamls-gold-dark {
	background-color: var(--gamls-gold-dark) !important;
	color: var(--gamls-on-gold-dark);
}

.bg-gamls-gold-pale {
	background-color: var(--gamls-gold-pale) !important;
	color: var(--gamls-on-gold-pale);
}

.bg-gamls-gray-light {
	background-color: var(--gamls-gray-light) !important;
	color: var(--gamls-on-gray-light);
}

.bg-gamls-gray {
	background-color: var(--gamls-gray) !important;
	color: var(--gamls-on-gray);
}

.bg-gamls-gray-dark {
	background-color: var(--gamls-gray-dark) !important;
	color: var(--gamls-on-gray-dark);
}

.bg-gamls-gray-pale {
	background-color: var(--gamls-gray-pale) !important;
	color: var(--gamls-on-gray-pale);
}

.bg-gamls-purple-light {
	background-color: var(--gamls-purple-light) !important;
	color: var(--gamls-on-purple-light);
}

.bg-gamls-purple {
	background-color: var(--gamls-purple) !important;
	color: var(--gamls-on-purple);
}

.bg-gamls-purple-dark {
	background-color: var(--gamls-purple-dark) !important;
	color: var(--gamls-on-purple-dark);
}

.bg-gamls-purple-pale {
	background-color: var(--gamls-purple-pale) !important;
	color: var(--gamls-on-purple-pale);
}

.bg-gamls-red-light {
	background-color: var(--gamls-red-light) !important;
	color: var(--gamls-on-red-light);
}

.bg-gamls-red {
	background-color: var(--gamls-red) !important;
	color: var(--gamls-on-red);
}

.bg-gamls-red-dark {
	background-color: var(--gamls-red-dark) !important;
	color: var(--gamls-on-red-dark);
}

.bg-gamls-red-pale {
	background-color: var(--gamls-red-pale) !important;
	color: var(--gamls-on-red-pale);
}

.bg-gamls-green-light {
	background-color: var(--gamls-green-light) !important;
	color: var(--gamls-on-green-light);
}

.bg-gamls-green {
	background-color: var(--gamls-green) !important;
	color: var(--gamls-on-green);
}

.bg-gamls-green-dark {
	background-color: var(--gamls-green-dark) !important;
	color: var(--gamls-on-green-dark);
}

.bg-gamls-green-pale {
	background-color: var(--gamls-green-pale) !important;
	color: var(--gamls-on-green-pale);
}

/* Cell paint-through for a bg-gamls-* class on <thead>. BS5 paints every cell via
   .table > :not(caption) > * > * (specificity 0,1,2), which would otherwise mask
   the thead's brand color. Clearing bg + color here lets the parent's bg-gamls show. */
thead[class*="bg-gamls-"]>tr>th {
	background-color: transparent;
	color: inherit;
}

/* Link overrides for colored bg-gamls surfaces -- body links only, buttons own their own color */
[class*="bg-gamls-"] a:not(.btn) {
	color: inherit;
	font-weight: 600;
}

[class*="bg-gamls-"] a:not(.btn):hover,
[class*="bg-gamls-"] a:not(.btn):focus-visible {
	text-decoration-thickness: 2px;
}

/* Heading overrides for colored bg-gamls surfaces. Counter to custom.css's project-wide
   "all h1-h6 = --gamls-blue" rule, which would otherwise paint blue headings on a blue
   (or any colored) bg. Specificity (0,1,1) beats custom.css's bare h5 (0,0,1) and .h5
   (0,1,0), so headings inside a bg-gamls surface inherit the matching on-color. */
[class*="bg-gamls-"] h1,
[class*="bg-gamls-"] h2,
[class*="bg-gamls-"] h3,
[class*="bg-gamls-"] h4,
[class*="bg-gamls-"] h5,
[class*="bg-gamls-"] h6,
[class*="bg-gamls-"] .h1,
[class*="bg-gamls-"] .h2,
[class*="bg-gamls-"] .h3,
[class*="bg-gamls-"] .h4,
[class*="bg-gamls-"] .h5,
[class*="bg-gamls-"] .h6 {
	color: inherit;
}

/* Navbar is chrome, not content -- links keep BS5 navbar typography.
   :not(.btn) ties specificity with the brand bold-link rule (0,0,2,1) so cascade
   order wins. Single selector covers all three navbar shapes: standalone,
   nested in a bg-gamls ancestor, and navbar with its own bg-gamls class. */
.navbar a:not(.btn) {
	font-weight: inherit;
}

/* Text color utilities. !important to override BS5 contextual text colors. */
.text-gamls-blue {
	color: var(--gamls-blue) !important;
}

.text-gamls-blue-light {
	color: var(--gamls-blue-light) !important;
}

.text-gamls-blue-dark {
	color: var(--gamls-blue-dark) !important;
}

.text-gamls-gold-light {
	color: var(--gamls-gold-light) !important;
}

.text-gamls-gold {
	color: var(--gamls-gold) !important;
}

.text-gamls-gold-dark {
	color: var(--gamls-gold-dark) !important;
}

.text-gamls-gray-light {
	color: var(--gamls-gray-light) !important;
}

.text-gamls-gray {
	color: var(--gamls-gray) !important;
}

.text-gamls-gray-dark {
	color: var(--gamls-gray-dark) !important;
}

.text-gamls-purple-light {
	color: var(--gamls-purple-light) !important;
}

.text-gamls-purple {
	color: var(--gamls-purple) !important;
}

.text-gamls-purple-dark {
	color: var(--gamls-purple-dark) !important;
}

.text-gamls-red-light {
	color: var(--gamls-red-light) !important;
}

.text-gamls-red {
	color: var(--gamls-red) !important;
}

.text-gamls-red-dark {
	color: var(--gamls-red-dark) !important;
}

.text-gamls-green-light {
	color: var(--gamls-green-light) !important;
}

.text-gamls-green {
	color: var(--gamls-green) !important;
}

.text-gamls-green-dark {
	color: var(--gamls-green-dark) !important;
}

/* Border color utilities. !important to override BS5 border-color tokens. Pair with
   BS5 .border / .border-* width classes. */
.border-gamls-blue {
	border-color: var(--gamls-blue) !important;
}

.border-gamls-blue-light {
	border-color: var(--gamls-blue-light) !important;
}

.border-gamls-blue-dark {
	border-color: var(--gamls-blue-dark) !important;
}

.border-gamls-gold-light {
	border-color: var(--gamls-gold-light) !important;
}

.border-gamls-gold {
	border-color: var(--gamls-gold) !important;
}

.border-gamls-gold-dark {
	border-color: var(--gamls-gold-dark) !important;
}

.border-gamls-gray-light {
	border-color: var(--gamls-gray-light) !important;
}

.border-gamls-gray {
	border-color: var(--gamls-gray) !important;
}

.border-gamls-gray-dark {
	border-color: var(--gamls-gray-dark) !important;
}

.border-gamls-purple-light {
	border-color: var(--gamls-purple-light) !important;
}

.border-gamls-purple {
	border-color: var(--gamls-purple) !important;
}

.border-gamls-purple-dark {
	border-color: var(--gamls-purple-dark) !important;
}

.border-gamls-red-light {
	border-color: var(--gamls-red-light) !important;
}

.border-gamls-red {
	border-color: var(--gamls-red) !important;
}

.border-gamls-red-dark {
	border-color: var(--gamls-red-dark) !important;
}

.border-gamls-green-light {
	border-color: var(--gamls-green-light) !important;
}

.border-gamls-green {
	border-color: var(--gamls-green) !important;
}

.border-gamls-green-dark {
	border-color: var(--gamls-green-dark) !important;
}

/* Border style utilities. BS5 ships width/color but not style; these fill the gap. */
.border-dashed {
	border-style: dashed;
}

.border-dotted {
	border-style: dotted;
}

/* Ribbon - corner banner wrapper.
   Default = gray; variants for gold, green, red, blue, purple, and a darker gray.
   Place .ribbon on a position-relative container; the visible band lives in
   .ribbon span. The ::before / ::after pseudo-elements draw the triangle folds.
   Pattern per variant:
     - Gradient: var(--gamls-X-light) -> var(--gamls-X)
     - Fold right/left edge: color-mix(in srgb, var(--gamls-X) 70%, black)
     - Fold top edge: color-mix(in srgb, var(--gamls-X) 50%, black) */

/* Ribbon container - top LEFT */
.ribbon {
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: 1;
	overflow: hidden;
	width: 75px;
	height: 75px;
	text-align: left;
}

/* Ribbon strip - DEFAULT (gray gradient) */
.ribbon span {
	font-size: 10px;
	color: var(--gamls-on-gray);
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	line-height: 20px;
	letter-spacing: .1em;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	width: 100px;
	display: block;
	background: linear-gradient(var(--gamls-gray-light) 0%, var(--gamls-gray) 100%);
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
	position: absolute;
	top: 19px;
	left: -21px;
}

/* Triangle folds - DEFAULT (gray) */
.ribbon span::before {
	content: '';
	position: absolute;
	right: 0;
	top: 100%;
	z-index: -1;
	border-right: 3px solid color-mix(in srgb, var(--gamls-gray) 70%, black);
	border-left: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid color-mix(in srgb, var(--gamls-gray) 50%, black);
}

.ribbon span::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	z-index: -1;
	border-left: 3px solid color-mix(in srgb, var(--gamls-gray) 70%, black);
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid color-mix(in srgb, var(--gamls-gray) 50%, black);
}

/* Gray dark variant */
.ribbon-gray-dark span {
	background: linear-gradient(var(--gamls-gray) 0%, var(--gamls-gray-dark) 100%);
	color: var(--gamls-on-gray-dark);
}

.ribbon-gray-dark span::before {
	border-right-color: color-mix(in srgb, var(--gamls-gray-dark) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-gray-dark) 50%, black);
}

.ribbon-gray-dark span::after {
	border-left-color: color-mix(in srgb, var(--gamls-gray-dark) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-gray-dark) 50%, black);
}

/* Gold variant */
.ribbon-gold span {
	background: linear-gradient(var(--gamls-gold-light) 0%, var(--gamls-gold) 100%);
	color: var(--gamls-on-gold);
}

.ribbon-gold span::before {
	border-right-color: color-mix(in srgb, var(--gamls-gold) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-gold) 50%, black);
}

.ribbon-gold span::after {
	border-left-color: color-mix(in srgb, var(--gamls-gold) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-gold) 50%, black);
}

/* Green variant */
.ribbon-green span {
	background: linear-gradient(var(--gamls-green-light) 0%, var(--gamls-green) 100%);
	color: var(--gamls-on-green);
}

.ribbon-green span::before {
	border-right-color: color-mix(in srgb, var(--gamls-green) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-green) 50%, black);
}

.ribbon-green span::after {
	border-left-color: color-mix(in srgb, var(--gamls-green) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-green) 50%, black);
}

/* Red variant */
.ribbon-red span {
	background: linear-gradient(var(--gamls-red-light) 0%, var(--gamls-red) 100%);
	color: var(--gamls-on-red);
}

.ribbon-red span::before {
	border-right-color: color-mix(in srgb, var(--gamls-red) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-red) 50%, black);
}

.ribbon-red span::after {
	border-left-color: color-mix(in srgb, var(--gamls-red) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-red) 50%, black);
}

/* Blue variant */
.ribbon-blue span {
	background: linear-gradient(var(--gamls-blue-light) 0%, var(--gamls-blue) 100%);
	color: var(--gamls-on-blue);
}

.ribbon-blue span::before {
	border-right-color: color-mix(in srgb, var(--gamls-blue) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-blue) 50%, black);
}

.ribbon-blue span::after {
	border-left-color: color-mix(in srgb, var(--gamls-blue) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-blue) 50%, black);
}

/* Purple variant */
.ribbon-purple span {
	background: linear-gradient(var(--gamls-purple-light) 0%, var(--gamls-purple) 100%);
	color: var(--gamls-on-purple);
}

.ribbon-purple span::before {
	border-right-color: color-mix(in srgb, var(--gamls-purple) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-purple) 50%, black);
}

.ribbon-purple span::after {
	border-left-color: color-mix(in srgb, var(--gamls-purple) 70%, black);
	border-top-color: color-mix(in srgb, var(--gamls-purple) 50%, black);
}

/* Misc utilities. */
.cursor-pointer {
	cursor: pointer;
}

/* Print preview width - constrains a "this is what the print will look like" view to
   ~8.5in equivalent on screen. Inert when actually printing. */
@media screen {
	.printview {
		width: 900px;
	}
}

/* Print-only utilities. Mirror BS5's d-print-* pattern (BS5 ships display-only print
   variants; these fill the gap for border / shadow / background / column width).
   Each utility is opt-in per element so no global blast radius -- apply only where
   a printed surface should differ from its screen presentation.
     - .border-print-0          true border removal; box shrinks by border-width
     - .border-print-transparent layout-preserving invisibility; box dimensions hold
     - .shadow-print-none       drop shadow on print (shadow is paint-only, no shift)
     - .bg-print-transparent    transparent bg on print (paint-only, no shift)
     - .col-print-12            promote a BS5 col to full row width in print; pair
                                with d-print-none on a sibling col when the screen
                                layout is multi-column but the print should be solo */
@media print {
	.border-print-0 {
		border: 0 !important;
	}
	.border-print-transparent {
		border-color: transparent !important;
	}
	.shadow-print-none {
		box-shadow: none !important;
	}
	.bg-print-transparent {
		background-color: transparent !important;
	}
	.col-print-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}