/*
 * AYHL components.
 *
 * Framework-agnostic UI components (plain class names, no WordPress
 * dependencies). The future React statistics application should import
 * fonts.css + tokens.css + base.css + components.css and use these same
 * classes so the two experiences are visually identical.
 *
 * Contents
 *  1. Icons            8. Tables
 *  2. Buttons          9. Tabs & segmented control
 *  3. Badges & chips  10. Forms & filter bar
 *  4. Section header  11. Empty, notice, skeleton states
 *  5. Cards           12. Breadcrumbs
 *  6. News cards      13. Pagination
 *  7. Team mark       14. Game row
 */

/* ============ 1. Icons ============ */
.ayhl-icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ayhl-icon--fill {
	fill: currentColor;
	stroke: none;
}

/* ============ 2. Buttons ============ */
.ayhl-btn {
	--_bg: var(--ayhl-color-primary);
	--_bg-hover: var(--ayhl-color-primary-hover);
	--_fg: #fff;
	--_border: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--ayhl-control-height);
	padding: 0.55rem 1.3rem 0.5rem;
	border: 2px solid var(--_border);
	border-radius: var(--ayhl-radius-sm);
	background: var(--_bg);
	color: var(--_fg);
	font-family: var(--ayhl-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--ayhl-tracking-caps);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--ayhl-duration) var(--ayhl-ease),
		border-color var(--ayhl-duration) var(--ayhl-ease),
		color var(--ayhl-duration) var(--ayhl-ease),
		transform var(--ayhl-duration) var(--ayhl-ease),
		box-shadow var(--ayhl-duration) var(--ayhl-ease);
}

.ayhl-btn:hover {
	background: var(--_bg-hover);
	color: var(--_fg);
	transform: translateY(-1px);
	box-shadow: var(--ayhl-shadow-md);
}

.ayhl-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.ayhl-btn .ayhl-icon {
	width: 1.1em;
	height: 1.1em;
	vertical-align: 0;
	transition: transform var(--ayhl-duration) var(--ayhl-ease);
}

.ayhl-btn:hover .ayhl-icon--arrow {
	transform: translateX(3px);
}

.ayhl-btn--accent {
	--_bg: var(--ayhl-color-accent);
	--_bg-hover: var(--ayhl-color-accent-hover);
}

.ayhl-btn--dark {
	--_bg: var(--ayhl-navy-900);
	--_bg-hover: var(--ayhl-navy-700);
}

.ayhl-btn--secondary {
	--_bg: var(--ayhl-color-surface);
	--_bg-hover: var(--ayhl-color-primary-tint);
	--_fg: var(--ayhl-navy-900);
	--_border: var(--ayhl-color-border-strong);
}

.ayhl-btn--secondary:hover {
	--_border: var(--ayhl-color-primary);
	box-shadow: none;
}

.ayhl-btn--ghost {
	--_bg: transparent;
	--_bg-hover: var(--ayhl-color-primary-tint);
	--_fg: var(--ayhl-color-primary);
	padding-inline: 0.75rem;
}

.ayhl-btn--ghost:hover {
	box-shadow: none;
	transform: none;
}

.ayhl-btn--on-dark {
	--_bg: transparent;
	--_bg-hover: #fff;
	--_fg: #fff;
	--_border: rgba(255, 255, 255, 0.55);
}

.ayhl-btn--on-dark:hover {
	--_fg: var(--ayhl-navy-900);
	--_border: #fff;
}

.ayhl-btn--sm {
	min-height: var(--ayhl-control-height-sm);
	padding: 0.4rem 0.9rem 0.35rem;
	font-size: 0.9375rem;
}

.ayhl-btn--lg {
	min-height: 3.25rem;
	padding-inline: 1.75rem;
	font-size: 1.1875rem;
}

.ayhl-btn--block {
	width: 100%;
}

.ayhl-btn[disabled],
.ayhl-btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* Text link with arrow, used for "All news", "View all" etc. */
.ayhl-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--ayhl-color-primary);
	font-family: var(--ayhl-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: var(--ayhl-tracking-caps);
	text-decoration: none;
	text-transform: uppercase;
}

