body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* ANYPL site theme: a mostly white page with cyan for anything you can act on and dark green for
   anything that is in a good state. Installed to files/anypl/site.css by ANYPL > Settings, which also
   removes quick-setup's style.css from every layout, so this sheet is the whole front end base.
   Cyan (#00a8c6) fails AA on white for small text, so it never colours text; links use --primary-ink. */

:root {
	--paper: #ffffff;
	--ink: #1a2328;
	--muted: #5b6b73;
	--line: #dfe6ea;
	--tint: #eefafc;
	--primary: #00a8c6;
	--primary-ink: #0d7b91;
	--accent: #1d6b3f;
	--accent-tint: #e9f4ec;
	--danger: #b42318;
	--danger-tint: #fbeae8;
	/* Text on a solid cyan or green button. White on light-mode cyan is the accepted design; on the
	   brighter dark-mode cyan and green, white falls to ~2:1, so dark mode switches this to ink. */
	--on-primary: #ffffff;
	--on-accent: #ffffff;
	--radius: 6px;
	--shadow: 0 1px 2px rgba(26, 35, 40, 0.08);
}

/* Dark mode: a full equivalent. Cyan passes contrast on dark paper, so links brighten to it; green and
   the tints are re-mixed for a dark surface rather than inverted.
   Three states: a visitor's choice is data-theme on <html>, set before first paint by the head script the
   installer writes into tl_layout.head and stored as localStorage "anypl-theme"; with no choice the
   operating system decides. The same token block serves both selectors so they cannot drift apart. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: #12181c;
		--ink: #e6edf0;
		--muted: #9fb0b8;
		--line: #2b363d;
		--tint: #0f2a31;
		--primary: #2cc5e0;
		--primary-ink: #5fd6ea;
		--accent: #4fbf7a;
		--accent-tint: #122e1e;
		--danger: #f08077;
		--danger-tint: #3a1a17;
		--on-primary: #12181c;
		--on-accent: #12181c;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}
}
:root[data-theme="dark"] {
		--paper: #12181c;
		--ink: #e6edf0;
		--muted: #9fb0b8;
		--line: #2b363d;
		--tint: #0f2a31;
		--primary: #2cc5e0;
		--primary-ink: #5fd6ea;
		--accent: #4fbf7a;
		--accent-tint: #122e1e;
		--danger: #f08077;
		--danger-tint: #3a1a17;
		--on-primary: #12181c;
		--on-accent: #12181c;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Page shell (Contao legacy fe_page: #wrapper > #header/#container/#footer, each with .inside) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#wrapper { min-height: 100vh; display: flex; flex-direction: column; }
#header, #container, #footer { width: 100%; }
#header .inside, #container .inside, #footer .inside, .inside { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
#header { border-bottom: 3px solid var(--primary); }
#header .inside { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
#container { flex: 1; }
#main { padding: 28px 0 48px; }
#left, #right { padding: 28px 0; }
#footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
#footer .inside { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* Light/dark toggle: appended by the head script to #footer .inside, or to #header .inside when the page prints
   no footer (Contao omits the element while the footer section holds no module), styled as a small secondary
   button; in the header it takes the right end of the flex row */
#header .theme-toggle { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 6px 12px;
	border: 1px solid var(--primary);
	border-radius: 999px;
	background: transparent;
	color: var(--primary-ink);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.theme-toggle:hover { background: var(--tint); }
.theme-toggle .theme-toggle-icon { font-size: 1rem; line-height: 1; }
.mod_article + .mod_article, .ce_text + .ce_text { margin-top: 24px; }
.invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Headings and text */
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }
h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.65rem); margin-top: 1.4em; }
h3 { font-size: 1.15rem; margin-top: 1.2em; }
h4, .sub_headline { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
p, ul, ol, table, form { margin: 0 0 1em; }
a { color: var(--primary-ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 2px;
}
small, .explanation, .note, .tl_help, .tl_tip { color: var(--muted); font-size: 0.9rem; }
.explanation, .tl_help, .tl_tip { display: block; margin-top: 0.3em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
img { max-width: 100%; height: auto; }

/* Navigation and breadcrumbs */
.mod_navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mod_navigation li { margin: 0; }
.mod_navigation a, .mod_navigation strong {
	display: inline-block;
	padding: 10px 14px;
	border-radius: var(--radius);
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}
.mod_navigation a:hover { background: var(--tint); color: var(--primary-ink); text-decoration: none; }
.mod_navigation .active > a, .mod_navigation .active > strong, .mod_navigation .trail > a { color: var(--primary-ink); box-shadow: inset 0 -3px 0 var(--primary); }
.mod_navigation .level_2 { padding-left: 14px; }
.mod_breadcrumb ul { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.mod_breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--line); }
.mod_breadcrumb .active { color: var(--ink); }
.mod_login_status, .user_info { font-size: 0.9rem; color: var(--muted); }

/* Forms: core member modules (login, registration, lost password, personal data) and the league's own */
.formbody { margin: 0 0 1em; }
form .widget, .formbody .widget, .field_wrapper, .form_field { margin: 0 0 16px; }
form label, .widget label, .tl_edit_form label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.95rem; }
form input[type="text"], form input[type="email"], form input[type="password"], form input[type="number"], form input[type="search"],
form input[type="tel"], form input[type="url"], form input[type="date"], form input[type="time"], form input[type="datetime-local"],
form select, form textarea, .tl_text, .tl_select, .tl_textarea {
	display: block;
	width: 100%;
	max-width: 520px;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}
form textarea, .tl_textarea { min-height: 120px; resize: vertical; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--primary); outline-color: var(--primary); }
.widget-checkbox label, .widget-radio label, .checkbox label, .tl_checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.widget-checkbox input, .widget-radio input, .checkbox input, .tl_checkbox { width: auto; margin: 0; accent-color: var(--primary); }
form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
form legend { padding: 0 6px; font-weight: 600; }
/* Contao puts .mandatory on the <label> as well as the asterisk <span>; only the asterisk is red. */
label.mandatory { color: inherit; }
label .mandatory, span.mandatory { color: var(--danger); }
p.error, .widget .error, span.error, .error > p, .message.error { color: var(--danger); }
.widget.error input, .widget.error select, .widget.error textarea, .error input { border-color: var(--danger); }
p.confirmation, .confirmation, .message.confirmation { padding: 12px 14px; border-radius: var(--radius); background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent); }
.message.error, .error.message { padding: 12px 14px; border-radius: var(--radius); background: var(--danger-tint); border: 1px solid var(--danger); }
.no_access { padding: 14px 16px; border-left: 4px solid var(--danger); background: var(--danger-tint); color: var(--ink); }
.empty { color: var(--muted); font-style: italic; }
.mod_login .widget, .mod_registration .widget, .mod_lostPassword .widget, .mod_personalData .widget { max-width: 520px; }

