/*
 * CyberSlam global chrome — topbar, footer, mobile bottom nav.
 *
 * Built only from tokens. Where the HTML mockups and the brand book disagree,
 * the brand book wins: the mockups draw 8px button radii and an accent of
 * rgba(226,61,82), neither of which is in the token set. The book is explicit
 * that radius stays minimal (2px for buttons, 4px for chips, 0 elsewhere) and
 * that no component introduces its own colour. The mockups predate the tokens.
 */

/*
 * The chrome's two sticky edges, written down once (0.10.1).
 *
 * Anything that sticks under the top bar or above the phone's bottom bar
 * reads these rather than copying a number. Both are exact — measured
 * 2026-09-24 at 113px and 45px:
 *
 * - the desktop bar is the 80px logo, its padding and its hairline.
 * - the phone bar (0.14.0, 067) is its 42px controls row (the AP pill, the
 *   bell and the picker — taller than the 36px logo), its padding and its
 *   hairline. Until 0.14.0 the row's content set that height and no phone
 *   value was published; the row now HAS that height (below), so the number
 *   is exact rather than measured. Measured 67px signed out, as a member and
 *   as an admin, at 360, 390 and 782.
 * - `--csds-topbar-height` is whichever of the two is showing. A row that
 *   sticks under the bar reads this one.
 * - the bottom bar is its 44px touch target and its hairline, and 0 wherever
 *   it is not shown.
 */
:root {
	--csds-topbar-height-desktop: calc(80px + 2 * var(--csds-space-4) + var(--csds-border-hairline));
	--csds-topbar-height-phone: calc(42px + 2 * var(--csds-space-3) + var(--csds-border-hairline));
	--csds-topbar-height: var(--csds-topbar-height-desktop);
	--csds-bottomnav-height: 0px;
}

@media (max-width: 782px) {
	:root {
		--csds-topbar-height: var(--csds-topbar-height-phone);
		--csds-bottomnav-height: calc(44px + var(--csds-border-hairline));
	}
}

.csds-body {
	margin: 0;
	background: var(--csds-surface-base);
	color: var(--csds-ink);
	font: var(--csds-body-default);
	-webkit-font-smoothing: antialiased;
}

/*
 * The template owns its own ground.
 *
 * base.css also paints `html body`, but `body` on this site is reached by the
 * child theme and by inline resets, and winning that fight is not the right
 * dependency for a template to have: it would silently lose the day someone
 * edits the theme. `.csds-page` is ours, so it cannot be outranked by accident.
 * Measured before this: the topbar and footer rendered exact token values while
 * the area between them showed pure black from an outside rule.
 */
/*
 * The page's ground is the surface token with a dark texture tiled over it
 * (user, 2026-09-24). The token stays underneath: it is what shows while the
 * image loads, if it ever fails, and in the gaps of any tile.
 */
.csds-page {
	background-image: url("../img/page-texture.jpg");
	background-repeat: repeat;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/*
	 * A hidden drop-down is still laid out (it is `visibility: hidden`, so it
	 * can take focus during the close grace), and a federation flyout reaches
	 * past the right edge at narrow desktop widths — measured, it pushed the
	 * page 45px sideways at 783px while showing nothing. `clip`, not `hidden`:
	 * clip does not make a scroll container, so the sticky bar still sticks.
	 */
	overflow-x: clip;
	/* `background-color`, not the `background` shorthand: the shorthand would
	   reset the texture above to none. */
	background-color: var(--csds-surface-base);
	color: var(--csds-ink);
}

/* ------------------------------------------------------- skip link ---- */

/*
 * "Skip to content" (063): the first thing a keyboard reaches on every page.
 * Out of sight and out of the layout until it has focus, so an untouched page
 * renders exactly as before. Above the top bar (30) and its panels (40).
 */
.csds-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.csds-skip:focus {
	position: fixed;
	top: var(--csds-space-2);
	left: var(--csds-space-2);
	z-index: 50;
	width: auto;
	height: auto;
	clip-path: none;
	padding: var(--csds-space-2) var(--csds-space-4);
	background: var(--csds-surface-raised);
	color: var(--csds-ink);
	outline: var(--csds-border-thick) solid var(--csds-gold-light);
	outline-offset: 2px;
}
/* The skip link sends focus to <main> (tabindex -1); a ring round the whole
   page would say nothing the scroll has not. */
#csds-main:focus { outline: none; }

/* ---------------------------------------------------------- topbar ---- */

.csds-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--csds-surface-base);
	border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}

.csds-topbar__inner {
	display: flex;
	align-items: center;
	gap: var(--csds-space-6);
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--csds-space-4) var(--csds-space-6);
}

