@layer components {
	/* ---- Dark page head: reused by schedule, sport and archive pages ---- */
	.page-head { background: var(--black); color: var(--white-text); border-bottom: var(--nav-rule) solid var(--red); }
	.page-head__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5) var(--sp-7); padding-block: var(--sp-6) var(--sp-6); }
	.page-head__kicker { color: var(--red); }
	.page-head__title { margin-top: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-tight); text-transform: uppercase; }
	.page-head__stats { display: flex; gap: var(--sp-6); }
	.stat { display: flex; flex-direction: column; gap: 2px; color: var(--white-text); }
	.stat__label { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-dark-muted); }
	.stat__value { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; letter-spacing: var(--ls-tight); }
	.stat__value--sm { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: var(--fw-extra); text-transform: uppercase; }
	.stat__sub { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-dark-muted); }
	.stat--link { border-left: var(--bw-accent) solid var(--red); padding-left: var(--sp-4); }

	/* ---- Filter bar ---- */
	.filters { background: var(--white); border-bottom: var(--bw-hair) solid var(--gray-line); box-shadow: var(--shadow-card); position: relative; z-index: 1; }
	.filters__row { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--sp-3); }
	.filters__row::-webkit-scrollbar { display: none; }
	.filters__row--sports { border-bottom: var(--bw-hair) solid var(--gray-line); }
	.filters__row--meta { gap: var(--sp-5); }
	.filters__set { display: flex; align-items: center; gap: 6px; flex: none; }
	.filters__label { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-meta); margin-right: 4px; }

	.chip {
		display: inline-flex; align-items: center; flex: none;
		height: 36px; padding: 0 16px;
		font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-ui); text-transform: uppercase; white-space: nowrap;
		color: var(--gray-ink); border: var(--bw-hair) solid var(--gray-line); background: var(--white-card);
		transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	}
	.chip:hover { border-color: var(--gray-ink); }
	.chip.is-active { background: var(--black); border-color: var(--black); color: var(--white-text); }
	.chip--sm { height: 30px; padding: 0 12px; font-size: var(--fs-micro); }
	.chip--sm.is-active { background: var(--red); border-color: var(--red); }

	/* ---- Schedule lists ---- */
	.schedule { padding-block: var(--sp-6) var(--sp-9); }
	.schedule__group + .schedule__group { margin-top: var(--sp-7); }
	.schedule__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
	.schedule__month { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-h3); letter-spacing: 0.02em; text-transform: uppercase; padding-bottom: var(--sp-3); border-bottom: var(--bw-accent) solid var(--gray-ink); margin-bottom: var(--sp-4); }
	.schedule__group-head .schedule__month { flex: 1; }
	.schedule__group-head .textlink { margin-bottom: var(--sp-4); }
	.schedule__list { display: grid; gap: var(--sp-2); }
	.schedule__empty { font-family: var(--font-serif); color: var(--gray-body); }

	.game-row { background: var(--white-card); border: var(--bw-hair) solid var(--gray-line); box-shadow: var(--shadow-card); }
	.game-row__link {
		display: grid;
		grid-template-columns: 56px 44px 1fr auto 24px;
		grid-template-areas: "date logo main status arrow" "date logo tags status arrow";
		align-items: center;
		column-gap: var(--sp-4);
		row-gap: 6px;
		padding: var(--sp-4);
		color: var(--gray-ink);
		transition: background-color var(--dur) var(--ease);
	}
	.game-row__link:hover { background: #fff; }
	.game-row__date { grid-area: date; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-right: var(--bw-hair) solid var(--gray-line); padding-right: var(--sp-3); align-self: stretch; }
	.game-row__day { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.75rem; line-height: 1; color: var(--red); }
	.game-row__dow { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); margin-top: 2px; white-space: nowrap; }
	.game-row__logo { grid-area: logo; width: 44px; height: 44px; display: grid; place-items: center; }
	.game-row__logo-img { width: 100%; height: 100%; object-fit: contain; }
	.game-row__logo-empty { width: 36px; height: 36px; border: var(--bw-hair) solid var(--gray-line); }
	.game-row__main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
	.game-row__opponent { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; }
	.game-row__opponent em { font-weight: var(--fw-medium); text-transform: lowercase; color: var(--gray-body); }
	.game-row__sub { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); }
	.game-row__dot { margin-inline: 6px; color: var(--gray-line); }
	.game-row__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; }
	.game-row__tags:empty { display: none; }
	.tag { display: inline-block; padding: 3px 8px 2px; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-ui); text-transform: uppercase; background: var(--gray-section); color: var(--gray-body); }
	.game-row__status { grid-area: status; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; min-width: 88px; }
	.game-row__result { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.75rem; line-height: 1; }
	.game-row__result--w { color: var(--red); }
	.game-row__result--l { color: var(--gray-meta); }
	.game-row__result--t { color: var(--gray-body); }
	.game-row__result--live { color: var(--red); font-size: 1.125rem; letter-spacing: var(--ls-ui); text-transform: uppercase; }
	.game-row__score, .game-row__time { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.125rem; line-height: 1.1; }
	.game-row__when, .game-row__off { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); margin-top: 3px; }
	.game-row__off { color: var(--red); font-size: var(--fs-label); font-weight: var(--fw-bold); }
	.game-row--off .game-row__opponent { color: var(--gray-meta); }
	.game-row__arrow { grid-area: arrow; color: var(--gray-meta); display: grid; place-items: center; }
	.game-row__arrow .icon { width: 20px; height: 20px; }

	@media (max-width: 767px) {
		.game-row__link { grid-template-columns: 48px 1fr auto; grid-template-areas: "date main status" "date tags status"; column-gap: var(--sp-3); padding: var(--sp-3); }
		.game-row__logo, .game-row__arrow { display: none; }
		.game-row__day { font-size: 1.5rem; }
		.game-row__status { min-width: 64px; }
		.game-row__result { font-size: 1.5rem; }
	}
	@media (min-width: 1024px) {
		.game-row__link { grid-template-columns: 64px 48px 1fr auto 120px 24px; grid-template-areas: "date logo main tags status arrow"; column-gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
		.game-row__logo { width: 48px; height: 48px; }
		.game-row__tags { justify-content: flex-end; }
	}
}