/* Buttons: cyan primary, outline secondary, green for a state you are confirming */
input[type="submit"], button[type="submit"], .submit, .tl_submit, .action_button, .button {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--primary);
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--on-primary);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: filter 120ms ease;
}
input[type="submit"]:hover, button[type="submit"]:hover, .submit:hover, .tl_submit:hover, .action_button:hover, .button:hover { filter: brightness(0.92); text-decoration: none; }
.button.secondary, .back, .print_link, .status_action { background: transparent; color: var(--primary-ink); border-color: var(--primary); }
.button.secondary:hover, .back:hover, .print_link:hover, .status_action:hover { background: var(--tint); filter: none; }
.button.state, .action_button.approve, .action_button.present { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.danger, .action_button.decline, .action_button.remove { background: var(--paper); border-color: var(--danger); color: var(--danger); }
.actions, .toggles, .tl_submit_container, .tl_formbody_submit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0; }
button:disabled, input[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* Back end classes the league templates reuse on the front end */
.tl_form, .tl_edit_form { margin: 0 0 1em; }
.tl_formbody_edit, .tl_tbox { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.tl_tbox + .tl_tbox { margin-top: 16px; }
.tl_formbody_edit .widget, .tl_tbox .widget { margin-bottom: 14px; }
.tl_folder_tlist, .tl_file_list { list-style: none; margin: 0; padding: 0; }

/* Tables: standings, schedules, rosters, registrations, and the score sheets */
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--paper); }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--tint); color: var(--ink); font-weight: 650; border-bottom: 2px solid var(--primary); white-space: nowrap; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--tint) 40%, var(--paper)); }
tbody tr:hover td { background: var(--tint); }
.totals, .totals_wrapper, .point_totals { font-weight: 650; }
tfoot td, .totals td, .totals_wrapper td, .point_totals td { font-weight: 650; border-top: 2px solid var(--line); }
td.points, td.game_points, td.total_points, td.total, td.plays, td.played, th.points, th.total,
.points, .game_points, .total_points { text-align: right; font-variant-numeric: tabular-nums; }
.players_list, .schedule_list, .standings { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.players_list table, .results { min-width: 560px; }

/* Score sheets: a sheet (div.scoresheet) is four small 3-column match tables plus a totals table, laid out as
   a grid of cards. The machine name is the table head; each row is player / score / points. Nothing here is
   sticky or widened: the first live render showed a 640px min-width turning the names column into a 384px
   sticky slab that hid every score at phone width. */
.scoresheet_list .scoresheet, .scoresheet_view .scoresheet { margin: 0 0 28px; }
.scoresheet > h3 { margin: 0 0 10px; }
.scoresheet_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.scoresheet_details .match, .scoresheet_details .player_summary { min-width: 0; }
.scoresheet_details table { margin: 0; font-size: 0.92rem; }
.scoresheet_details thead th { text-align: left; }
.scoresheet_details th.player_name { font-weight: 500; text-align: left; white-space: normal; }
.machine_score, .machine_points, .scoresheet_details td.totals { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.machine_points, .scoresheet_details td.totals { font-weight: 650; }
.player_summary table.totals thead th { background: var(--accent-tint); color: var(--accent); border-bottom-color: var(--accent); }
.sheet_link { display: inline-block; margin-top: 8px; }
.scoresheet input[type="number"], .scoresheet input[type="text"] { max-width: 9em; padding: 6px 8px; text-align: right; }
.sheet, .new_sheet, .edit_sheet { margin-bottom: 20px; }
caption { text-align: left; font-weight: 650; padding: 0 0 8px; }

/* League modules. Real markup (anypl.org, 2026-10-10): ul.league_list > li.league, ul.league_venues > li.venue,
   ul.league_sections, nav.season_switcher ul, ul.schedule_list > li.week, ul.players_list > li.player. */
.league_list, .league_venues, .league_sections, .all_venues, .location_list, .region_list, .schedule_list, .players_list ul, .players_list ol, .season_switcher ul {
	list-style: none; margin: 0 0 1.5em; padding: 0;
}
.league_list > li, .league_venues > li, .all_venues > li, .location_list > li, .region_list > li, .venue, .league {
	padding: 14px 16px;
	margin: 0 0 10px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--primary);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow);
}
.league_list > li > a, .venue_name, .title { font-weight: 650; font-size: 1.05rem; }
.league_description { margin-top: 4px; color: var(--muted); }
.league_sections { display: flex; flex-wrap: wrap; gap: 8px; }
.league_sections li a { display: inline-block; padding: 8px 14px; border: 1px solid var(--primary); border-radius: 999px; color: var(--primary-ink); font-weight: 600; text-decoration: none; }
.league_sections li a:hover { background: var(--tint); text-decoration: none; }
.season_switcher { margin: 0 0 1em; }
.season_switcher ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.league_venues_block, .scoresheet_list, .scoresheet_view, .location_reader { margin: 0 0 28px; }
.league_venues_block > h2, .scoresheet_list > h2, .location_reader > h2 { margin-top: 0; }
.scoresheets { display: block; }
/* .no_image is a modifier on li.week (no venue image): the session text takes the full width. */
.no_image { padding-left: 0; }
.no_image .image_wrapper { display: none; }
.season_switcher li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; }
.season_switcher li.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.season_switcher li a { color: var(--primary-ink); text-decoration: none; }
.players_list > li, .players_list .player { padding: 8px 0; border-bottom: 1px solid var(--line); }
.venue_place, .address, .contact, .weekday, .season, .registration_info { color: var(--muted); font-size: 0.92rem; }
.venue_name + .venue_place::before { content: " · "; }
.current_season, .active { color: var(--accent); font-weight: 600; }