/*
 * The text wordmark is a FALLBACK, used only when no logo attachment is set.
 *
 * It is set at display-name (34px) rather than display-belt (22px) because its
 * "SLAM" half is crimson, and crimson on surface-base is 3.44:1 — that clears
 * the 3:1 large-text floor at 24px and over, and fails the 4.5:1 body floor
 * below it. Measured at 22px it was a real contrast failure. The brand book
 * forbids reflowing the two-tone split, so the size moves, not the colour.
 */
.csds-logo {
	flex: 0 0 auto;
	font: var(--csds-display-name);
	letter-spacing: 0.03em;
	color: var(--csds-ink);
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1;
}

.csds-logo span { color: var(--csds-crimson); }

/* With the real wordmark set, the logo is an image and the contrast question
   does not arise; it carries its alt text instead. */
.csds-logo:has(.csds-logo__img) { font-size: 0; }

/* Sized against the links as the top-bar mockup (Mockups/topnav.png) lays it
   out: the wordmark stands about five times the links' type size (0.10.0).
   The attachment is 2560px wide and printed with a srcset, so it stays sharp. */
.csds-logo__img {
	display: block;
	height: 80px;
	width: auto;
}

.csds-topnav { flex: 1 1 auto; min-width: 0; }

/*
 * One row, never a stack (0.9.0, feature 056). The row used to scroll
 * sideways (`overflow-x: auto`), and that is gone on purpose: an element that
 * scrolls clips everything positioned inside it, which is every drop-down
 * below. The phone does not need it either — below the breakpoint this menu is
 * the bottom bar.
 */
.csds-topnav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--csds-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.csds-topnav__list li {
	position: relative;
	margin: 0;
	list-style: none;
}

.csds-topnav__list > li {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* A link or a button, drawn the same: the label of a menu item. */
.csds-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--csds-space-2);
	white-space: nowrap;
	margin: 0;
	padding: var(--csds-space-1) 0;
	border: 0;
	background: none;
	font: var(--csds-heading-topnav);
	letter-spacing: var(--csds-heading-topnav-letter-spacing);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--csds-ink-muted);
	cursor: pointer;
}

.csds-nav__link:hover,
.csds-nav__link:focus-visible { color: var(--csds-ink); }

/*
 * The ▾ of a split item: the label goes to the page, this opens the menu.
 * On a touch screen it is the ONLY way in, so it is a 44px target (the
 * touch-target minimum), pulled back towards its label so the row's spacing
 * does not grow.
 */
.csds-nav__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0 calc(-1 * var(--csds-space-3)) 0 calc(-1 * var(--csds-space-2));
	padding: 0;
	border: 0;
	background: none;
	font: var(--csds-body-lead);
	color: var(--csds-ink-muted);
	cursor: pointer;
}

.csds-nav__caret:hover,
.csds-nav__caret:focus-visible { color: var(--csds-ink); }

.csds-nav__caret-glyph { font: var(--csds-body-caption); }

/* The active item takes a crimson rule, not crimson text: crimson as flat text
   is 3.4:1, and this label is 13px. The rule is a graphic, which clears the
   3:1 UI floor, and the label itself stays ink. A federation page is the
   Federations page (the route runs on page 2141), so it is marked too. */
.csds-topnav__list > .current-menu-item > .csds-nav__link,
.csds-topnav__list > .current_page_item > .csds-nav__link,
.csds-topnav__list > .current-menu-ancestor > .csds-nav__link,
.csds-topnav__list > .current-page-ancestor > .csds-nav__link {
	color: var(--csds-ink);
	box-shadow: inset 0 -2px 0 0 var(--csds-crimson);
}

/* ------------------------------------------------------ drop-downs ---- */
/*
 * Opened by CSS alone: `:hover` for a pointer, `:focus-within` for a keyboard
 * or a tap (the ▾ and ▸ are buttons, so they take focus). No script.
 */
/*
 * A closed menu is `visibility: hidden`, not `display: none`, and it closes
 * after a short grace.
 *
 * The grace is what makes the flyouts work on a touch screen: a tap on a ▸
 * inside a menu first takes focus from the caret that opened it, and for that
 * instant nothing inside has focus. A menu that hid at once took the ▸ with
 * it, and a button that is not rendered cannot take focus. It also forgives a
 * mouse that slips off for a moment. Opening is immediate.
 *
 * `display: none` would do the same job AND keep a closed menu out of the
 * layout — but a menu shown by `display` cannot slide open: measured, the
 * `@starting-style` first frame never applied and the menu simply appeared.
 * Kept as visibility, with `.csds-page { overflow-x: clip }` (below) so a
 * closed menu still cannot widen the page.
 */