.ayhl-link-arrow .ayhl-icon {
	transition: transform var(--ayhl-duration) var(--ayhl-ease);
}

.ayhl-link-arrow:hover .ayhl-icon {
	transform: translateX(3px);
}

/* ============ 3. Badges & chips ============ */
.ayhl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.6em 0.25em;
	border-radius: var(--ayhl-radius-xs);
	background: var(--ayhl-gray-100);
	color: var(--ayhl-gray-700);
	font-family: var(--ayhl-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--ayhl-tracking-caps);
	text-transform: uppercase;
	white-space: nowrap;
}

.ayhl-badge--primary { background: var(--ayhl-color-primary); color: #fff; }
.ayhl-badge--accent { background: var(--ayhl-color-accent); color: #fff; }
.ayhl-badge--dark { background: var(--ayhl-navy-900); color: #fff; }
.ayhl-badge--tint { background: var(--ayhl-color-primary-tint); color: var(--ayhl-color-primary-active); }
.ayhl-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--ayhl-color-border-strong); color: var(--ayhl-color-text-muted); }

.ayhl-badge--live::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	animation: ayhl-pulse 1.6s ease-in-out infinite;
}

@keyframes ayhl-pulse {
	50% { opacity: 0.35; }
}

/* Filter chips (category filters, quick filters) */
.ayhl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ayhl-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayhl-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.35rem 1rem;
	border: 1px solid var(--ayhl-color-border);
	border-radius: var(--ayhl-radius-pill);
	background: var(--ayhl-color-surface);
	color: var(--ayhl-color-text);
	font-size: var(--ayhl-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--ayhl-duration-fast) var(--ayhl-ease);
}

.ayhl-chip:hover {
	border-color: var(--ayhl-color-primary);
	color: var(--ayhl-color-primary);
}

.ayhl-chip.is-active,
.ayhl-chip[aria-current="page"],
.ayhl-chip[aria-pressed="true"] {
	border-color: var(--ayhl-navy-900);
	background: var(--ayhl-navy-900);
	color: #fff;
}

/* ============ 4. Section header ============ */
.ayhl-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ayhl-space-4) var(--ayhl-space-8);
	margin-bottom: var(--ayhl-space-8);
}

.ayhl-section-header__title {
	margin: 0;
	font-size: var(--ayhl-text-3xl);
	font-weight: 800;
	text-transform: uppercase;
}

.ayhl-section-header__desc {
	max-width: 40rem;
	margin: var(--ayhl-space-2) 0 0;
	color: var(--ayhl-color-text-muted);
}

.ayhl-section--dark .ayhl-section-header__desc { color: var(--ayhl-color-text-on-dark-muted); }
.ayhl-section--dark .ayhl-link-arrow { color: #fff; }

/* ============ 5. Cards ============ */
.ayhl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--ayhl-color-border-subtle);
	border-radius: var(--ayhl-radius-md);
	background: var(--ayhl-color-surface);
	box-shadow: var(--ayhl-shadow-sm);
	overflow: hidden;
}

.ayhl-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ayhl-space-3);
	padding: var(--ayhl-space-4) var(--ayhl-space-5);
	border-bottom: 1px solid var(--ayhl-color-border-subtle);
}

.ayhl-card__title {
	margin: 0;
	font-size: var(--ayhl-text-xl);
	font-weight: 700;
	line-height: var(--ayhl-leading-tight);
}

.ayhl-card__body {
	flex: 1;
	padding: var(--ayhl-space-5);
}

.ayhl-card__body > :last-child { margin-bottom: 0; }

.ayhl-card__footer {
	padding: var(--ayhl-space-3) var(--ayhl-space-5);
	border-top: 1px solid var(--ayhl-color-border-subtle);
	background: var(--ayhl-color-surface-alt);
}

/* Card with a brand top rule (used for data panels) */
.ayhl-card--ruled {
	border-top: 3px solid var(--ayhl-navy-900);
}

.ayhl-card--accent {
	border-left: 4px solid var(--ayhl-color-primary);
}

.ayhl-card--dark {
	border-color: transparent;
	background: var(--ayhl-navy-900);
	color: var(--ayhl-color-text-on-dark-muted);
}

