/*
Theme Name: LeagueOS Default
Theme URI: https://github.com/PlayFieldMultiplier/LeagueOS
Author: PlayFieldMultiplier
Author URI: https://github.com/PlayFieldMultiplier
Description: Default WordPress theme for LeagueOS instances. Renders SNP league specifications with responsive design optimized for mobile venue displays.
Version: 0.0.8
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: league-os
Domain Path: /languages
Requires at least: 5.9
Requires PHP: 7.4
Tags: sports, league, responsive, mobile-first

== Description ==

LeagueOS Default Theme for Sunday Night Pinball and League Instances

This theme provides the primary user interface for league-os plugin instances.
It renders the SNP (Sunday Night Pinball) specification, displaying matches,
standings, teams, venues, and committee workflows with role-based visibility.

Features:
- Mobile-first responsive design (375px+)
- Landscape orientation support for pinball machine displays
- Role-based dashboards (captain, player, commissioner, tech admin)
- Match workflow display (pre-game gates, results, approval)
- Team and player pages with roster integration
- Committee page hierarchy with topic organization
- Standings with division sorting and head-to-head tracking
- Native WordPress page hierarchy (no custom post types)

The theme works exclusively with the league-os plugin. It provides a thin
rendering layer over the plugin's data model, querying via native WordPress
functions and league-os helpers.

== Changelog ==

= 0.0.1 =
- Initial MVP release
- Theme scaffolding and activation
- Basic WordPress page templates
- Responsive mobile design foundation
- Prepared for content layers (matches, standings, dashboards)

== License ==

LeagueOS Default Theme is licensed under the GNU General Public License v2 or later.
This program is free software; you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation; either version 2 of the License, or (at your option) any later version.
*/

/* ==========================================================================
   Normalize and Base Styles
   ========================================================================== */

:root {
	--color-primary: #1e5ba8;
	--color-secondary: #f39c12;
	--color-success: #27ae60;
	--color-danger: #e74c3c;
	--color-warning: #f39c12;
	--color-info: #3498db;
	--color-dark: #2c3e50;
	--color-light: #ecf0f1;
	--color-text: #2c3e50;
	--color-border: #bdc3c7;
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.5;
	--breakpoint-mobile: 375px;
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1024px;

	/* Real visual identity, ported from the reference theme
	   (pfm-wordpress themes/leagueos/style.css) per LeagueOS#167. These
	   are the actual retro-pinball palette used on staging.
	   sundaynightpinball.org -- not a redesign, a port of the real,
	   existing design tokens onto our own real component structure. */
	--pdx-bg: #f7f3ea;
	--pdx-ink: #171412;
	--pdx-muted: #5e5852;
	--pdx-red: #bf1f2f;
	--pdx-blue: #1f6fbf;
	--pdx-yellow: #f2c94c;
	--pdx-green: #1fbf3f;

	/* Real fix, 2026-09-13, Victor direct: the team deck colors used on
	   roster cards (.roster-card--*) and now also on the match card's
	   team title bars (.team-title-bar--*) -- named tokens here so both
	   components draw from one real source instead of drifting apart. */
	--deck-red: #bf1f2f;
	--deck-blue: #1f6fbf;
	--deck-green: #19733c;
	--deck-purple: #7a43c6;
	--deck-gold: #d6a928;
	--deck-teal: #168f9c;
	--deck-orange: #d97426;
	--pdx-cyan: #19b7c9;
	--pdx-magenta: #d94f9d;
	--pdx-panel: #fffdf8;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: var(--font-size-base);
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family);
	font-size: 1rem;
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: #fff;
}

/* ==========================================================================
   Site Chrome (Header, Footer, Navigation)
   Real visual identity ported from the reference theme (LeagueOS#167) --
   this was a genuine gap, not a redesign: header/footer/nav had zero
   custom styling before this (confirmed directly, grep against the
   existing file found no .site-header/.site-footer/.primary-navigation
   rules at all). Uses our own real markup class names throughout
   (site-header, site-branding, primary-navigation, site-footer, etc. --
   confirmed against header.php/footer.php), not the reference's selector
   names, since our markup structure differs even though the visual
   identity is the same real design.
   ========================================================================== */

.container {
	margin: 0 auto;
	max-width: 1120px;
	padding: 0 18px;
}

.site-header {
	background: var(--pdx-ink);
	color: #fff;
	padding: 22px 0;
}

.league-os-view-as-banner {
	background: #fff3cd;
	border-bottom: 2px solid #8a6500;
	color: #2b2100;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 8px 18px;
	text-align: center;
}

.site-branding {
	align-items: center;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	flex-wrap: wrap;
}

.site-identity {
	color: #fff;
	font-size: 1.55rem;
	font-weight: 900;
	line-height: 1;
}

.site-description {
	color: #f4df95;
	font-size: 0.95rem;
	font-weight: 400;
	margin: 8px 0 0;
}

.primary-navigation {
	margin-top: 18px;
}

.primary-menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.primary-menu li {
	list-style: none;
	margin: 0;
}

.primary-menu a,
.primary-menu button {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.24);
	border-radius: 6px;
	color: #fff;
	display: inline-flex;
	font-weight: 800;
	min-height: 42px;
	padding: 9px 12px;
	text-decoration: none;
	white-space: nowrap;
}

.primary-menu button {
	cursor: pointer;
	font-family: inherit;
}

.primary-menu a:hover,
.primary-menu a:focus-visible,
.primary-menu button:hover,
.primary-menu button:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--pdx-yellow);
}