.csds-topnav__list .sub-menu {
	visibility: hidden;
	transition: visibility 0s linear 0.2s;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 220px;
	margin: 0;
	padding: var(--csds-space-2);
	list-style: none;
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
}

/*
 * Hover opens a menu only where there is a real pointer. On a touch screen a
 * tap is also a hover, so the first tap on "Federations" opened the menu AND
 * followed the link. There the caret opens it (0.10.0).
 *
 * Focus opens it from the caret or a label-button, and a menu stays open
 * while focus is anywhere inside it. Not from the label link: a tap on the
 * link is a trip to the page, not a request for the menu.
 */
@media (hover: hover) {
	.csds-topnav__list li:hover > .sub-menu {
		visibility: visible;
		transition-delay: 0s;
	}
}

.csds-topnav__list .csds-nav__caret:focus ~ .sub-menu,
.csds-topnav__list .csds-nav__toggle:focus ~ .sub-menu,
.csds-topnav__list .sub-menu:focus-within {
	visibility: visible;
	transition-delay: 0s;
}

/*
 * The slide (0.10.0): a menu drops from its label and fades in; a flyout
 * comes in from the left. Closing plays it backwards after the same 0.2s
 * grace, and `visibility` flips only once the slide has finished. Anyone who
 * asks their system for less motion keeps the plain show/hide above.
 */
@media (prefers-reduced-motion: no-preference) {
	.csds-topnav__list .sub-menu {
		opacity: 0;
		translate: 0 calc(-1 * var(--csds-motion-slide));
		transition:
			visibility 0s linear calc(0.2s + var(--csds-motion-duration)),
			opacity var(--csds-motion-duration) var(--csds-motion-ease) 0.2s,
			translate var(--csds-motion-duration) var(--csds-motion-ease) 0.2s;
	}

	.csds-topnav__list .csds-nav__menu--2,
	.csds-topnav__list .csds-nav__menu--3 { translate: calc(-1 * var(--csds-motion-slide)) 0; }

	.csds-topnav__list .csds-nav__caret:focus ~ .sub-menu,
	.csds-topnav__list .csds-nav__toggle:focus ~ .sub-menu,
	.csds-topnav__list .sub-menu:focus-within {
		opacity: 1;
		translate: 0 0;
		transition-delay: 0s;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.csds-topnav__list li:hover > .sub-menu {
		opacity: 1;
		translate: 0 0;
		transition-delay: 0s;
	}
}

/* A federation's tabs fly out to its right, and the Forums tab's boards to
   the right of those. */
.csds-topnav__list .csds-nav__menu--2,
.csds-topnav__list .csds-nav__menu--3 {
	top: calc(-1 * var(--csds-space-2));
	left: 100%;
}

/*
 * Under about 900px there is no room on the right: measured, the flyout ran
 * from 615 to 835 in an 830px window and was cut off at the edge. Below that
 * width it opens to the LEFT of its menu instead, and slides in from the
 * other side.
 */
/*
 * The third level sits one panel further right, so it runs out of room
 * sooner: measured, the boards flyout reached 1037px in a 1024px window. It
 * flips at 1100px, the tabs flyout at 900px.
 */
@media (max-width: 1100px) {
	.csds-topnav__list .csds-nav__menu--3 {
		left: auto;
		right: 100%;
	}

	@media (prefers-reduced-motion: no-preference) {
		.csds-topnav__list .csds-nav__menu--3 { translate: var(--csds-motion-slide) 0; }

		.csds-topnav__list .csds-nav__caret:focus ~ .csds-nav__menu--3,
		.csds-topnav__list .csds-nav__menu--3:focus-within { translate: 0 0; }
	}
}

@media (max-width: 900px) {
	.csds-topnav__list .csds-nav__menu--2 {
		left: auto;
		right: 100%;
	}

	/*
	 * With the tabs flyout on the left, the boards go back to ITS right —
	 * flipping both sent the boards off the left edge instead (measured at
	 * -18px). They overlap the level above, which is what a cascade does when
	 * the window runs out.
	 */
	.csds-topnav__list .csds-nav__menu--3 {
		left: 100%;
		right: auto;
	}

	@media (prefers-reduced-motion: no-preference) {
		.csds-topnav__list .csds-nav__menu--2 { translate: var(--csds-motion-slide) 0; }

		.csds-topnav__list .csds-nav__menu--3 { translate: calc(-1 * var(--csds-motion-slide)) 0; }

		.csds-topnav__list .csds-nav__caret:focus ~ .csds-nav__menu--2,
		.csds-topnav__list .csds-nav__caret:focus ~ .csds-nav__menu--3,
		.csds-topnav__list .csds-nav__menu--2:focus-within,
		.csds-topnav__list .csds-nav__menu--3:focus-within { translate: 0 0; }
	}
}

.csds-topnav__list .sub-menu > li {
	display: flex;
	align-items: center;
}

.csds-topnav__list .sub-menu .csds-nav__link {
	flex: 1 1 auto;
	padding: var(--csds-space-2) var(--csds-space-3);
	font: var(--csds-body-default);
	text-transform: none;
	letter-spacing: 0;
	color: var(--csds-ink);
}

.csds-topnav__list .sub-menu .csds-nav__link:hover,
.csds-topnav__list .sub-menu .csds-nav__link:focus-visible,
.csds-topnav__list .sub-menu li:focus-within > .csds-nav__link {
	background: var(--csds-surface-raised);
}

/* A federation's logo, or its initials when it has none. */
.csds-nav__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	overflow: hidden;
	background: var(--csds-surface-raised);
	border-radius: var(--csds-radius-xs);
	font: var(--csds-heading-label);
	color: var(--csds-gold-light);
}