.ayhl-card--dark .ayhl-card__title { color: #fff; }

.ayhl-card--interactive {
	transition:
		transform var(--ayhl-duration) var(--ayhl-ease),
		box-shadow var(--ayhl-duration) var(--ayhl-ease),
		border-color var(--ayhl-duration) var(--ayhl-ease);
}

.ayhl-card--interactive:hover {
	border-color: var(--ayhl-color-border);
	box-shadow: var(--ayhl-shadow-md);
	transform: translateY(-3px);
}

/* Stretched link: whole card clickable, keeps one accessible link */
.ayhl-card__link {
	color: inherit;
	text-decoration: none;
}

.ayhl-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ayhl-card__link:focus-visible {
	outline: none;
}

.ayhl-card:has(.ayhl-card__link:focus-visible) {
	outline: 3px solid var(--ayhl-color-focus);
	outline-offset: 2px;
}

/* ============ 6. News cards ============ */
.ayhl-news-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ayhl-navy-900);
}

.ayhl-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ayhl-duration-slow) var(--ayhl-ease);
}

.ayhl-card--interactive:hover .ayhl-news-card__media img {
	transform: scale(1.04);
}

.ayhl-news-card__media .ayhl-badge {
	position: absolute;
	left: var(--ayhl-space-4);
	bottom: var(--ayhl-space-4);
	z-index: 1;
}

.ayhl-news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ayhl-space-2);
	padding: var(--ayhl-space-5) var(--ayhl-space-5) var(--ayhl-space-6);
}

.ayhl-news-card__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.08;
}

.ayhl-news-card__title a {
	color: var(--ayhl-color-heading);
}

.ayhl-card--interactive:hover .ayhl-news-card__title a {
	color: var(--ayhl-color-primary);
}

.ayhl-news-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--ayhl-color-text-muted);
	font-size: var(--ayhl-text-sm);
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Horizontal "feature" variant */
.ayhl-news-card--feature {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.ayhl-news-card--feature .ayhl-news-card__media {
	aspect-ratio: auto;
	min-height: 20rem;
}

.ayhl-news-card--feature .ayhl-news-card__body {
	justify-content: center;
	padding: var(--ayhl-space-8);
}

.ayhl-news-card--feature .ayhl-news-card__title {
	font-size: var(--ayhl-text-3xl);
	font-weight: 800;
	text-transform: uppercase;
}

.ayhl-news-card--feature .ayhl-news-card__excerpt {
	font-size: var(--ayhl-text-base);
	-webkit-line-clamp: 4;
}

@media (max-width: 48rem) {
	.ayhl-news-card--feature {
		display: flex;
	}

	.ayhl-news-card--feature .ayhl-news-card__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.ayhl-news-card--feature .ayhl-news-card__body {
		padding: var(--ayhl-space-5) var(--ayhl-space-5) var(--ayhl-space-6);
	}
}

/* Media placeholder (no featured image): ice-rink line motif */
.ayhl-media-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		url("../img/rink-lines.svg") center / cover no-repeat,
		radial-gradient(120% 90% at 30% 20%, var(--ayhl-navy-700), var(--ayhl-navy-950));
}

.ayhl-media-placeholder img {
	width: 38%;
	max-width: 11rem;
	height: auto;
	object-fit: contain;
	opacity: 0.95;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* ============ 7. Team mark (logo slot) ============ */
.ayhl-team-mark {
	display: inline-grid;
	place-items: center;
	width: var(--ayhl-team-mark-size, 2rem);
	height: var(--ayhl-team-mark-size, 2rem);
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ayhl-gray-100);
	color: var(--ayhl-gray-500);
	font-family: var(--ayhl-font-display);
	font-size: calc(var(--ayhl-team-mark-size, 2rem) * 0.4);
	font-weight: 700;
	overflow: hidden;
}

.ayhl-team-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ayhl-team-mark--placeholder {
	background: repeating-linear-gradient(-45deg, var(--ayhl-gray-100) 0 4px, var(--ayhl-gray-50) 4px 8px);
	box-shadow: inset 0 0 0 1px var(--ayhl-gray-200);
}

.ayhl-team {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
	color: var(--ayhl-color-heading);
	font-weight: 600;
	text-decoration: none;
}