.primary-menu .current_page_item > a,
.primary-menu .current-menu-item > a {
	text-decoration: underline dotted var(--pdx-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* Priority-menu behavior is shared with the accepted SNP menu implementation. */
.primary-navigation.js-nav-enhanced .primary-menu > .menu-item-has-children:not(.pq-overflow-item) > .sub-menu,
.primary-navigation.js-nav-enhanced .primary-menu > .pq-overflow-item > .pq-overflow-menu {
	display: none !important;
	pointer-events: none;
	visibility: hidden;
}

.primary-navigation.js-nav-enhanced .primary-menu > .menu-item-has-children.menu-open > .sub-menu,
.primary-navigation.js-nav-enhanced .primary-menu .menu-item-has-children.menu-open > .sub-menu,
.primary-navigation.js-nav-enhanced .primary-menu > .pq-overflow-item.pq-open > .pq-overflow-menu {
	display: flex !important;
	pointer-events: auto;
	visibility: visible;
}

.primary-menu .sub-menu > .menu-item-has-children {
	display: flex;
	position: relative;
}

.primary-menu .sub-menu .menu-item-has-children > a:not(.pq-overflow-trigger) {
	border-radius: 6px 0 0 6px;
	flex: 1 1 auto;
}

.primary-menu .sub-menu .menu-item-has-children > .pq-submenu-toggle {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0 6px 6px 0;
	color: #fff;
	justify-content: center;
	min-width: 40px;
	padding-inline: 9px;
}

.primary-menu .pq-submenu-chevron {
	display: inline-block;
	font-size: .75em;
	line-height: 1;
	text-align: center;
	transform-origin: center;
	width: 1em;
}

.primary-menu .pq-submenu-toggle[aria-expanded="true"] .pq-submenu-chevron {
	transform: rotate(180deg);
}

.primary-menu > .menu-item-has-children > a::after,
.primary-menu .pq-overflow-menu > .menu-item-has-children > a::after {
	content: "\25BE";
	display: inline-block;
	font-size: 0.75em;
	line-height: 1;
	margin-left: 8px;
	transform-origin: center;
}

.primary-menu > .menu-item-has-children > a[aria-expanded="true"]::after,
.primary-menu .pq-overflow-menu > .menu-item-has-children > a[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.primary-menu .menu-item-has-children > .sub-menu,
.primary-menu .pq-overflow-menu {
	background: var(--pdx-ink);
	border: 2px solid var(--pdx-yellow);
	border-radius: 6px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.28);
	display: none;
	flex-direction: column;
	gap: 6px;
	left: 0;
	list-style: none;
	margin: 0;
	max-width: calc(100vw - 36px);
	min-width: max-content;
	padding: 8px;
	position: absolute;
	top: calc(100% + 6px);
	z-index: 20;
}

.primary-menu .sub-menu a,
.primary-menu .pq-overflow-menu a,
.primary-menu .sub-menu button,
.primary-menu .pq-overflow-menu button {
	justify-content: flex-start;
	width: 100%;
}

.primary-menu .sub-menu > .menu-item-has-children > .pq-submenu-toggle {
	align-self: stretch;
	min-height: 42px;
}

.primary-menu .sub-menu .menu-item-has-children > .sub-menu {
	left: calc(100% + 6px);
	top: -8px;
}

.primary-menu .pq-segmented-item {
	display: flex;
	min-width: 220px;
}

.primary-menu .pq-segmented-item > .pq-topic-link {
	flex: 1 1 auto;
	border-radius: 6px 0 0 6px;
	border-right: 0;
}

.primary-menu .pq-segmented-item > .pq-topic-link:visited,
.primary-menu .pq-segmented-item > .pq-committee-link:visited {
	color: #fff;
}

.primary-menu .pq-segmented-item > .pq-committee-link {
	align-items: center;
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	justify-content: center;
	min-width: 44px;
	padding-inline: 10px;
	border-radius: 0 6px 6px 0;
	width: 44px;
}

.primary-menu .pq-segmented-item > .pq-topic-link:hover,
.primary-menu .pq-segmented-item > .pq-topic-link:focus-visible,
.primary-menu .pq-segmented-item > .pq-committee-link:hover,
.primary-menu .pq-segmented-item > .pq-committee-link:focus-visible,
.primary-menu .sub-menu .menu-item-has-children > a:hover,
.primary-menu .sub-menu .menu-item-has-children > a:focus-visible,
.primary-menu .sub-menu .menu-item-has-children > .pq-submenu-toggle:hover,
.primary-menu .sub-menu .menu-item-has-children > .pq-submenu-toggle:focus-visible {
	border-color: var(--pdx-yellow);
	box-shadow: inset 0 0 0 1px var(--pdx-yellow);
}

.primary-menu .pq-segmented-item > .pq-committee-link .screen-reader-text {
	position: absolute;
}

.primary-menu .pq-overflow-item {
	margin-left: auto;
}

.primary-menu .pq-overflow-trigger {
	min-width: 48px;
}

.primary-menu .pq-overflow-dots {
	letter-spacing: 0.12em;
}

.primary-menu .pq-overflow-menu,
.primary-menu .pq-overflow-item.pq-open > .pq-overflow-menu {
	left: auto;
	right: 0;
}

.site-main {
	padding: 38px 0 56px;
}

.home-intro {
	margin-bottom: 28px;
}

.season-status-bar {
	align-items: baseline;
	background: var(--pdx-panel);
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 6px 6px 0 var(--pdx-yellow);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	padding: 14px 18px;
}

.season-status-label {
	color: var(--pdx-blue);
	font-size: 1.2rem;
}

.season-status-season {
	font-weight: 800;
}

.season-status-detail {
	color: var(--pdx-muted);
}

.season-status-during-season .season-status-label {
	color: var(--pdx-green, #19733c);
}

.season-status-post-season .season-status-label {
	color: var(--pdx-red);
}

.home-intro .page-title {
	margin-bottom: 6px;
}

.eyebrow {
	color: var(--pdx-red);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.home-section {
	margin: 0 0 42px;
}

.section-heading {
	align-items: baseline;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.section-heading h2,
.home-links-section h2 {
	font-size: clamp(1.45rem, 3vw, 2rem);
	margin: 0;
}

.section-heading a {
	font-weight: 800;
	white-space: nowrap;
}

.home-match-list {
	display: grid;
	gap: 18px;
}

.home-resource-grid,
.home-link-columns {
	display: grid;
	gap: 18px;
}

.summary-panel {
	background: var(--pdx-panel);
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 6px 6px 0 var(--pdx-yellow);
	display: flex;
	flex-direction: column;
	padding: 18px;
}

.summary-panel h3 {
	font-size: 1.15rem;
	margin: 0 0 8px;
}

.summary-panel strong {
	color: var(--pdx-blue);
	font-size: 2rem;
	line-height: 1;
}

.summary-panel span {
	color: var(--pdx-muted);
	font-size: 0.9rem;
	margin-top: 6px;
}

.home-link-columns > div {
	border-top: 3px solid var(--pdx-ink);
	padding-top: 12px;
}

.home-link-columns h3 {
	margin: 0 0 8px;
}

.home-link-columns ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-link-columns li + li {
	margin-top: 5px;
}

.empty-state {
	background: var(--pdx-panel);
	border-left: 4px solid var(--pdx-yellow);
	margin: 0;
	padding: 12px 16px;
}

.resource-window {
	background: var(--pdx-panel);
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 8px 8px 0 var(--pdx-magenta);
	overflow: hidden;
	padding: 0;
}

.resource-window .page-header {
	background: var(--pdx-ink);
	border-bottom: 3px solid var(--pdx-ink);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: clamp(18px, 3vw, 32px);
	padding-bottom: 14px;
}

.resource-header-top {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.resource-header-copy {
	min-width: 0;
}

.resource-window .page-title {
	color: #fff;
	margin: 0;
}

.resource-window .page-subtitle {
	color: #f4df95;
	margin: 0;
}

/* Resource windows use one inset body region while their title bar sits in
   the outer frame, like the accepted match-card header. */
.resource-window > .page-header ~ * {
	margin-left: clamp(18px, 3vw, 32px);
	margin-right: clamp(18px, 3vw, 32px);
}

.resource-window > .page-header ~ :last-child {
	margin-bottom: clamp(18px, 3vw, 32px);
}

.resource-window > .page-header ~ .resource-window-body {
	margin: 0;
}

.resource-window-body {
	padding: clamp(18px, 3vw, 32px);
}

/* Grid-based archive panels override the browser's UA [hidden] rule unless
   the visibility contract is explicit. */
.resource-window .archive-view-panel[hidden] {
	display: none !important;
}

.resource-tabs {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	justify-content: flex-end;
	margin: 0;
	max-width: 100%;
	overflow-x: auto;
}

.resource-view-tabs {
	display: inline-flex;
	flex: 0 0 auto;
}

.resource-tab {
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.38);
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	padding: 8px 14px;
	text-decoration: none;
}

.resource-view-tabs .resource-tab {
	border-radius: 0;
}

.resource-view-tabs .resource-tab:first-child {
	border-radius: 6px 0 0 6px;
}

.resource-view-tabs .resource-tab:last-child {
	border-radius: 0 6px 6px 0;
}

.resource-view-tabs .resource-tab + .resource-tab {
	margin-left: -2px;
}

.resource-tab:hover,
.resource-tab:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--pdx-yellow);
	color: #fff;
	position: relative;
	z-index: 1;
}

.resource-tab.is-active,
.resource-tab[aria-selected="true"] {
	background: var(--pdx-yellow);
	border-color: var(--pdx-yellow);
	color: var(--pdx-ink);
	position: relative;
	z-index: 1;
}

/* A false ARIA state must win over any stale server-rendered active class. */
.resource-tab[aria-selected="false"] {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.38);
	color: #fff;
}

.resource-sort-toggle {
	align-items: center;
	background: var(--pdx-yellow);
	border: 2px solid var(--pdx-yellow);
	border-radius: 6px;
	color: var(--pdx-ink);
	display: inline-flex;
	font-size: .82rem;
	font-weight: 900;
	justify-content: center;
	min-height: 40px;
	min-width: 52px;
	padding: 7px 10px;
	text-decoration: none;
	white-space: nowrap;
}

.resource-sort-toggle:hover,
.resource-sort-toggle:focus-visible {
	background: #fff;
	border-color: var(--pdx-yellow);
	color: var(--pdx-ink);
	text-decoration: none;
}

@media screen and (max-width: 767px) {
	.resource-window .page-header {
		padding-left: 9px;
		padding-right: 9px;
	}

	.resource-header-top {
		gap: 4px;
	}

	.resource-window .resource-tabs {
		max-width: calc(100vw - 100px);
		gap: 4px;
	}

	.resource-window .resource-tab {
		padding: 6px 8px;
	}

	.resource-window .resource-sort-toggle {
		min-width: 44px;
		padding: 6px 7px;
	}
}

.week-tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	overflow-x: auto;
	padding: 3px 3px 10px;
}

.week-tab {
	background: rgba(23, 20, 18, 0.08);
	border: 2px solid rgba(23, 20, 18, 0.38);
	border-radius: 6px;
	color: var(--pdx-ink);
	font-weight: 800;
	min-height: 44px;
	padding: 9px 14px;
	text-decoration: none;
	white-space: nowrap;
}

.week-tab:hover,
.week-tab:focus-visible,
.week-tab.is-active {
	background: var(--pdx-ink);
	border-color: var(--pdx-yellow);
	color: #fff;
}

.site-main .container > article.hentry {
	background: var(--pdx-panel);
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 8px 8px 0 var(--pdx-cyan);
	padding: clamp(22px, 4vw, 42px);
}

.site-main .container > article.hentry {
	transition: box-shadow .2s ease;
}

.site-main .container > article.hentry:hover,
.site-main .container > article.hentry:focus-within {
	box-shadow: 8px 8px 0 var(--pdx-magenta);
}

.site-main .container > article.team-detail-entry {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.site-main .container > article.team-detail-entry:hover,
.site-main .container > article.team-detail-entry:focus-within {
	box-shadow: none;
}

.resource-window {
	transition: box-shadow .2s ease;
}

.resource-window:hover,
.resource-window:focus-within {
	box-shadow: 8px 8px 0 var(--pdx-yellow);
}

.season-status-bar,
.summary-panel {
	transition: box-shadow .2s ease;
}

.season-status-bar:hover,
.season-status-bar:focus-within,
.summary-panel:hover,
.summary-panel:focus-within {
	box-shadow: 6px 6px 0 var(--pdx-cyan);
}

.site-main .entry-title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05;
	margin: 0 0 22px;
}

.site-footer {
	background: var(--pdx-ink);
	color: #fff;
	padding: 22px 0;
}

.site-footer .footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.site-footer .footer-menu a {
	color: #f4df95;
	text-decoration: none;
}

.site-footer .footer-menu a:hover,
.site-footer .footer-menu a:focus-visible {
	color: var(--pdx-yellow);
}

.site-footer .site-info p {
	margin: 0 0 6px;
}

.site-footer .site-info a {
	color: var(--pdx-yellow);
}

.skip-link {
	background: var(--pdx-ink);
	color: #fff;
	left: 0;
	padding: 10px 16px;
	position: absolute;
	top: -100px;
	transition: top 0.15s ease;
	z-index: 1000;
}

.skip-link:focus {
	top: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.75rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.1rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin-bottom: 1rem;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-secondary);
	text-decoration: underline;
}