.csds-nav__badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* A tab's count, as its own tab bar shows it. */
.csds-nav__count {
	margin-left: auto;
	padding-left: var(--csds-space-3);
	font: var(--csds-body-caption);
	color: var(--csds-gold-light);
}

.csds-topnav--unset {
	font: var(--csds-body-caption);
	color: var(--csds-ink-muted);
}

/* ------------------------------------------------ the right side ---- */

.csds-navcta {
	display: flex;
	flex: 0 0 auto;
	gap: var(--csds-space-3);
	align-items: center;
}

/* The active wrestler's AP (Active Wrestler Switcher draws it). */
.csds-navcta .aws-ap-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--csds-space-2);
	padding: var(--csds-space-1) var(--csds-space-3);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-sm);
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	color: var(--csds-ink);
	white-space: nowrap;
}

/* The bell's slot. WNF moves the bell in after load, and its own "inline"
   rule then pins it `position: absolute; right: 0` — built for Divi's header,
   where that corner was free. Here it would sit on top of the picker, so the
   slot takes it back into the row. (0,3,0) over WNF's (0,2,0). */
.csds-topbar__bell {
	display: flex;
	align-items: center;
}

.csds-topbar__bell .wnf-bell.wnf-bell--inline {
	position: static;
	margin: 0;
}

/* The wrestler picker (Active Wrestler Switcher draws it). */
.csds-navcta .aws-nav-picker { position: relative; }

.csds-navcta .aws-nav-indicator {
	display: inline-flex;
	align-items: center;
	gap: var(--csds-space-2);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: var(--csds-heading-nav);
	letter-spacing: var(--csds-heading-nav-letter-spacing);
	color: var(--csds-ink);
	cursor: pointer;
}

.csds-navcta .aws-indicator-image {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
}

.csds-navcta .aws-nav-picker__caret { font: var(--csds-body-caption); color: var(--csds-ink-muted); }

.csds-navcta .aws-menu {
	min-width: 320px;
	margin-top: var(--csds-space-2);
	padding: var(--csds-space-2);
	border-radius: var(--csds-radius-xs);
	box-shadow: none;
	z-index: 40;
}

/*
 * A long roster scrolls INSIDE the panel, and only its wrestler list does:
 * the label above and Account Hub / Log out below stay in view. The panel
 * stops short of the screen's foot — its top is the bar's height (the 80px
 * logo and the bar's padding) plus its own margin. `overscroll-behavior`
 * keeps a flick at the list's end from scrolling the page behind it.
 */
.csds-navcta .aws-menu.aws-menu-open {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - var(--csds-topbar-height-desktop) - 2 * var(--csds-space-2));
}

.csds-navcta .aws-menu-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.csds-navcta .aws-menu__label,
.csds-navcta .aws-menu__foot { flex: 0 0 auto; }

/* The active wrestler has its own list above the roster (AWS 1.13.0). It
   never scrolls: only the roster below it does. */
.csds-navcta .aws-menu-list--active {
	flex: 0 0 auto;
	overflow: visible;
}

/* "Your wrestlers" under the active wrestler starts a new section. */
.csds-navcta .aws-menu-list--active + .aws-menu__label {
	margin-top: var(--csds-space-2);
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	padding-top: var(--csds-space-3);
}