.ayhl-team__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.ayhl-team:hover .ayhl-team__name {
	color: var(--ayhl-color-primary);
	text-decoration: underline;
}

/* ============ 8. Tables ============ */
/*
 * Base table: .ayhl-table inside .ayhl-table-wrap (horizontal scroll).
 * Modifiers:
 *   .ayhl-table--stats     dense, centred numeric columns, sticky first col
 *   .ayhl-table--striped   zebra rows
 *   .ayhl-table--compact   tighter rows (sidebars, widgets)
 *   .ayhl-table--dark-head navy header row
 * Cell helpers: .is-num, .is-rank, .is-team, .is-sorted, .is-emphasis
 * Column priority (hidden as viewport narrows): .col-p2, .col-p3
 */
.ayhl-table-wrap {
	position: relative;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--ayhl-gray-300) transparent;
}

/* Edge shadows when the table can scroll.
   Markup: .ayhl-table-scroll > .ayhl-table-wrap > table.
   theme.js toggles .can-scroll-left / .can-scroll-right. */
.ayhl-table-scroll {
	position: relative;
}

.ayhl-table-scroll::before,
.ayhl-table-scroll::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 3;
	width: 1.25rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--ayhl-duration) var(--ayhl-ease);
}

.ayhl-table-scroll::before {
	left: var(--ayhl-sticky-offset, 0);
	background: linear-gradient(90deg, rgba(8, 24, 52, 0.12), transparent);
}

.ayhl-table-scroll::after {
	right: 0;
	background: linear-gradient(-90deg, rgba(8, 24, 52, 0.12), transparent);
}

.ayhl-table-scroll.can-scroll-left::before,
.ayhl-table-scroll.can-scroll-right::after {
	opacity: 1;
}

.ayhl-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--ayhl-color-text);
	font-size: var(--ayhl-table-font-size);
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.ayhl-table caption {
	padding: 0 0 var(--ayhl-space-3);
	color: var(--ayhl-color-text-muted);
	font-size: var(--ayhl-text-sm);
	text-align: left;
}

.ayhl-table th,
.ayhl-table td {
	padding: var(--ayhl-table-cell-y) var(--ayhl-table-cell-x);
	border-bottom: 1px solid var(--ayhl-table-row-rule);
	text-align: left;
	vertical-align: middle;
}

.ayhl-table thead th {
	position: relative;
	padding-top: 0.8rem;
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--ayhl-table-head-rule);
	background: var(--ayhl-table-head-bg);
	color: var(--ayhl-table-head-color);
	font-family: var(--ayhl-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: var(--ayhl-tracking-caps);
	text-transform: uppercase;
	white-space: nowrap;
}

.ayhl-table tbody tr {
	transition: background-color var(--ayhl-duration-fast) var(--ayhl-ease);
}

.ayhl-table tbody tr:hover {
	background: var(--ayhl-table-row-hover);
}

.ayhl-table tbody tr:last-child > * {
	border-bottom: 0;
}

.ayhl-table tbody th {
	font-weight: 600;
}

.ayhl-table tfoot td,
.ayhl-table tfoot th {
	border-top: 2px solid var(--ayhl-color-border);
	border-bottom: 0;
	color: var(--ayhl-color-text-muted);
	font-size: var(--ayhl-text-sm);
	font-weight: 600;
}

/* Cell helpers */
.ayhl-table .is-num {
	text-align: center;
	white-space: nowrap;
}

.ayhl-table .is-rank {
	width: 2.5rem;
	color: var(--ayhl-color-text-subtle);
	font-size: var(--ayhl-text-sm);
	font-weight: 600;
	text-align: center;
}

.ayhl-table .is-team {
	min-width: 12rem;
}

.ayhl-table .is-emphasis {
	color: var(--ayhl-color-heading);
	font-weight: 700;
}

.ayhl-table .is-muted {
	color: var(--ayhl-color-text-subtle);
}

/* Sortable headers */
.ayhl-table th[aria-sort] {
	padding: 0;
}

.ayhl-sort {
	display: flex;
	align-items: center;
	justify-content: inherit;
	gap: 0.25rem;
	width: 100%;
	padding: 0.8rem var(--ayhl-table-cell-x) 0.7rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
}