/* Schedule: li.week wraps a whole week (h2, the session's h3.date, h4.time, address, contact, .notice). Only
   the address block is muted; the headings keep their size. */
.schedule_list > li.week { padding: 16px 0 20px; border-bottom: 1px solid var(--line); }
.schedule_list > li.week > h2 { margin-top: 0; }
.schedule_list .session { margin: 0 0 12px; }
.schedule_list .date { font-size: 1.1rem; margin: 0 0 4px; }
.schedule_list .time { text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; font-size: 0.95rem; margin: 0 0 8px; }
.schedule_list .location_details { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.notice { display: block; margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--accent-tint); color: var(--ink); font-size: 0.95rem; }
.suppressed { color: var(--muted); font-style: italic; }
.section { margin: 0 0 28px; }
.section > h2:first-child { margin-top: 0; }
.image_wrapper img { border-radius: var(--radius); }

/* Venue detail (league PR #66 markup): div.location_reader with .address, .contact, .description, .policies,
   .leagues and div.machines > ul.machines, followed by the claim form in div.location_claim, which uses plain
   <p><label><input> rather than Contao's .widget wrapper. */
.location_reader > h2 { margin-top: 0; }
.location_reader .image_wrapper { margin: 0 0 14px; }
.location_reader .address { margin: 0 0 10px; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.location_reader .contact { margin: 0 0 16px; color: var(--ink); font-size: 0.95rem; line-height: 1.7; }
.location_reader .contact strong { color: var(--muted); font-weight: 600; margin-right: 4px; }
.location_reader .description, .location_reader .policies { margin: 0 0 18px; }
.location_reader .policies h3, .location_reader .machines h3 { margin-top: 1em; }
.location_reader .leagues { margin: 0 0 18px; padding: 10px 14px; border-left: 4px solid var(--primary); background: var(--tint); }
.location_reader ul.machines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.location_reader ul.machines li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.location_claim { margin: 28px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--paper); }
.location_claim h3 { margin-top: 0; }
.location_claim p { margin: 0 0 12px; }
.location_claim label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.95rem; }
.location_claim input[type="text"], .location_claim textarea {
	display: block; width: 100%; max-width: 520px; padding: 9px 11px;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit;
}
.location_claim textarea { min-height: 100px; resize: vertical; }
.location_claim button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.location_claim p.confirm { padding: 12px 14px; border-radius: var(--radius); background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent); }
.location_claim p.error { padding: 12px 14px; border-radius: var(--radius); background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); }