.csds-navcta .aws-menu__label {
	margin: 0;
	padding: var(--csds-space-2) var(--csds-space-3) var(--csds-space-1);
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-ink-muted);
}

.csds-navcta .aws-menu-item {
	display: flex;
	flex-direction: column;
}

.csds-navcta .aws-menu-item .aws-wrestler-link {
	gap: var(--csds-space-3);
	padding: var(--csds-space-2) var(--csds-space-3);
}

.csds-navcta .aws-menu-item-active .aws-wrestler-link { background: var(--csds-surface-raised); }

.csds-navcta .aws-menu-item-image {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--csds-radius-xs);
}

.csds-navcta .aws-menu-item-ap {
	font: var(--csds-body-caption);
	color: var(--csds-ink-muted);
	white-space: nowrap;
}

.csds-navcta .aws-menu-item-count {
	min-width: 20px;
	padding: 0 var(--csds-space-1);
	background: var(--csds-blood);
	border-radius: var(--csds-radius-xs);
	font: var(--csds-body-caption);
	color: var(--csds-ink);
	text-align: center;
}

/* AWS centres this link (`align-self: center`), which in the picker's column
   layout floats it to the middle of the row. */
.csds-navcta .aws-menu-item .aws-menu-item-info {
	align-self: stretch;
	justify-content: flex-start;
	padding: 0 var(--csds-space-3) var(--csds-space-2) calc(28px + 2 * var(--csds-space-3));
	font: var(--csds-body-caption);
	color: var(--csds-link);
}

/*
 * The profile toggle (AWS 1.13.0): a `<details>`, so it opens with no script,
 * listing one link per profile tab. Its summary takes the link's look above.
 */
.csds-navcta .aws-menu-item-tabs { align-self: stretch; }

.csds-navcta .aws-menu-item-tabs > summary {
	display: flex;
	gap: var(--csds-space-2);
	list-style: none;
	cursor: pointer;
}

.csds-navcta .aws-menu-item-tabs > summary::-webkit-details-marker { display: none; }

.csds-navcta .aws-menu-item-tabs > summary::after { content: "\25B8"; }

.csds-navcta .aws-menu-item-tabs[open] > summary::after { content: "\25BE"; }

.csds-navcta .aws-menu-item-tablist {
	margin: 0;
	padding: 0 0 var(--csds-space-2) calc(28px + var(--csds-space-3));
	list-style: none;
}

.csds-navcta .aws-menu-item-tablist a {
	display: flex;
	align-items: baseline;
	padding: var(--csds-space-1) var(--csds-space-3);
	font: var(--csds-body-default);
	color: var(--csds-ink);
	text-decoration: none;
}

/* Held items, and achievements held / available — as a tab's count in the
   Federations menu shows it. */
.csds-navcta .aws-menu-item-tabcount {
	margin-left: auto;
	padding-left: var(--csds-space-3);
	font: var(--csds-body-caption);
	color: var(--csds-gold-light);
	font-variant-numeric: tabular-nums;
}

/*
 * Hovering a profile link lifts it: gold-light text (link-hover's lighter
 * shade, the token's own advice on a panel — 10.7:1), an underline, and the
 * raised row behind it. Colour is never the only sign; the underline is.
 */
.csds-navcta .aws-menu-item-tablist a:hover,
.csds-navcta .aws-menu-item-tablist a:focus-visible {
	background: var(--csds-surface-raised);
	color: var(--csds-gold-light);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.csds-navcta .aws-menu-item .aws-menu-item-info:hover,
.csds-navcta .aws-menu-item .aws-menu-item-info:focus-visible {
	color: var(--csds-gold-light);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.csds-navcta .aws-menu__foot {
	display: flex;
	flex-direction: column;
	margin-top: var(--csds-space-2);
	padding-top: var(--csds-space-2);
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
}

.csds-navcta .aws-menu__link {
	padding: var(--csds-space-2) var(--csds-space-3);
	font: var(--csds-body-default);
	color: var(--csds-ink);
	text-decoration: none;
}

.csds-navcta .aws-menu__link:hover,
.csds-navcta .aws-menu__link:focus-visible { background: var(--csds-surface-raised); }

.csds-navcta .aws-nav-picker--empty {
	display: flex;
	gap: var(--csds-space-3);
}

.csds-navcta .aws-nav-picker--empty a {
	font: var(--csds-heading-nav);
	letter-spacing: var(--csds-heading-nav-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-ink);
	text-decoration: none;
}

/* --------------------------------------------------------- buttons ---- */
/*
 * There are no button rules here. `.csds-btn` and its variants belong to the
 * component layer (ui.css), and this file defined them a second time.
 *
 * Both definitions sat at the same specificity, ui.css loads later, so its
 * base `.csds-btn { background: surface-base }` silently beat this file's
 * `.csds-btn--primary { background: crimson }` — the sign-up button in the
 * topbar rendered with no fill from the moment the component layer landed.
 * It was found by an unrelated check, which is how a duplicate definition
 * usually surfaces.
 *
 * The chrome uses the component's own variants: `.csds-btn` for a quiet
 * control and `.csds-btn--active` for the red-filled one.
 */

/* ----------------------------------------------------------- main ----- */

.csds-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--csds-space-7) var(--csds-space-6);
	box-sizing: border-box;
}