.ayhl-table th.is-num .ayhl-sort {
	justify-content: center;
}

.ayhl-sort:hover {
	color: var(--ayhl-color-primary);
}

.ayhl-sort__icon {
	width: 0.7rem;
	height: 0.7rem;
	opacity: 0.35;
}

.ayhl-table th.is-sorted {
	color: var(--ayhl-color-primary);
}

.ayhl-table th.is-sorted::after {
	content: "";
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: -2px;
	height: 2px;
	background: var(--ayhl-color-accent);
}

.ayhl-table th.is-sorted .ayhl-sort__icon {
	opacity: 1;
}

.ayhl-table td.is-sorted {
	background: var(--ayhl-table-sorted-bg);
	color: var(--ayhl-color-heading);
	font-weight: 700;
}

/* Group header rows (e.g. division name inside a standings table) */
.ayhl-table tr.ayhl-table__group > * {
	padding-top: 1.1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--ayhl-color-border);
	background: var(--ayhl-color-surface);
	color: var(--ayhl-color-heading);
	font-family: var(--ayhl-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: var(--ayhl-tracking-caps);
	text-transform: uppercase;
}

.ayhl-table tr.ayhl-table__group:hover {
	background: transparent;
}

/* Highlighted row (e.g. "your team") */
.ayhl-table tr.is-highlighted > * {
	background: var(--ayhl-color-primary-tint);
}

.ayhl-table tr.is-highlighted > :first-child {
	box-shadow: inset 3px 0 0 var(--ayhl-color-primary);
}

/* Variants */
.ayhl-table--striped tbody tr:nth-child(even) {
	background: var(--ayhl-table-stripe);
}

.ayhl-table--striped tbody tr:nth-child(even):hover {
	background: var(--ayhl-table-row-hover);
}

.ayhl-table--compact {
	--ayhl-table-cell-y: 0.45rem;
	--ayhl-table-cell-x: 0.6rem;
	--ayhl-table-font-size: 0.875rem;
}

.ayhl-table--dark-head {
	--ayhl-table-head-bg: var(--ayhl-navy-900);
	--ayhl-table-head-color: rgba(255, 255, 255, 0.85);
	--ayhl-table-head-rule: var(--ayhl-color-accent);
}

.ayhl-table--dark-head th.is-sorted {
	color: #fff;
}

.ayhl-table--stats th,
.ayhl-table--stats td {
	white-space: nowrap;
}

/* Sticky first data column for wide stat tables */
.ayhl-table--sticky :is(th, td):first-child,
.ayhl-table--sticky :is(th, td).is-sticky {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--ayhl-table-sticky-bg);
}

.ayhl-table--sticky thead :is(th, td):first-child,
.ayhl-table--sticky thead .is-sticky {
	z-index: 4;
	background: var(--ayhl-table-head-bg);
}

.ayhl-table--sticky .is-sticky + .is-sticky {
	left: var(--ayhl-sticky-offset, 2.5rem);
}

.ayhl-table--sticky tbody tr:hover > .is-sticky,
.ayhl-table--sticky tbody tr:hover > :first-child {
	background: var(--ayhl-table-row-hover);
}

.ayhl-table--sticky tbody tr.is-highlighted > .is-sticky,
.ayhl-table--sticky tbody tr.is-highlighted > :first-child {
	background: var(--ayhl-color-primary-tint);
}

.ayhl-table thead abbr {
	text-decoration: none;
	cursor: help;
}

/* Column priority */
@media (max-width: 64rem) {
	.ayhl-table .col-p3 { display: none; }
}

@media (max-width: 40rem) {
	.ayhl-table .col-p2 { display: none; }

	.ayhl-table {
		--ayhl-table-cell-x: 0.55rem;
		--ayhl-table-font-size: 0.875rem;
	}

	.ayhl-table .is-team {
		min-width: 9.5rem;
	}
}

/* Legend under a stats table */
.ayhl-table-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: var(--ayhl-space-4) 0 0;
	padding: 0;
	color: var(--ayhl-color-text-subtle);
	font-size: var(--ayhl-text-xs);
	list-style: none;
}