/* Location map (league PR #66): div.location_map carries an inline height. The module emits Leaflet's own
   stylesheet AFTER this one, and its popup, zoom bar and container rules are hard-coded white, so every override
   here is scoped under .location_map.leaflet-container to outrank them on specificity rather than on order (an
   unscoped .leaflet-popup-content-wrapper rule ties with Leaflet's and loses, measured on anypl.org). The unmapped
   and noscript lists reuse .location_list. */
.location_map { width: 100%; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.location_map.leaflet-container { font: inherit; background: var(--tint); }
.location_map.leaflet-container a { color: var(--primary-ink); }
.location_map.leaflet-container .leaflet-popup-content-wrapper, .location_map.leaflet-container .leaflet-popup-tip { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.location_map.leaflet-container .leaflet-popup-content { margin: 12px 16px; line-height: 1.45; font-size: 0.95rem; }
.location_map.leaflet-container .leaflet-popup-content a { font-weight: 650; }
.location_map.leaflet-container .leaflet-popup-close-button { color: var(--muted); }
.location_map.leaflet-container .leaflet-control-attribution { background: color-mix(in srgb, var(--paper) 85%, transparent); color: var(--muted); }
.location_map.leaflet-container .leaflet-control-attribution a { color: var(--primary-ink); }
.location_map.leaflet-container .leaflet-bar a, .location_map.leaflet-container .leaflet-bar a:hover { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
.location_unmapped { margin: 0 0 20px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
.location_unmapped h3 { margin: 0 0 8px; font-size: 1rem; color: var(--muted); }
ul.location_list.map_noscript, .location_unmapped ul.location_list { list-style: none; margin: 0; padding: 0; }
.location_unmapped ul.location_list li, ul.location_list.map_noscript li { padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; margin: 0; }

/* Status badges: green is good, grey is waiting, red is refused or off */
.status, .flag, [class^="status_"], [class*=" status_"] {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 650;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--tint);
	color: var(--primary-ink);
	border: 1px solid transparent;
}
.status_active, .status_paid, .status_approved, .status_present, .status_free, .status_credit, .status_published, .status.active, .status.paid, .status.approved, .flag.present {
	background: var(--accent-tint); color: var(--accent); border-color: var(--accent);
}
.status_pending, .status_awaiting_payment, .status_unpaid, .status_invited, .status_requested, .status.pending, .status.unpaid, .payment_due {
	background: color-mix(in srgb, var(--muted) 12%, var(--paper)); color: var(--muted); border-color: var(--muted);
}
.status_declined, .status_cancelled, .status_rejected, .status_removed, .status_rescheduled, .status.declined, .status.cancelled {
	background: var(--danger-tint); color: var(--danger); border-color: var(--danger);
}
.payment_due { display: inline-block; padding: 4px 10px; border-radius: var(--radius); font-size: 0.9rem; text-transform: none; letter-spacing: 0; }
.status_action { padding: 4px 10px; font-size: 0.85rem; }
/* .stripe is Contao's zebra-row marker (table.results, div.scoresheet); the rows carry the zebra, not the wrapper. */
.stripe { all: unset; display: revert; }
table.stripe { display: table; width: 100%; }
.radius { color: var(--muted); }

/* DataTables (ANYPL > Settings > Scripts + the league's results-table.js): harvested from the live standings
   page with jQuery + DataTables 1.13 injected. The wrapper holds div.dataTables_filter (label "Search:" + an
   input[type=search]), then table.results.dataTable whose header cells carry .sorting/.sorting_asc/.sorting_desc
   and aria-sort, then div.dataTables_info ("Showing 1 to 31 of 31 entries"). DataTables' own stylesheet is not
   loaded, so the sort arrows and the chrome are drawn here. */
.dataTables_wrapper { margin: 0 0 16px; }
.dataTables_filter { margin: 0 0 10px; }
.dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.dataTables_filter input[type="search"] { min-width: 220px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-weight: 400; }
.dataTables_filter input[type="search"]:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.dataTables_info { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { position: relative; padding-right: 24px; cursor: pointer; user-select: none; }
table.dataTable thead th.sorting:hover, table.dataTable thead th.sorting_asc:hover, table.dataTable thead th.sorting_desc:hover { color: var(--primary-ink); }
table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after { content: "\2195"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 0.8em; line-height: 1; opacity: 0.4; }
table.dataTable thead th.sorting_asc::after { content: "\2191"; opacity: 1; color: var(--primary-ink); }
table.dataTable thead th.sorting_desc::after { content: "\2193"; opacity: 1; color: var(--primary-ink); }

/* Phones: tighter shell, stacked header, full-width inputs and buttons */
@media (max-width: 640px) {
	body { font-size: 15px; }
	.inside, #header .inside, #container .inside, #footer .inside { padding: 0 14px; }
	#header .inside { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
	#header .theme-toggle { margin-left: 0; align-self: flex-start; }
	#main { padding: 18px 0 36px; }
	.mod_navigation ul { flex-direction: column; gap: 0; }
	.mod_navigation a, .mod_navigation strong { display: block; }
	form input, form select, form textarea { max-width: none; }
	input[type="submit"], button[type="submit"], .submit, .tl_submit, .action_button, .button { width: 100%; text-align: center; }
	.actions > *, .tl_submit_container > * { flex: 1 1 auto; }
	th, td { padding: 8px 9px; }
	.league_list > li, .league_venues > li, .venue, .league { padding: 12px 12px 12px 14px; }
	.scoresheet_details { grid-template-columns: 1fr; }
	.players_list table, .results { min-width: 0; }
	.dataTables_filter label, .dataTables_filter input[type="search"] { display: block; width: 100%; min-width: 0; }
}

/* Print: score sheets and standings on paper, nothing interactive. The dark selectors carry two
   simple selectors each, so a bare :root would lose to them and a dark-mode visitor would print a dark
   page; naming them here puts paper back on top whatever the screen theme was. */
@media print {
	:root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --paper: #fff; --ink: #000; --muted: #333; --line: #999; --tint: #eee; --accent-tint: #fff; --danger-tint: #fff; --on-primary: #000; --on-accent: #000; --shadow: none; }
	body { font-size: 11pt; }
	#header, #footer, .mod_navigation, .mod_breadcrumb, .mod_login_status, .actions, .toggles, .tl_submit_container, .print_link, .back,
	input[type="submit"], button, .status_action, .theme-toggle, .dataTables_filter, .dataTables_info { display: none !important; }
	table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after { content: none; }
	#main { padding: 0; }
	a { color: #000; text-decoration: none; }
	table { page-break-inside: auto; }
	tr { page-break-inside: avoid; }
	thead { display: table-header-group; }
	.players_list, .schedule_list, .standings { overflow: visible; }
	.players_list table, .results { min-width: 0; }
	.scoresheet_details { grid-template-columns: repeat(2, 1fr); }
	.scoresheet { page-break-inside: avoid; }
	.league_list > li, .league_venues > li, .venue, .league, .tl_tbox, .tl_formbody_edit { box-shadow: none; border-left-width: 1px; }
}