.csds-content a {
	color: var(--csds-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.csds-content a:hover,
.csds-content a:focus { color: var(--csds-link-hover); }

.csds-content h1 { font: var(--csds-display-name); text-transform: uppercase; }
.csds-content h2 { font: var(--csds-heading-section); text-transform: uppercase; }
.csds-content h3 { font: var(--csds-heading-section); }
.csds-content h4 { font: var(--csds-heading-card); }

.csds-content h1,
.csds-content h2,
.csds-content h3,
.csds-content h4 { color: var(--csds-ink); margin: 0 0 var(--csds-space-4); }

.csds-content p { margin: 0 0 var(--csds-space-4); }

/*
 * Lists. Divi's stylesheet supplied the bullets and the indent; with Divi
 * dequeued, a <ul> renders as flat lines and reads as body copy. The browser
 * default is not a safe fallback here because normalize-style resets from
 * other plugins still apply.
 */
.csds-content ul,
.csds-content ol {
	margin: 0 0 var(--csds-space-4);
	padding-left: var(--csds-space-6);
}

.csds-content ul { list-style: disc outside; }
.csds-content ol { list-style: decimal outside; }
.csds-content li { margin: 0 0 var(--csds-space-1); }

.csds-content ul ul,
.csds-content ol ol { margin-bottom: 0; }

.csds-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--csds-space-4);
}

.csds-content th,
.csds-content td {
	padding: var(--csds-space-2) var(--csds-space-3);
	border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
	text-align: left;
}

.csds-content th {
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-ink-muted);
}

/* -------------------------------------------------------- page head ---- */

.csds-pagehead {
	margin: 0 0 var(--csds-space-7);
	padding-bottom: var(--csds-space-4);
	border-bottom: var(--csds-border-thick) solid var(--csds-crimson);
}

.csds-pagehead__title {
	margin: 0;
	font: var(--csds-display-title);
	text-transform: uppercase;
	color: var(--csds-ink);
}

@media (max-width: 782px) {
	.csds-pagehead__title { font: var(--csds-display-name); text-transform: uppercase; }
}

/* --------------------------------------------------------- footer ----- */

/*
 * The doormat (0.16.0, 069): the brand column and the "Footer links" menu's
 * columns side by side on a wide screen; the brand above the columns on a
 * tablet; two columns, then one, on a phone. The legal line is the last row.
 * Grid only, no script. Links are 44px tall on a touch screen.
 */
.csds-footer {
	flex: 0 0 auto;
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	background: var(--csds-surface-panel);
}

.csds-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--csds-space-8) var(--csds-space-6) var(--csds-space-6);
}

.csds-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr);
	gap: var(--csds-space-8);
	align-items: start;
}

.csds-footer__grid.is-brand-only { grid-template-columns: minmax(0, 1fr); }

.csds-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--csds-space-4);
}

.csds-footer__logo {
	display: inline-block;
	font: var(--csds-display-name);
	font-family: var(--csds-font-display);
	color: var(--csds-ink);
	text-decoration: none;
}

.csds-footer__logo span { color: var(--csds-crimson); }

.csds-footer__logo-img {
	display: block;
	width: auto;
	height: 56px;
}

.csds-footer__about {
	max-width: 32ch;
	margin: 0;
	font: var(--csds-body-default);
	color: var(--csds-ink-muted);
}

.csds-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--csds-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.csds-footer__col { margin: 0; }

.csds-footer__head {
	margin: 0 0 var(--csds-space-3);
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-ink);
}

.csds-footer__head a {
	color: inherit;
	text-decoration: none;
}

.csds-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csds-footer__link { margin: 0; }

.csds-footer__link a {
	display: inline-block;
	padding: var(--csds-space-1) 0;
	font: var(--csds-body-default);
	color: var(--csds-ink-muted);
	text-decoration: none;
}