.ayhl-table-legend abbr {
	color: var(--ayhl-color-text);
	font-weight: 700;
	text-decoration: none;
}

/* ============ 9. Tabs & segmented control ============ */
.ayhl-tabs__list {
	display: flex;
	gap: var(--ayhl-space-1);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--ayhl-color-border);
	list-style: none;
	scrollbar-width: none;
}

.ayhl-tabs__list::-webkit-scrollbar {
	display: none;
}

.ayhl-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.1rem 0.8rem;
	border: 0;
	background: transparent;
	color: var(--ayhl-color-text-muted);
	font-family: var(--ayhl-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: var(--ayhl-tracking-caps);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--ayhl-duration-fast) var(--ayhl-ease);
}

.ayhl-tab::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: -1px;
	height: 3px;
	background: transparent;
	transform: scaleX(0.4);
	transition: transform var(--ayhl-duration) var(--ayhl-ease), background-color var(--ayhl-duration) var(--ayhl-ease);
}

.ayhl-tab:hover {
	color: var(--ayhl-color-heading);
}

.ayhl-tab[aria-selected="true"],
.ayhl-tab.is-active,
.ayhl-tab[aria-current="page"] {
	color: var(--ayhl-color-heading);
}

.ayhl-tab[aria-selected="true"]::after,
.ayhl-tab.is-active::after,
.ayhl-tab[aria-current="page"]::after {
	background: var(--ayhl-color-accent);
	transform: scaleX(1);
}

.ayhl-tab .ayhl-badge {
	font-size: 0.6875rem;
}

.ayhl-tabs__panel {
	padding-top: var(--ayhl-space-6);
}

.ayhl-tabs__panel:focus-visible {
	outline-offset: 4px;
}

/* On dark surfaces */
.ayhl-tabs--on-dark .ayhl-tabs__list {
	border-bottom-color: var(--ayhl-color-border-on-dark);
}

.ayhl-tabs--on-dark .ayhl-tab {
	color: var(--ayhl-color-text-on-dark-muted);
}

.ayhl-tabs--on-dark .ayhl-tab:hover,
.ayhl-tabs--on-dark .ayhl-tab[aria-selected="true"],
.ayhl-tabs--on-dark .ayhl-tab.is-active {
	color: #fff;
}

/* Segmented control (secondary toggles: e.g. Regular Season / Playoffs) */
.ayhl-segmented {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--ayhl-radius-sm);
	background: var(--ayhl-gray-100);
	gap: 2px;
}

.ayhl-segmented__option {
	min-height: 2.125rem;
	padding: 0.35rem 0.95rem 0.3rem;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--ayhl-color-text-muted);
	font-family: var(--ayhl-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: var(--ayhl-tracking-caps);
	text-transform: uppercase;
	white-space: nowrap;
}

.ayhl-segmented__option:hover {
	color: var(--ayhl-color-heading);
}

.ayhl-segmented__option[aria-pressed="true"],
.ayhl-segmented__option.is-active {
	background: var(--ayhl-color-surface);
	box-shadow: var(--ayhl-shadow-sm);
	color: var(--ayhl-color-heading);
}

/* ============ 10. Forms & filter bar ============ */
.ayhl-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.ayhl-label {
	color: var(--ayhl-color-text-muted);
	font-family: var(--ayhl-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--ayhl-tracking-label);
	text-transform: uppercase;
}

.ayhl-help {
	margin: 0;
	color: var(--ayhl-color-text-subtle);
	font-size: var(--ayhl-text-xs);
}

.ayhl-input,
.ayhl-select,
.ayhl-textarea {
	width: 100%;
	min-height: var(--ayhl-control-height);
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--ayhl-color-border-strong);
	border-radius: var(--ayhl-radius-sm);
	background-color: var(--ayhl-color-surface);
	color: var(--ayhl-color-text);
	font-size: var(--ayhl-text-base);
	line-height: 1.4;
	transition: border-color var(--ayhl-duration-fast) var(--ayhl-ease), box-shadow var(--ayhl-duration-fast) var(--ayhl-ease);
}

.ayhl-input::placeholder,
.ayhl-textarea::placeholder {
	color: var(--ayhl-gray-400);
}