/* ==========================================================================
   Layout and Components
   ========================================================================== */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: var(--color-primary);
	color: white;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
	border: none;
}

.button:hover {
	background-color: var(--color-secondary);
	color: white;
	text-decoration: none;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile-first (375px+) */
@media screen and (max-width: 767px) {
	body {
		font-size: 0.95rem;
	}

	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.35rem;
	}

	.container {
		padding: 0 0.75rem;
	}
}

/* Tablet (768px+) */
@media screen and (min-width: 768px) {
	body {
		font-size: 1rem;
	}

	.container {
		padding: 0 1.5rem;
	}
}

/* Desktop (1024px+) */
@media screen and (min-width: 1024px) {
	.container {
		padding: 0 2rem;
	}
}

/* Landscape orientation (pinball machine displays) */
@media screen and (orientation: landscape) and (max-height: 500px) {
	h1, h2 {
		margin-top: 0.5rem;
		margin-bottom: 0.25rem;
	}

	body {
		line-height: 1.3;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	display: block;
	padding: 0.5rem;
	background-color: var(--color-primary);
	color: white;
}

/* ==========================================================================
   Component-Specific Responsive Styles
   ========================================================================== */

/* Tables (Standings, match results) */
.standings-table-wrap {
	overflow-x: auto;
}

.standings-table,
.results-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

/* Real fix, 2026-09-13, Victor direct: "a numeric rank which is the sort
   asc or desc order" -- a CSS counter renumbers the rank column from
   whatever order the real <tr> rows end up in after assets/sort-toggle.js
   reorders them, instead of a server-rendered number that would go stale
   the moment the client-side sort actually runs. */
.standings-table tbody {
	counter-reset: standings-rank;
}

.standings-table tbody tr {
	counter-increment: standings-rank;
}

.standings-table td.rank::before {
	content: counter(standings-rank);
}

.standings-table th,
.standings-table td,
.results-table th,
.results-table td {
	padding: 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.standings-table th {
	background-color: var(--color-light);
	font-weight: 600;
	color: var(--color-text);
}

@media screen and (max-width: 767px) {
	.standings-table,
	.results-table {
		font-size: 0.85rem;
	}

	.standings-table th,
	.standings-table td,
	.results-table th,
	.results-table td {
		padding: 0.5rem;
	}

	.standings-table {
		overflow-x: auto;
		display: block;
	}
}

/* Cards and Grids */
.team-card,
.venue-card,
.topic-card,
.division-card,
.match-card,
.player-card,
.captain-card,
.commissioner-card,
.admin-card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 6px 6px 0 var(--pdx-yellow);
	transition: box-shadow 0.2s ease;
}

.match-card {
	background: #fff;
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 6px 6px 0 var(--pdx-yellow);
	overflow: hidden;
	padding: 0;
}

.match-card .match-header,
.match-card .match-teams,
.match-card .match-action {
	position: relative;
}

.match-card .match-header {
	align-items: center;
	background: var(--pdx-ink);
	color: #fff;
	display: grid;
	gap: 10px;
	/* Leading auto track is the week keycap -- optional, present as a real
	   grid item only when the match has a real week number, so it simply
	   collapses to nothing when absent. */
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	min-height: 58px;
	padding: 10px 12px;
}

.match-card .match-week-badge {
	font-size: 1.1rem;
	line-height: 1;
}

.match-card .match-time {
	font-size: .85rem;
	font-weight: 800;
	white-space: nowrap;
}

.match-card .match-title {
	font-size: 1rem;
	line-height: 1.2;
	margin: 0;
	min-width: 0;
	text-align: center;
}

.match-card .match-title-match,
.match-card .match-status-icon {
	color: #fff;
	text-decoration: none;
}

.match-card .match-title-match {
	display: block;
	overflow-wrap: anywhere;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.match-card .match-title-match span {
	color: var(--pdx-yellow);
	display: inline-block;
	padding: 0 4px;
	text-decoration: none;
}

.match-card .match-footer-location {
	/* Real fix, 2026-09-13, Victor direct: match the "View Match" button's
	   real rendered text size (.button's font-size: 1rem, set later in this
	   file at the touch-target rule) instead of the smaller size the venue
	   pin used when it lived in the cramped header. */
	align-items: center;
	display: flex;
	font-size: 1rem;
	gap: 4px;
	min-width: 0;
}

.match-card .match-footer-location a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.match-card .match-footer-location a:hover,
.match-card .match-footer-location a:focus-visible,
.match-card .match-title-match:hover,
.match-card .match-title-match:focus-visible {
	text-decoration: none;
}

.match-card .match-status-icon {
	align-items: center;
	border-left: 1px solid rgba(255, 255, 255, .4);
	display: flex;
	font-size: 1.1rem;
	justify-content: center;
	min-height: 36px;
	min-width: 36px;
	padding-left: 10px;
}

.match-card-body {
	background: #fff;
	padding: 16px;
}

.match-card-footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: 16px;
}

.match-card .match-venue,
.match-card .team-full-name {
	font-weight: 800;
}

.match-teams {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
}

/* Real fix, 2026-09-13, Victor direct: at 420px the away/home team name
   was breaking mid-word ("Belm-ont Ping Pong Team") -- side-by-side, each
   box only gets roughly half the card's width, and the full-height score
   panel eats a large share of that. Stacking away above home (DOM order
   is already away, vs, home, so this is a pure layout change) gives the
   name a full-width row to wrap at real word boundaries instead. */
@media (max-width: 440px) {
	.match-teams {
		grid-template-columns: 1fr;
	}

	.match-vs {
		padding: 2px 0;
		text-align: center;
	}
}

.match-teams .team {
	background: rgba(255, 255, 255, .45);
	border: 2px solid rgba(23, 20, 18, .28);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* The title bar and score panel below both run flush to this box's
	   edges -- clipping to this radius (rather than giving them their own)
	   keeps outer corners rounded to match without rounding the inner ones
	   that butt against the rest of the box. */
	overflow: hidden;
}

/* Real fix, 2026-09-13, Victor direct: away/home cards swapped in the
   markup (away now sits in the left grid column, home in the right, to
   match the "Away@Home" title order) -- this alignment rule follows the
   card that is now visually on the right, not the away/home label. */
.match-teams .team-home {
	text-align: right;
}

/* Real fix, 2026-09-13, Victor direct: away and home now always render
   from the same shared partial (content-match-team-box.php) regardless of
   score state -- .team-info/.team-side (the label-stacked-above-name,
   no-title-bar layout) no longer exist; dead rules removed. */

.team-full-name {
	font-size: .8rem;
	font-weight: 700;
}

/* Real fix, 2026-09-13, Victor direct: once a score exists, the away/home
   label becomes its own title bar crossing above BOTH the name and the
   score, instead of sitting only above the name inside the narrow info
   column. Colored with the team's real card-deck color (falls back to the
   card's default dark header) when LeagueOS's card-dealing feature is on;
   see .team-title-bar--* below and league_os_team_deck_profile(). */
.team-title-bar {
	--team-title-bg: var(--pdx-ink);
	--team-title-text: #fff;
	align-items: center;
	background: var(--team-title-bg);
	color: var(--team-title-text);
	display: flex;
	flex: 0 0 auto;
	font-size: .7rem;
	font-weight: 800;
	gap: 6px;
	justify-content: space-between;
	letter-spacing: .04em;
	/* Real fix, 2026-09-13, Victor direct: horizontal padding unchanged
	   (10px); vertical padding halved (4px -> 2px per side, 4px total
	   freed); font-size grows by that same freed amount (11.2px + 4px =
	   15.2px) so the bar's overall height doesn't change, then +10% on
	   top of that (15.2 * 1.1 = 16.72px = 1.045rem). */
	padding: 2px 10px;
	font-size: 1.045rem;
	text-transform: uppercase;
}

.team-title-bar--red { --team-title-bg: var(--deck-red); }
.team-title-bar--blue { --team-title-bg: var(--deck-blue); }
.team-title-bar--green { --team-title-bg: var(--deck-green); }
.team-title-bar--purple { --team-title-bg: var(--deck-purple); }
.team-title-bar--gold { --team-title-bg: var(--deck-gold); --team-title-text: var(--pdx-ink); }
.team-title-bar--teal { --team-title-bg: var(--deck-teal); }
.team-title-bar--orange { --team-title-bg: var(--deck-orange); }

/* Real fix, 2026-09-13, Victor direct: "a quick initials-colors-card-suit
   pill list" -- a dense team list (e.g. the season overview's single
   default division) where a full match-card title bar is too heavy.
   Same --team-title-bg/--deck-* tokens as .team-title-bar, just a
   smaller, inline shape. */
.team-pill {
	--team-title-bg: var(--pdx-ink);
	--team-title-text: #fff;
	align-items: center;
	background: var(--team-title-bg);
	border-radius: 999px;
	color: var(--team-title-text);
	display: inline-flex;
	font-size: .85rem;
	font-weight: 800;
	gap: 6px;
	letter-spacing: .02em;
	padding: 6px 14px;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform .12s ease;
}

.team-pill:hover,
.team-pill:focus-visible {
	color: var(--team-title-text);
	text-decoration: none;
	transform: translateY(-1px);
}

.team-pill--red { --team-title-bg: var(--deck-red); }
.team-pill--blue { --team-title-bg: var(--deck-blue); }
.team-pill--green { --team-title-bg: var(--deck-green); }
.team-pill--purple { --team-title-bg: var(--deck-purple); }
.team-pill--gold { --team-title-bg: var(--deck-gold); --team-title-text: var(--pdx-ink); }
.team-pill--teal { --team-title-bg: var(--deck-teal); }
.team-pill--orange { --team-title-bg: var(--deck-orange); }

.team-pill-suit {
	font-size: 1.1em;
}

.team-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Home is the visually-right box -- mirror the bar so its label still
   reads nearest the box's own outer edge, matching .team-home's text-align. */
.team-home .team-title-bar {
	flex-direction: row-reverse;
}

/* em, not a fixed rem, so the suit glyph keeps its original size ratio
   relative to the label (was .95rem next to .7rem, ~1.36x) and grows
   together with it automatically instead of needing a second manual
   update every time the bar's own font-size changes. */
.team-title-suit {
	font-size: 1.36em;
}

/* The row beneath the title bar: name on one side, full-height score panel
   on the other. Which side the score lands on is DOM order in the
   template (away's score comes after its name, home's comes before), not
   CSS, so it always lands on whichever edge of its own box sits nearest
   the shared "vs" divider. */
.team-row {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.team-row .team-full-name {
	align-self: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
}

/* Real fix, 2026-09-13, Victor direct: the score itself lerps yellow (a
   dead tie) toward green when leading / red when trailing, more saturated
   the bigger the point spread -- color is set inline per-match (see
   content-match-card.php, league_os_theme_score_lead_color()), this rule
   only sets the shared shape/size/background and the underline for
   whoever's ahead (both sides, on a tie). */
.team-score {
	align-items: center;
	background: var(--pdx-ink);
	display: flex;
	flex: 0 0 auto;
	font-size: 1.5rem;
	font-weight: 900;
	justify-content: center;
	line-height: 1;
	min-width: 3rem;
	padding: 0 14px;
}

.team-score.is-leading {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

.team-short-name {
	font-size: 1.25rem;
}

.team-full-name {
	overflow-wrap: anywhere;
}

.match-card .team-full-name {
	font-size: 1rem;
}

.match-vs {
	align-self: center;
	font-weight: 800;
}

/* Real fix, 2026-09-13, Victor direct: cards on /matches read as touching
   with no real whitespace between them. This rule used to set 18px here,
   but a later same-specificity .matches-schedule rule always won instead
   (source order, not this one) -- removed to avoid two declarations
   fighting silently; the real, effective gap now lives with that later
   rule, right after the shared *-grid block it overrides. */

/* Real root cause, found live: .matches-schedule's own gap only ever
   separated one week from the next -- every match card within the SAME
   week sits directly inside a plain, entirely unstyled .matches-week-group
   div (page-matches.php), with zero gap/margin of its own. That's the
   real reason cards looked like they had no whitespace between them at
   all: within one week (the common case), there wasn't any. */
.matches-week-group {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Real bug, found live immediately after the rule above shipped: week-
   slider.js (see assets/week-slider.js) hides every non-selected week by
   setting the real `hidden` attribute on its .matches-week-group -- but
   an author stylesheet's plain class rule beats the browser's own
   [hidden]{display:none} UA-stylesheet rule even at equal specificity
   (author origin always outranks user-agent origin), so the display:flex
   above silently defeated `hidden` and showed every week at once. This
   attribute-selector rule has higher specificity than the plain class
   rule, so hidden groups now actually stay hidden again. */
.matches-week-group[hidden] {
	display: none;
}

.match-list .matches-week-group {
	gap: 0;
}

.team-card:hover,
.venue-card:hover,
.topic-card:hover,
.division-card:hover,
.match-card:hover,
.player-card:hover,
.captain-card:hover,
.commissioner-card:hover,
	.admin-card:hover {
	box-shadow: 6px 6px 0 var(--pdx-cyan);
	transform: none;
}

.resource-list {
	background: #fff;
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 6px 6px 0 var(--pdx-yellow);
	overflow: hidden;
}

.resource-list-heading,
.resource-list-item {
	align-items: center;
	display: grid;
	gap: 12px;
	min-width: 42rem;
	padding: 8px 10px;
	white-space: nowrap;
}

.resource-list-heading {
	background: var(--pdx-ink);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.resource-list-item {
	border: 0;
	border-bottom: 1px solid rgba(23, 20, 18, .22);
	border-radius: 0;
	box-shadow: none;
	transition: box-shadow .2s ease;
}

.resource-list-item:hover,
.resource-list-item:focus-within {
	background: rgba(25, 183, 201, .08);
	box-shadow: none;
	transform: none;
}

.resource-list-item:last-child {
	border-bottom: 0;
}

.team-list .resource-list-heading,
.team-list .resource-list-item {
	grid-template-columns: minmax(16rem, 1.4fr) minmax(8rem, .7fr) minmax(16rem, 1.2fr);
}

.venue-list .resource-list-heading,
.venue-list .resource-list-item {
	grid-template-columns: minmax(16rem, 1.3fr) minmax(13rem, 1fr) minmax(12rem, 1fr);
}

.match-list .resource-list-heading,
.match-list .resource-list-item {
	display: block;
	min-width: 42rem;
}

.match-list-row {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	min-width: 0;
}

.match-list-row + .match-list-row {
	margin-top: 4px;
}

.match-list-row > :first-child {
	min-width: 0;
}

.match-list-row > :last-child {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
}

.resource-list-item h2 {
	font-size: 1.05rem;
	margin: 0;
}

.resource-list-title,
.resource-list-provider,
.resource-list-short,
.resource-list-detail,
.resource-list-record,
.resource-list-status {
	overflow: hidden;
	text-overflow: ellipsis;
}

.resource-list-title {
	font-weight: 800;
}

.resource-list-meta {
	align-items: center;
	color: var(--pdx-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.resource-list-status {
	font-weight: 800;
	text-transform: capitalize;
}

/* On narrow screens, preserve the table's scan order without forcing a
   horizontal scrollbar. Each record gets a primary row and a detail row. */
@media screen and (max-width: 767px) {
	.resource-list-heading,
	.resource-list-item {
		gap: 8px 12px;
		min-width: 0;
		white-space: normal;
	}

	.resource-list-heading {
		line-height: 1.2;
	}

	.resource-list-item {
		padding-block: 6px;
		row-gap: 8px;
	}

	.resource-list-item + .resource-list-item {
		padding-top: 12px;
	}

	.team-list .resource-list-heading,
	.team-list .resource-list-item {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "primary secondary" "detail detail";
	}

	.team-list .resource-list-heading > :nth-child(1),
	.team-list .resource-list-item > :nth-child(1) {
		grid-area: primary;
	}

	.team-list .resource-list-heading > :nth-child(2),
	.team-list .resource-list-item > :nth-child(2) {
		grid-area: secondary;
	}

	.team-list .resource-list-heading > :nth-child(3),
	.team-list .resource-list-item > :nth-child(3) {
		grid-area: detail;
	}

	.venue-list .resource-list-heading,
	.venue-list .resource-list-item {
		grid-template-columns: minmax(0, 1.25fr) minmax(7rem, .9fr) minmax(5rem, .75fr);
		grid-template-areas: none;
		white-space: nowrap;
	}

	.venue-list .resource-list-heading > *,
	.venue-list .resource-list-item > * {
		grid-area: auto;
		min-width: 0;
	}

	.venue-list .resource-list-detail {
		line-height: 1.25;
		white-space: normal;
	}

	.match-list .resource-list-heading,
	.match-list .resource-list-item {
		min-width: 0;
	}

	.match-list-row {
		gap: 8px;
	}

	.match-list-row + .match-list-row {
		margin-top: 3px;
	}

	.resource-list-title,
	.resource-list-provider,
	.resource-list-short,
	.resource-list-detail,
	.resource-list-record,
	.resource-list-status {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

/* Team archive cards use the same portrait grammar as roster cards. */
.team-cards {
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.team-roster-card {
	min-height: 0;
	padding: 0;
	background: var(--pdx-panel);
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 6px 6px 0 var(--pdx-yellow);
	overflow: hidden;
}

/* Real fix, 2026-09-13, Victor direct: "adopt the same theming as the vs
   cards... a title bar, with the team color and team suit" -- replaces
   the old uniform-blue 4:3 photo-or-big-text hero (.team-card-media/
   .team-card-media-fallback, both now dead, removed) with the shared
   .team-title-bar component. team-card-title-bar only exists to give
   this specific instance an outer margin reset (it's an <a>, not a
   <div>, and this card's own layout doesn't want the bar's default
   flex-item sizing assumptions from inside .team-row). */
.team-card-title-bar {
	text-decoration: none;
}

.team-card-body {
	display: grid;
	gap: .35rem;
	padding: 1rem;
}

.team-card-body .team-name {
	margin: 0;
	font-size: 1.2rem;
}

.team-card-venue,
.team-roster-status,
.team-card-venue-history,
.team-card-record {
	margin: 0;
}

.team-card-venue a {
	font-weight: 700;
}

.team-card-footer {
	padding: 0 1rem 1rem;
}

.team-card-footer .button {
	width: 100%;
	text-align: center;
}

.venue-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 18px;
}

.venue-card {
	padding: 0;
	background: var(--pdx-panel);
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 6px 6px 0 var(--pdx-yellow);
	overflow: hidden;
}

.venue-card-media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--pdx-blue);
	color: #fff;
	overflow: hidden;
}

.venue-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.venue-card-map-thumbnail-wrap {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.venue-card-map-thumbnail-wrap .venue-card-map-thumbnail {
	width: 100%;
	height: 100%;
	image-rendering: auto;
}

.venue-card-map-marker {
	position: absolute;
	top: 50%;
	left: 50%;
	color: var(--pdx-magenta);
	font-size: 2rem;
	line-height: 1;
	text-shadow: 0 1px 0 #fff;
	transform: translate(-50%, -50%);
}

.venue-card-map-attribution {
	position: absolute;
	right: 4px;
	bottom: 3px;
	background: rgba(255, 255, 255, .84);
	color: #171412;
	font-size: .65rem;
	line-height: 1.1;
	padding: 2px 4px;
}

.venue-card-media-fallback {
	font-size: clamp(2rem, 7vw, 4rem);
	font-weight: 900;
}

.venue-card-body {
	display: grid;
	gap: .35rem;
	padding: 1rem;
}

.venue-card-body p {
	margin: 0;
}

.venue-card-teams {
	line-height: 1.4;
}

.venue-card-teams-label {
	font-weight: 700;
}

.venue-card .venue-name {
	margin: 0;
	font-size: 1.2rem;
}

.venue-actions {
	padding: 0 1rem 1rem;
}

.venue-actions .button {
	display: block;
	text-align: center;
}

.venue-map-view {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
	gap: 18px;
}

.venue-map {
	position: relative;
	min-height: 420px;
	background: #d9edf0;
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	overflow: hidden;
}

.venue-map-marker {
	position: absolute;
	left: clamp(4%, calc((var(--venue-lng) + 123) * 100%), 96%);
	top: clamp(4%, calc((46 - var(--venue-lat)) * 100%), 96%);
	color: var(--pdx-magenta);
	font-size: 2rem;
	line-height: 1;
}

.venue-detail-section + .venue-detail-section {
	border-top: 3px solid var(--pdx-ink);
	margin-top: 24px;
	padding-top: 8px;
}

.venue-team-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.venue-team-list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 16px;
	border-bottom: 2px solid rgba(23, 20, 18, .18);
	padding: 12px 0;
}

.venue-team-list small {
	grid-column: 1 / -1;
}

.venue-team-cards {
	margin-bottom: 0;
}

.machine-cache-status {
	border-left: 4px solid var(--pdx-cyan);
	padding-left: 10px;
}

.venue-detail-map {
	position: relative;
	max-width: 34rem;
	margin: 1rem 0 0;
	border: 2px solid var(--pdx-ink);
	background: #fff;
}

.venue-detail-map img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.venue-detail-map figcaption {
	padding: 2px 6px;
	font-size: .75rem;
	text-align: right;
}

.teams-grid,
.venues-grid,
.topics-grid,
.divisions-grid,
.matches-schedule,
.player-dashboard-grid,
.captain-dashboard-grid,
.commissioner-dashboard-grid,
.admin-dashboard-grid {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

/* Real fix, 2026-09-13, Victor direct: cards on /matches read as touching
   with no real whitespace between them -- the shared grid gap above
   (1.5rem) was always the one actually applied here (it wins the cascade
   over the single-selector .matches-schedule rule earlier in this file,
   despite that rule's own comment claiming otherwise -- source order
   inside one cascade layer beats a rule written earlier in the file).
   This one is declared last on purpose so it's the one that actually wins. */
.matches-schedule {
	gap: 2rem;
}

@media screen and (max-width: 767px) {
	.section-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.teams-grid,
	.venues-grid,
	.topics-grid,
	.divisions-grid,
	.matches-schedule,
	.player-dashboard-grid,
	.captain-dashboard-grid,
	.commissioner-dashboard-grid,
	.admin-dashboard-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.venue-map-view {
		grid-template-columns: 1fr;
	}

	.team-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .65rem;
	}

	.team-card,
	.venue-card,
	.topic-card,
	.division-card,
	.player-card,
	.captain-card,
	.commissioner-card,
	.admin-card {
		padding: 1rem;
	}

	.team-roster-card {
		padding: 0;
	}

	.team-card-body {
		padding: .7rem;
	}

	.team-card-footer {
		padding: 0 .7rem .7rem;
	}
}

@media screen and (min-width: 768px) {
	.home-resource-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-link-columns {
		grid-template-columns: repeat(3, 1fr);
	}

	.teams-grid,
	.venues-grid,
	.topics-grid,
	.divisions-grid,
	.player-dashboard-grid,
	.captain-dashboard-grid,
	.commissioner-dashboard-grid,
	.admin-dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.matches-schedule {
		grid-template-columns: 1fr;
	}
}

@media screen and (min-width: 1024px) {
	.teams-grid,
	.venues-grid,
	.topics-grid,
	.divisions-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.player-dashboard-grid,
	.captain-dashboard-grid,
	.commissioner-dashboard-grid,
	.admin-dashboard-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Touch-Friendly Interactive Elements */
.button,
button,
input[type="button"],
input[type="submit"],
a.button {
	min-height: 44px;
	min-width: 44px;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.2s ease, transform 0.1s ease;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.button:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
a.button:active {
	transform: scale(0.98);
}

.button-secondary {
	background-color: var(--color-light);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.button-secondary:hover {
	background-color: #f0f0f0;
}

/* Links and clickable elements */
a,
button {
	outline: none;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
	min-height: 44px;
	font-size: 1rem;
	padding: 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-family);
	transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 91, 168, 0.1);
}

/* Menu and Navigation */
.role-menu,
.sidebar-menu {
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: auto;
	padding: 1rem;
	background-color: var(--color-light);
	border-right: 1px solid var(--color-border);
}

.menu-items {
	list-style: none;
	margin: 1rem 0 0 0;
	padding: 0;
}

.menu-items li {
	margin: 0;
}

.menu-items a {
	display: block;
	padding: 0.75rem 1rem;
	margin: 0.25rem 0;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.menu-items a:hover {
	background-color: rgba(30, 91, 168, 0.1);
}

.menu-items a:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: -2px;
}

@media screen and (max-width: 767px) {
	.role-menu,
	.sidebar-menu {
		position: static;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
		max-height: none;
	}

	.menu-section {
		margin-bottom: 1rem;
	}
}

/* Pre-game gates and workflow UI */
.pre-game-gates,
.gates-container {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0;
}

.gate-item {
	padding: 1rem;
	border-left: 4px solid var(--color-border);
	background-color: var(--color-light);
	border-radius: 4px;
}

.gate-item.gate-ready {
	border-left-color: var(--color-success);
	background-color: rgba(39, 174, 96, 0.05);
}

.gate-item.gate-pending {
	border-left-color: var(--color-warning);
	background-color: rgba(243, 156, 18, 0.05);
}

.gate-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.gate-icon {
	font-size: 1.25rem;
}

.gate-status {
	margin-left: auto;
	font-size: 0.9rem;
}

@media screen and (max-width: 767px) {
	.gate-header {
		flex-wrap: wrap;
	}

	.gate-status {
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* Landscape orientation optimization */
@media screen and (orientation: landscape) and (max-height: 500px) {
	.container {
		padding: 0.5rem 1rem;
	}

	h1, h2 {
		margin-top: 0.25rem;
		margin-bottom: 0.25rem;
		font-size: 1.25rem;
	}

	.page-header {
		padding: 0.5rem 0;
	}

	.button,
	button {
		padding: 0.5rem 1rem;
		font-size: 0.9rem;
	}

	.team-card,
	.venue-card,
	.topic-card,
	.division-card,
	.match-card:not(.resource-card) {
		padding: 0.75rem;
	}
}

/* Match headers are title bars, so their content must remain flush with the
   card frame at every responsive breakpoint. */
.match-card {
	padding: 0;
}

/* Color contrast improvements for WCAG AA */
a {
	color: #0366d6;
	text-decoration: underline;
}

a:visited {
	color: #6f42c1;
}

a:hover {
	text-decoration: none;
	color: #0256c7;
}

/* Header navigation and primary button links keep their white foreground in every link state. */
.primary-navigation .primary-menu a,
.primary-navigation .primary-menu a:link,
.primary-navigation .primary-menu a:visited,
.primary-navigation .primary-menu a:hover,
.primary-navigation .primary-menu a:focus,
.primary-navigation .primary-menu a:active,
.button:not(.button-secondary),
.button:not(.button-secondary):link,
.button:not(.button-secondary):visited,
.button:not(.button-secondary):hover,
.button:not(.button-secondary):focus,
.button:not(.button-secondary):active,
a.button:not(.button-secondary),
a.button:not(.button-secondary):link,
a.button:not(.button-secondary):visited,
a.button:not(.button-secondary):hover,
a.button:not(.button-secondary):focus,
a.button:not(.button-secondary):active {
	color: #fff;
}

/* Strong text contrast */
strong,
b {
	font-weight: 600;
	color: #000;
}

/* Code and monospace */
code,
pre {
	background-color: var(--color-light);
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

code {
	padding: 0.2rem 0.4rem;
}

pre {
	padding: 1rem;
	overflow-x: auto;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	a:after {
		content: " (" attr(href) ")";
	}

	.button,
	button,
	.skip-link {
		display: none;
	}

	body {
		line-height: 1.4;
		font-size: 12pt;
	}
}

/* Team roster: one semantic section with mutually exclusive card/list panels. */
.team-roster-members {
	margin-top: 1.5rem;
}

.roster-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.team-detail-window .team-roster-members {
	margin-top: 0;
}

.roster-heading h2 {
	margin-bottom: .25rem;
}

.roster-count {
	margin: 0;
	color: var(--color-muted, #5f6368);
}

.roster-progress {
	width: min(16rem, 42%);
}

.roster-view-tabs {
	display: inline-flex;
	gap: .25rem;
	margin-bottom: 1rem;
	padding: .25rem;
	border: 2px solid var(--pdx-ink, #171412);
	border-radius: 4px;
	background: var(--pdx-panel, #fffdf8);
}

.roster-view-tabs button {
	min-width: 5rem;
	padding: .45rem .75rem;
	border: 1px solid transparent;
	border-radius: 2px;
	background: transparent;
	color: var(--pdx-ink, #171412);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

.roster-view-tabs button[aria-selected="true"] {
	border-color: var(--pdx-yellow, #f5c542);
	background: var(--pdx-ink, #171412);
	color: #fff;
}

.roster-cards[hidden],
.roster-list[hidden] {
	display: none;
}

.roster-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}

.roster-card {
	--roster-card-deck: var(--pdx-ink, #171412);
	--roster-card-title-text: #fff;
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	aspect-ratio: 3 / 4;
	min-height: 0;
	padding: 0;
	border: 3px solid var(--pdx-ink, #171412);
	border-radius: 6px;
	background: var(--pdx-panel, #fffdf8);
	box-shadow: 6px 6px 0 var(--pdx-magenta, #d94f9d), inset 0 0 0 3px var(--roster-card-deck);
	overflow: hidden;
}

.roster-card--red { --roster-card-deck: var(--deck-red); }
.roster-card--blue { --roster-card-deck: var(--deck-blue); }
.roster-card--green { --roster-card-deck: var(--deck-green); }
.roster-card--purple { --roster-card-deck: var(--deck-purple); }
.roster-card--gold { --roster-card-deck: var(--deck-gold); --roster-card-title-text: var(--pdx-ink); }
.roster-card--teal { --roster-card-deck: var(--deck-teal); }
.roster-card--orange { --roster-card-deck: var(--deck-orange); }

.roster-card.is-open {
	border-style: dashed;
	box-shadow: 4px 4px 0 var(--pdx-magenta, #d94f9d), inset 0 0 0 3px var(--roster-card-deck);
}

.roster-card-header,
.roster-card-bottom {
	display: grid;
	align-items: start;
	gap: .5rem;
}

.roster-card-header {
	display: block;
	padding: .65rem .8rem;
	background: var(--roster-card-deck);
	color: var(--roster-card-title-text);
}

.roster-card-header::after {
	content: "";
	display: block;
	clear: both;
}

.roster-card-header .roster-card-primary,
.roster-card-header .roster-card-id,
.roster-card-header .roster-card-role {
	color: var(--roster-card-title-text);
}

.roster-card-primary,
.roster-card-display-name,
.roster-card-id,
.roster-card-initials,
.roster-card-pronouns,
.roster-card-role {
	min-width: 0;
	line-height: 1.2;
	word-break: break-word;
}

.roster-card-primary {
	font-size: 1.05rem;
}

.roster-card-meta {
	display: flex;
	float: right;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .25rem .5rem;
	max-width: 62%;
	margin-left: .5rem;
	text-align: right;
}

.roster-card-id {
	font-weight: 800;
	white-space: nowrap;
}

.roster-card-role {
	font-weight: 800;
	white-space: nowrap;
}

.roster-card-portrait {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: .25rem;
	min-height: 9rem;
	padding: .35rem .8rem 0;
}

.roster-card-portrait-art {
	position: relative;
	width: min(12rem, 100%);
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
}

.roster-card-portrait-art svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--pdx-ink, #171412);
	stroke-width: 3;
}

.roster-card-emoji {
	position: absolute;
	top: 31.25%;
	left: 50%;
	z-index: 1;
	display: block;
	font-size: 3.9rem;
	line-height: 1;
	transform: translate(-50%, -50%);
}

.roster-card-display-name {
	max-width: 100%;
	text-align: center;
}

.roster-card-bottom {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	padding: .35rem .8rem .65rem;
}

.roster-card-pronouns {
	justify-self: center;
	text-align: center;
}

.roster-card-role {
	justify-self: end;
	text-align: right;
	font-weight: 800;
}

.roster-list-items {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.roster-list-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: center;
	gap: .75rem;
	padding: .7rem;
	border-bottom: 1px solid var(--color-border, #ccc);
}

.roster-list-identity {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	justify-content: center;
	min-width: 0;
}

.roster-list-initials,
.roster-list-role {
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
}

.roster-list-emoji {
	font-size: 1.5rem;
	line-height: 1;
	text-align: center;
}

.roster-list-details {
	display: grid;
	gap: .15rem;
	min-width: 0;
}

.roster-list-details > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

.profile-preview {
	margin-top: 2rem;
}

.profile-preview-intro {
	margin: 0 0 1rem;
}

.league-roster-name small {
	display: block;
	margin-top: .25rem;
}

.identity-privacy-preset {
	margin: 0 0 1rem;
}

.identity-privacy-preset label {
	align-items: center;
	display: grid;
	grid-template-columns: auto minmax(8rem, 1fr) auto;
	gap: .5rem;
}

.identity-privacy-preset input[type="range"] {
	min-width: 0;
}

.identity-privacy-preset output {
	display: block;
	font-weight: 800;
	margin-top: .35rem;
}

@media (max-width: 450px) {
	.identity-privacy-preset label {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "minimum maximum" "range range";
	}

	.identity-privacy-preset label span:first-child {
		grid-area: minimum;
	}

	.identity-privacy-preset label span:last-child {
		grid-area: maximum;
		text-align: right;
	}

	.identity-privacy-preset input[type="range"] {
		grid-area: range;
		width: 100%;
	}
}

.profile-preview-switcher {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: .35rem;
	width: 100%;
}

.profile-preview-tab {
	min-height: 2.5rem;
	background: var(--pdx-ink, #171412);
	border-color: var(--pdx-ink, #171412);
	color: #fff;
	white-space: normal;
}

.profile-preview-tab:hover,
.profile-preview-tab:focus-visible,
.profile-preview-tab[aria-selected="false"]:hover,
.profile-preview-tab[aria-selected="false"]:focus-visible {
	background: var(--pdx-magenta, #d94f9d);
	border-color: var(--pdx-yellow, #f2c94c);
	color: #fff;
}

.profile-preview-tab[aria-selected="true"] {
	background: var(--pdx-yellow, #f2c94c);
	border-color: var(--pdx-yellow, #f2c94c);
	color: var(--pdx-ink, #171412);
}

.profile-preview-tab[aria-selected="false"] {
	background: var(--pdx-ink, #171412);
	border-color: var(--pdx-ink, #171412);
	color: #fff;
}

.profile-preview-panels {
	margin-top: 1.25rem;
}

.profile-preview-panel[hidden] {
	display: none;
}

.profile-preview-card {
	grid-template-columns: minmax(0, 1fr);
	max-width: 22rem;
	width: 100%;
}

.profile-preview-card .roster-card {
	margin: 0;
}

@media screen and (max-width: 767px) {
	.roster-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.roster-progress {
		width: 100%;
	}

	.roster-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .65rem;
	}

	.profile-preview-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.roster-card {
		padding: 0;
	}

	.roster-list-item {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: .55rem;
	}
}

@media screen and (max-width: 450px) {
	.roster-card {
		aspect-ratio: 3 / 4;
	}

	.roster-card-header {
		padding: .45rem .55rem;
	}

	.roster-card-primary {
		font-size: .9rem;
	}

	.roster-card-meta {
		max-width: 58%;
		font-size: .78rem;
		gap: .15rem .35rem;
	}

	.roster-card-portrait {
		min-height: 6.5rem;
		padding: .2rem .55rem 0;
	}

	.roster-card-portrait-art {
		width: min(7.5rem, 90%);
	}

	.roster-card-emoji {
		font-size: 2.6rem;
	}

	.roster-card-display-name {
		font-size: .84rem;
		line-height: 1.15;
	}

	.roster-card-bottom {
		font-size: .8rem;
		padding: .25rem .55rem .5rem;
	}

	.roster-card-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .2rem .45rem;
	}

	.roster-card-meta {
		grid-column: 2;
		grid-row: 1;
		float: none;
		max-width: none;
		flex-wrap: nowrap;
	}

	.roster-card-primary {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: 100%;
	}
}

.league-os-registration-emoji .registration-emoji {
	font-size: 3rem;
	line-height: 1;
}

/* ---------------------------------------------------------------------
 * Reusable week slider (LeagueOS#242)
 * Generic component -- any resource (matches today, standings/schedule
 * later) can drop this in. Step buttons are a deliberate retro reference:
 * chunky, beveled, rounded-square "Windows 3.1" buttons, not flat modern
 * icon buttons.
 * ------------------------------------------------------------------- */

.week-slider {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: .85rem 1rem;
	background: var(--pdx-panel);
	border: 1px solid color-mix(in srgb, var(--pdx-ink) 18%, transparent);
	border-radius: 10px;
}

.week-slider-status {
	font-weight: 600;
	font-size: .95rem;
	color: var(--pdx-ink);
}

.week-slider-control {
	display: flex;
	align-items: center;
	gap: .6rem;
}

/* Windows 3.1-style step button: chunky rounded square, raised bevel. */
.week-slider-step {
	flex: 0 0 auto;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 6px;
	background: var(--pdx-panel);
	border: 2px solid var(--pdx-ink);
	border-top-color: color-mix(in srgb, var(--pdx-ink) 40%, white);
	border-left-color: color-mix(in srgb, var(--pdx-ink) 40%, white);
	border-bottom-color: color-mix(in srgb, var(--pdx-ink) 85%, black);
	border-right-color: color-mix(in srgb, var(--pdx-ink) 85%, black);
	box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
	font-size: .85rem;
	line-height: 1;
	cursor: pointer;
	color: var(--pdx-ink);
}

.week-slider-step:active {
	border-top-color: color-mix(in srgb, var(--pdx-ink) 85%, black);
	border-left-color: color-mix(in srgb, var(--pdx-ink) 85%, black);
	border-bottom-color: color-mix(in srgb, var(--pdx-ink) 40%, white);
	border-right-color: color-mix(in srgb, var(--pdx-ink) 40%, white);
	box-shadow: none;
	transform: translate(1px, 1px);
}

.week-slider-step:focus-visible,
.week-slider-thumb:focus-visible,
.week-slider-reset:focus-visible {
	outline: 3px solid var(--pdx-blue);
	outline-offset: 2px;
}

.week-slider-track {
	position: relative;
	flex: 1 1 auto;
	height: 2.1rem;
	background: color-mix(in srgb, var(--pdx-ink) 8%, var(--pdx-bg));
	border: 1px solid color-mix(in srgb, var(--pdx-ink) 25%, transparent);
	border-radius: 999px;
	touch-action: none;
	cursor: pointer;
}

/* Large, real thumb -- Victor's "large thumb icon", not a tiny 12px dot. */
.week-slider-thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1.9rem;
	height: 1.9rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--pdx-red);
	border: 3px solid var(--pdx-panel);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	cursor: grab;
}

.week-slider-thumb:active {
	cursor: grabbing;
}

.week-slider-reset {
	flex: 0 0 auto;
	padding: .4rem .75rem;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--pdx-ink) 30%, transparent);
	background: var(--pdx-bg);
	color: var(--pdx-ink);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.week-slider-scale {
	display: flex;
	justify-content: space-between;
	font-size: .72rem;
	color: var(--pdx-muted);
	padding: 0 1.05rem;
}

.week-slider-tick.is-active {
	color: var(--pdx-red);
	font-weight: 700;
}

/* Real fix, 2026-09-13, Victor direct: below the mobile breakpoint, the
   prev/next arrows and "Current week" button share their own centered
   row (reset button visually between the two arrows), the drag track
   gets its own full-width row beneath that, the status text stays on
   top and the week-number scale stays on the bottom -- unchanged, since
   both already sit outside .week-slider-control in DOM order. Visual
   order only (via flex `order`), not a DOM change, so tab order through
   the real controls is untouched. */
@media (max-width: 480px) {
	.week-slider-control {
		flex-wrap: wrap;
		justify-content: center;
	}
	.week-slider-step-prev {
		order: 1;
	}
	.week-slider-reset {
		order: 2;
		margin-left: 0;
	}
	.week-slider-step-next {
		order: 3;
	}
	.week-slider-track {
		order: 4;
		flex-basis: 100%;
	}
}

/* The shared primary action is declared last so legacy theme rules cannot
   silently change its body, border, or CMYK shadow pair. */
.button,
a.button {
	background: var(--pdx-blue);
	border: 3px solid var(--pdx-ink);
	border-radius: 6px;
	box-shadow: 4px 4px 0 var(--pdx-yellow);
	color: #fff;
	transition: background-color .2s ease, box-shadow .2s ease;
}

.button:hover,
.button:focus-visible,
a.button:hover,
a.button:focus-visible {
	background: var(--pdx-magenta);
	box-shadow: 4px 4px 0 var(--pdx-cyan);
	color: #fff;
	text-decoration: none;
	transform: none;
}

/* ---------------------------------------------------------------------
 * Outer team-page tabs (Roster / Matches & Record) -- LeagueOS#248
 * follow-up. Deliberately separate from the roster tab's own internal
 * cards/list toggle styling, so this doesn't collide with concurrent
 * work inside #team-tab-roster.
 * ------------------------------------------------------------------- */

.team-page-tabs {
	display: flex;
	gap: .5rem;
	margin: 0 0 1.25rem;
	border-bottom: 2px solid color-mix(in srgb, var(--pdx-ink) 15%, transparent);
}

.team-page-tabs [data-team-tab] {
	background: none;
	border: none;
	padding: .6rem 1rem;
	font-weight: 600;
	font-size: .95rem;
	color: var(--pdx-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.team-page-tabs [data-team-tab][aria-selected="true"] {
	color: var(--pdx-ink);
	border-bottom-color: var(--pdx-red);
}

.team-record-summary .team-record-line {
	font-size: 1.1rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Real per-game score entry -- LeagueOS#248 follow-up.
 * ------------------------------------------------------------------- */

.round-tabs {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .75rem;
}

.round-tabs .round-tab {
	padding: .35rem .75rem;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--pdx-ink) 25%, transparent);
	background: var(--pdx-panel);
	color: var(--pdx-ink);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 600;
	/* Real <button>s now (client-side switching, LeagueOS#248 follow-up),
	   not <a> -- reset the native button chrome/cursor/font. */
	font-family: inherit;
	cursor: pointer;
}

.round-tabs .round-tab.is-done:not(.is-active) {
	background: color-mix(in srgb, var(--pdx-ink) 6%, var(--pdx-bg));
	color: var(--pdx-muted);
}

.round-tabs .round-tab.is-active {
	background: var(--pdx-blue);
	color: #fff;
	border-color: var(--pdx-blue);
}

.game-score-entry {
	border: 1px solid color-mix(in srgb, var(--pdx-ink) 18%, transparent);
	border-radius: 8px;
	padding: .75rem 1rem;
	margin-bottom: .75rem;
}

.game-score-entry.is-complete {
	background: color-mix(in srgb, var(--pdx-ink) 4%, var(--pdx-bg));
}

/* Mobile-first, per Victor's direct feedback 2026-09-13: machine on its own
   full-width row, then one P1-P4 slot per row -- never two slots crammed
   side by side, which was overflowing the viewport. P1+P2 (and P3+P4 for
   doubles) only sit side by side once there's real room for it. */
.game-score-slots {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-top: .5rem;
}

.game-score-slot-row {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.game-score-slot {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.game-score-slot .slot-label {
	flex: 0 0 auto;
	min-width: 2rem;
	font-weight: 700;
	font-size: .8rem;
	color: var(--pdx-muted);
}

/* select and number input default to different browser heights/borders --
   normalize so a P-row reads as one aligned unit. */
.game-score-slot select,
.game-score-slot input[type="number"] {
	box-sizing: border-box;
	height: 2.4rem;
	padding: .3rem .5rem;
	border: 1px solid color-mix(in srgb, var(--pdx-ink) 30%, transparent);
	border-radius: 6px;
	font-size: .9rem;
	background: var(--pdx-panel);
	color: var(--pdx-ink);
}

/* Player and score more evenly weighted, per Victor's direct feedback
   2026-09-13 -- the select was taking nearly the whole row while the score
   input stayed a cramped fixed 5.5rem. */
.game-score-slot select {
	flex: 3 1 0;
	min-width: 0;
}

.game-score-slot input[type="number"] {
	flex: 2 1 0;
	width: auto;
	min-width: 0;
}

@media (min-width: 640px) {
	.game-score-slot-row {
		flex-direction: row;
	}
	.game-score-slot-row .game-score-slot {
		flex: 1 1 50%;
		/* Flex items default to min-width:auto, which refuses to shrink
		   below their content's natural width -- without this, pairing two
		   slots in one row pushed the second one off-screen instead of
		   actually sharing the row. Real bug, caught live 2026-09-13. */
		min-width: 0;
	}
	.game-score-slot-row .game-score-slot select {
		min-width: 0;
	}
}

.finalize-match-score-override summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--pdx-muted);
}

.player-name-pending {
	color: var(--pdx-muted);
	font-style: italic;
}

.machine-name-readonly {
	color: var(--pdx-muted);
}

.game-tabs {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	margin: .5rem 0 .75rem;
}

.game-tabs .game-tab {
	padding: .3rem .65rem;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--pdx-ink) 25%, transparent);
	background: var(--pdx-panel);
	color: var(--pdx-ink);
	text-decoration: none;
	font-size: .8rem;
	font-weight: 600;
	/* Real <button>s now (client-side switching, LeagueOS#248 follow-up),
	   not <a> -- reset the native button chrome/cursor/font. */
	font-family: inherit;
	cursor: pointer;
}

.game-tabs .game-tab.is-active {
	background: var(--pdx-blue);
	color: #fff;
	border-color: var(--pdx-blue);
}

.game-tabs .game-tab.is-done:not(.is-active) {
	background: color-mix(in srgb, var(--pdx-ink) 6%, var(--pdx-bg));
	color: var(--pdx-muted);
}

/* Match preparation deliberately uses real checkboxes so captains can
   confirm a roster and venue machines without retyping score-sheet data. */
.match-prep-form fieldset {
	border: 1px solid var(--pdx-border, #c9c1b9);
	padding: 1rem;
}

.match-prep-player-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.match-prep-checkbox,
.match-prep-add {
	display: block;
	margin: .45rem 0;
}

.match-prep-checkbox input {
	margin-right: .4rem;
}

.match-prep-add span {
	display: block;
	font-weight: 600;
	margin-bottom: .25rem;
}

.match-prep-add input {
	width: 100%;
}

.season-substitute-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: .75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.season-substitute-slot {
	border: 2px dotted var(--pdx-muted, #777);
	min-height: 4rem;
	padding: .75rem;
}

.season-substitute-slot strong,
.season-substitute-slot small {
	display: block;
}

.season-substitute-placeholder {
	display: inline-block;
	width: .8rem;
	height: .8rem;
	border: 1px dotted currentColor;
	margin-right: .35rem;
}

@media screen and (max-width: 700px) {
	.match-prep-player-columns {
		grid-template-columns: 1fr;
	}
}