.csds-footer__head a:hover,
.csds-footer__link a:hover {
	color: var(--csds-link-hover);
	text-decoration: underline;
}

.csds-footer a:focus-visible {
	outline: var(--csds-border-thick) solid var(--csds-gold-light);
	outline-offset: 2px;
}

.csds-footer__link a[aria-current="page"] { color: var(--csds-ink); }

.csds-footer__legal {
	margin: var(--csds-space-8) 0 0;
	padding-top: var(--csds-space-5);
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	font: var(--csds-body-caption);
	color: var(--csds-ink-muted);
	text-align: center;
}

@media (max-width: 1024px) {
	.csds-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 782px) {
	.csds-footer__inner { padding: var(--csds-space-6) var(--csds-space-4); }

	.csds-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* A thumb, not a pointer: each link a 44px row. A heading is one too,
	   linked or not, so the columns' headings line up. */
	.csds-footer__link a,
	.csds-footer__head,
	.csds-footer__head a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
	}

	.csds-footer__head { margin-bottom: var(--csds-space-1); }
}

@media (max-width: 380px) {
	.csds-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ mobile bottom nav ---- */

.csds-bottomnav { display: none; }
/*
 * A closed panel is hidden by the browser's own `[popover]` rule. A browser
 * that predates `popover` has no such rule and would paint every panel open,
 * so it hides them outright — its bar buttons then do nothing (accepted by the
 * user, 2026-09-22), which is better than a stack of open panels.
 */
@supports not selector(:popover-open) {
	.csds-bottompanel { display: none; }
}

@media (max-width: 782px) {
	/* The bar's height is the published token, not whatever its content
	   adds up to: anything sticking under it reads that token (067). The
	   hairline is the bar's border, outside this box. */
	.csds-topbar__inner {
		gap: var(--csds-space-3);
		height: calc(var(--csds-topbar-height-phone) - var(--csds-border-hairline));
		padding: var(--csds-space-3) var(--csds-space-4);
	}

	/* On a phone the menu IS the bottom bar; the top bar keeps the logo, the
	   bell and the wrestler picker. Mobile is composed, not scaled. */
	.csds-topnav { display: none; }

	/* The logo takes the space the menu left, pushing the rest right. */
	.csds-logo { margin-right: auto; }

	/* Smaller than the desktop's 80px so the AP pill, the bell and the picker
	   still fit beside it at 360px. */
	.csds-logo__img { height: 36px; }

	/* The AP pill stays: it is the one number a member plays by (0.10.0). The
	   wrestler's name does not fit beside it; the picker keeps the picture. */
	.csds-navcta .aws-ap-pill { padding: var(--csds-space-1) var(--csds-space-2); }

	.csds-navcta .aws-indicator-name,
	.csds-navcta .aws-nav-picker__caret,
	.csds-navcta .aws-nav-picker__logout { display: none; }

	/* AWS's own phone rule centres its menu with `left: 50%` and
	   `translateX(-50%)`; with the edges pinned here, that shift pushed half
	   the list off the left of the screen. */
	.csds-navcta .aws-menu {
		position: fixed;
		top: auto;
		right: var(--csds-space-3);
		left: var(--csds-space-3);
		min-width: 0;
		transform: none;
	}

	/* On a phone the bar is shorter (36px logo) and the bottom bar takes 44px. */
	.csds-navcta .aws-menu.aws-menu-open {
		max-height: calc(100dvh - 36px - 2 * var(--csds-space-3) - var(--csds-bottomnav-height) - 2 * var(--csds-space-3));
	}

	.csds-main { padding: var(--csds-space-5) var(--csds-space-4); }

	.csds-content h1 { font: var(--csds-display-name); text-transform: uppercase; }

	.csds-bottomnav {
		position: sticky;
		bottom: 0;
		z-index: 30;
		display: flex;
		background: var(--csds-surface-panel);
		border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	}

	.csds-bottomnav__item {
		flex: 1 1 0;
		/* 44px minimum touch target. */
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0 var(--csds-space-1);
		border: 0;
		background: none;
		font: var(--csds-heading-label);
		letter-spacing: var(--csds-heading-label-letter-spacing);
		text-transform: uppercase;
		text-decoration: none;
		color: var(--csds-ink-muted);
		cursor: pointer;
	}

	.csds-bottomnav__item:hover,
	.csds-bottomnav__item:focus-visible { color: var(--csds-ink); }

	/* The current slot: ink, and a crimson rule — the top bar's marker. */
	.csds-bottomnav__item.is-current {
		color: var(--csds-ink);
		box-shadow: inset 0 2px 0 0 var(--csds-crimson);
	}

	/* A panel opened from the bar, sitting just above it. */
	/* The browser's own popover style centres a panel and shrinks it to its
	   text (`width: fit-content; margin: auto`); the mockup's panel spans the
	   screen above the bar. */
	.csds-bottompanel {
		position: fixed;
		inset: auto var(--csds-space-3) calc(var(--csds-bottomnav-height) + var(--csds-space-3)) var(--csds-space-3);
		width: auto;
		max-height: 70vh;
		overflow-y: auto;
		margin: 0;
		padding: var(--csds-space-2);
		background: var(--csds-surface-panel);
		border: var(--csds-border-hairline) solid var(--csds-border-default);
		border-radius: var(--csds-radius-xs);
		color: var(--csds-ink);
	}

	.csds-bottompanel__label {
		margin: 0;
		padding: var(--csds-space-2) var(--csds-space-3) var(--csds-space-1);
		font: var(--csds-heading-label);
		letter-spacing: var(--csds-heading-label-letter-spacing);
		text-transform: uppercase;
		color: var(--csds-ink-muted);
	}

	.csds-bottompanel__link {
		display: flex;
		align-items: center;
		gap: var(--csds-space-3);
		min-height: 44px;
		padding: 0 var(--csds-space-3);
		font: var(--csds-body-default);
		color: var(--csds-ink);
		text-decoration: none;
	}

	.csds-bottompanel__link:hover,
	.csds-bottompanel__link:focus-visible { background: var(--csds-surface-raised); }

	.csds-bottompanel__rule {
		margin: var(--csds-space-2) var(--csds-space-1);
		border: 0;
		border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	}
}

/* ------------------------------------------- shared page parts ---- */

/*
 * One rule each for parts the homepage, the dashboard and the component
 * gallery draw the same way (063, D2). They live here because chrome.css is
 * on every CyberSlam page and prints before home.css and dashboard.css, so
 * each page's own overrides (the phone padding, a centred row) still come
 * later and win.
 */
.csds-home__wrap,
.csds-dash__wrap {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--csds-space-6);
	box-sizing: border-box;
}