.ayhl-input:hover,
.ayhl-select:hover,
.ayhl-textarea:hover {
	border-color: var(--ayhl-gray-400);
}

.ayhl-input:focus,
.ayhl-select:focus,
.ayhl-textarea:focus {
	border-color: var(--ayhl-color-primary);
	outline: none;
	box-shadow: var(--ayhl-ring);
}

.ayhl-input[aria-invalid="true"] {
	border-color: var(--ayhl-color-danger);
}

.ayhl-select {
	padding-right: 2.5rem;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081834' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.8rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	cursor: pointer;
}

.ayhl-textarea {
	min-height: 8rem;
	resize: vertical;
}

.ayhl-input--sm,
.ayhl-select--sm {
	min-height: var(--ayhl-control-height-sm);
	padding-block: 0.35rem;
	font-size: var(--ayhl-text-sm);
}

.ayhl-input-group {
	position: relative;
	display: flex;
	align-items: center;
}

.ayhl-input-group > .ayhl-icon {
	position: absolute;
	left: 0.85rem;
	color: var(--ayhl-gray-500);
	pointer-events: none;
}

.ayhl-input-group > .ayhl-input {
	padding-left: 2.6rem;
}

.ayhl-check {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--ayhl-text-sm);
	font-weight: 500;
	cursor: pointer;
}

.ayhl-check input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--ayhl-color-primary);
}

/* Filter bar (data app context controls) */
.ayhl-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ayhl-space-4);
	padding: var(--ayhl-space-4) var(--ayhl-space-5);
	border: 1px solid var(--ayhl-color-border-subtle);
	border-radius: var(--ayhl-radius-md);
	background: var(--ayhl-color-surface);
	box-shadow: var(--ayhl-shadow-sm);
}

.ayhl-filter-bar .ayhl-field {
	flex: 1 1 11rem;
	max-width: 16rem;
}

.ayhl-filter-bar .ayhl-field--grow {
	flex: 2 1 14rem;
	max-width: none;
}

.ayhl-filter-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--ayhl-space-2);
	margin-left: auto;
}

@media (max-width: 40rem) {
	.ayhl-filter-bar .ayhl-field {
		flex-basis: 100%;
		max-width: none;
	}

	.ayhl-filter-bar__actions {
		width: 100%;
		margin-left: 0;
	}

	.ayhl-filter-bar__actions > * {
		flex: 1;
	}
}

/* ============ 11. Empty, notice, skeleton states ============ */
.ayhl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 32rem;
	margin-inline: auto;
	padding: var(--ayhl-space-12) var(--ayhl-space-6);
	text-align: center;
}

.ayhl-empty__icon {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--ayhl-space-5);
	border-radius: 50%;
	background: var(--ayhl-color-primary-tint);
	color: var(--ayhl-color-primary);
}

.ayhl-empty__icon .ayhl-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.ayhl-empty__title {
	margin: 0 0 var(--ayhl-space-2);
	font-size: var(--ayhl-text-xl);
	font-weight: 700;
}

.ayhl-empty__text {
	margin: 0 0 var(--ayhl-space-6);
	color: var(--ayhl-color-text-muted);
}

.ayhl-empty--boxed {
	max-width: none;
	border: 2px dashed var(--ayhl-color-border);
	border-radius: var(--ayhl-radius-md);
	background: var(--ayhl-color-surface-alt);
}

.ayhl-notice {
	display: flex;
	gap: var(--ayhl-space-3);
	padding: var(--ayhl-space-4) var(--ayhl-space-5);
	border-left: 4px solid var(--ayhl-color-info);
	border-radius: var(--ayhl-radius-sm);
	background: var(--ayhl-color-primary-tint);
	color: var(--ayhl-color-text);
	font-size: var(--ayhl-text-sm);
}

.ayhl-notice > .ayhl-icon {
	margin-top: 0.1rem;
	color: var(--ayhl-color-info);
}

.ayhl-notice p { margin: 0; }
.ayhl-notice strong { color: var(--ayhl-color-heading); }

.ayhl-notice--warning { border-color: var(--ayhl-color-warning); background: #fdf5e9; }
.ayhl-notice--warning > .ayhl-icon { color: var(--ayhl-color-warning); }
.ayhl-notice--danger { border-color: var(--ayhl-color-danger); background: var(--ayhl-color-accent-tint); }
.ayhl-notice--danger > .ayhl-icon { color: var(--ayhl-color-danger); }

.ayhl-skeleton {
	display: block;
	height: 0.85rem;
	border-radius: var(--ayhl-radius-xs);
	background: linear-gradient(90deg, var(--ayhl-gray-100) 0%, var(--ayhl-gray-50) 50%, var(--ayhl-gray-100) 100%);
	background-size: 200% 100%;
	animation: ayhl-shimmer 1.4s linear infinite;
}

.ayhl-skeleton--circle {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
}

@keyframes ayhl-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ============ 12. Breadcrumbs ============ */
.ayhl-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ayhl-text-xs);
	font-weight: 600;
	letter-spacing: var(--ayhl-tracking-caps);
	text-transform: uppercase;
}

.ayhl-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ayhl-color-text-subtle);
}

.ayhl-breadcrumbs li + li::before {
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	opacity: 0.6;
	transform: rotate(45deg);
}

.ayhl-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.ayhl-breadcrumbs a:hover {
	color: var(--ayhl-color-primary);
	text-decoration: underline;
}

.ayhl-breadcrumbs [aria-current="page"] {
	color: var(--ayhl-color-text);
}

/* ============ 13. Pagination ============ */
.ayhl-pagination {
	margin-top: var(--ayhl-space-12);
}

.ayhl-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ayhl-space-2);
}

.ayhl-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.85rem;
	border: 1px solid var(--ayhl-color-border);
	border-radius: var(--ayhl-radius-sm);
	background: var(--ayhl-color-surface);
	color: var(--ayhl-color-heading);
	font-family: var(--ayhl-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.ayhl-pagination a.page-numbers:hover {
	border-color: var(--ayhl-color-primary);
	color: var(--ayhl-color-primary);
}

.ayhl-pagination .page-numbers.current {
	border-color: var(--ayhl-navy-900);
	background: var(--ayhl-navy-900);
	color: #fff;
}

.ayhl-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ============ 14. Game row (schedule / scores) ============ */
.ayhl-game-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ayhl-game-day {
	padding: var(--ayhl-space-5) 0 var(--ayhl-space-2);
	color: var(--ayhl-color-heading);
	font-family: var(--ayhl-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: var(--ayhl-tracking-caps);
	text-transform: uppercase;
}

.ayhl-game {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 12rem) auto;
	align-items: center;
	gap: var(--ayhl-space-4);
	padding: var(--ayhl-space-4) var(--ayhl-space-5);
	border: 1px solid var(--ayhl-color-border-subtle);
	border-radius: var(--ayhl-radius-md);
	background: var(--ayhl-color-surface);
}

.ayhl-game + .ayhl-game {
	margin-top: var(--ayhl-space-2);
}

.ayhl-game__time {
	color: var(--ayhl-color-text-muted);
	font-size: var(--ayhl-text-sm);
	font-weight: 600;
}

.ayhl-game__team--home {
	justify-content: flex-end;
	text-align: right;
}

.ayhl-game__team--home .ayhl-team {
	flex-direction: row-reverse;
}

.ayhl-game__score {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0.75rem;
	border-radius: var(--ayhl-radius-sm);
	background: var(--ayhl-gray-50);
	color: var(--ayhl-color-heading);
	font-family: var(--ayhl-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.ayhl-game__score span:nth-child(2) {
	color: var(--ayhl-gray-400);
	font-size: 0.9rem;
}

.ayhl-game__venue {
	overflow: hidden;
	color: var(--ayhl-color-text-muted);
	font-size: var(--ayhl-text-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 56rem) {
	.ayhl-game {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: var(--ayhl-space-2) var(--ayhl-space-3);
		padding: var(--ayhl-space-4);
	}

	.ayhl-game__time {
		grid-column: 1 / -1;
		display: flex;
		justify-content: space-between;
	}

	.ayhl-game__venue,
	.ayhl-game__action {
		grid-column: 1 / -1;
	}

	.ayhl-game__action {
		justify-self: start;
	}
}