/*
 * Specificity, not !important. The kicker is itself a <p> inside
 * `.csds-home__band-head`, so the rule above it — `.csds-home__band-head p`,
 * (0,1,1) — outranks a bare `.csds-home__kicker` at (0,1,0) and was painting
 * it ink-muted at 16px. Measured, not guessed: the computed colour came back
 * rgb(205,190,159) where the token is #C9151E.
 */
.csds-home__band-head .csds-home__kicker,
.csds-home__kicker,
.csds-dash__eyebrow,
.csds-gallery__label {
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	/*
	 * ink-muted (10.9:1), not crimson.
	 *
	 * Crimson as TEXT at 11px measured 3.44:1 against a 4.5 floor. The brand
	 * book already says so: crimson is a FILL behind ink at 14px+, never small
	 * text. `heading-label` is the style for exactly this job and the hero's
	 * eyebrow already wears it. Found by the sweep, not by reading.
	 */
	color: var(--csds-ink-muted);
	margin: 0 0 var(--csds-space-2);
}

.csds-home__ctas,
.csds-dash__ctas,
.csds-dash__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csds-space-3);
	margin: var(--csds-space-5) 0 0;
}

/*
 * A section of an edited page (063): no box of its own. It carries the id the
 * section's CSS is nested in, and nothing else.
 */
.csds-section { display: contents; }

/* ------------------------------------------------- component gallery ---- */
/* Review surface only; not part of the component vocabulary. */

.csds-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--csds-space-6);
}

.csds-gallery__stage {
	padding: var(--csds-space-4);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	background: var(--csds-surface-base);
	overflow-x: auto;
}

.csds-gallery__item--wide { grid-column: 1 / -1; }

/* The Modal is position:fixed by design. A gallery cell must contain it, or it
   covers the page and the cells behind it read as empty. */
.csds-gallery__stage--contain {
	position: relative;
	min-height: 360px;
	contain: layout paint;
}

/* ---------------------------------------------------------- motion ---- */
/*
 * Anchor links glide rather than jump, and land BELOW the sticky bar instead
 * of under it: the bar is the logo plus its padding (80px + 2 × space-4 on a
 * desktop; 36px + 2 × space-3 on a phone), and a little air on top (0.10.0).
 */
html { scroll-padding-top: calc(var(--csds-topbar-height-desktop) + var(--csds-space-4)); }

@media (max-width: 782px) {
	html { scroll-padding-top: calc(36px + 2 * var(--csds-space-3) + var(--csds-space-4)); }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}