/* ==========================================================================
   site.css - the one stylesheet for the whole Hoops and Huddles site

   Replaces style.css (bowl, bowl_playoff, account and admin pages), pool.css
   (basketball pages) and bowl_playoff/playoff.css.  The old files now just
   import this one, so any page still linking to them gets the same look.

   Layout: a navy header band with the site menu, an optional section menu
   (pool or admin links) underneath, then each page's own content, centered.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root{
	/* color - evolved from the original #000090 navy and #FFFFE1 pale gold */
	--band:#1b2766;          /* header band, table headings */
	--band-dark:#141d4f;     /* button hover */
	--brand:#24348c;         /* links, buttons, active states */
	--brand-light:#8591d1;   /* second series next to --brand (playoff points) */
	--gold:#e7ae22;          /* highlights, current page marker */
	--gold-soft:#fcf3d6;     /* picked / hovered row wash */
	--silver:#d3d8e2;        /* 2nd place label (My Entries) */
	--bronze:#e2b48c;        /* 3rd place label (My Entries) */
	--ink:#161d36;           /* text */
	--muted:#5e6683;         /* secondary text, labels */
	--surface:#f3f5f9;       /* page background */
	--panel:#ffffff;         /* inputs, boxes */
	--line:#dde2ec;          /* borders, rules */
	--zebra:#f7f8fb;         /* alternate table rows */
	--tint:#e9ecf6;          /* heading rows inside tables */
	--done:#e6eaf3;          /* completed games in admin */
	--good:#1c8a4c;          /* correct */
	--bad:#c0392f;           /* wrong, errors */
	--alive:#2c58cc;         /* not decided yet / still alive */
	--on-band:#ffffff;
	--on-band-muted:#b9c2ea;
	--used-number:#ff9a8f;   /* used confidence values on the navy tracker bar */
	--on-gold:#161d36;       /* text on solid gold / silver / bronze badges: dark in both light and dark mode */
	--link-hover:#141d4f;    /* links when hovered */
	--title-brand:#1b2766;   /* "Hoops and Huddles" as a page title (the band's navy) */

	/* the dark mode colors are in site_dark.css, added by stylesheet.php */
	color-scheme: light;

	/* type */
	--display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
	--body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;

	--radius:6px;
}

/* anything marked hidden stays hidden, whatever display its class gives it
   (e.g. a .admin_toggles box is display: flex) */
[hidden]{ display: none !important; }

/* ---- page ---------------------------------------------------------------- */
/* a 16px gutter down both sides of every page, so nothing touches the edge of a phone
   screen (on a computer the centred panels are narrower than the window anyway); the
   header band and section menu reach past it to the edges (below) */
/* (no overflow setting on body: in Safari it can make the body its own scrolling box,
   and then pinned bars like the "Values used" tracker no longer stay in view) */
body{
	margin: 0px;
	padding: 0px 16px;
	background-color: var(--surface);
	color: var(--ink);
	font: 14px/1.45 var(--body);
}

img{ border: none; }

a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }
a:active{ color: var(--bad); }

:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---- site header band (include/site_header.php) ------------------------- */
.site_band{
	background-color: var(--band);
	color: var(--on-band);
	padding: 0px 16px;
	margin: 0px -16px;   /* edge to edge, past the page's side gutter (body) */
	text-align: left;
}
.site_band_inner{
	max-width: 1180px;
	margin: 0px auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 12px 0px;
}
a.site_wordmark, a.site_wordmark:hover{
	font: 700 28px/1 var(--display);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--on-band);
	text-decoration: none;
}
.site_wordmark span{ color: var(--gold); }
.site_nav{ display: flex; flex-wrap: wrap; gap: 4px; }
.site_nav a, .site_nav span{
	font: 600 15px/1 var(--body);
	padding: 8px 12px;
	border-radius: var(--radius);
	color: var(--on-band-muted);
	text-decoration: none;
}
.site_nav a:hover{ color: var(--on-band); background-color: rgba(255,255,255,.08); text-decoration: none; }
.site_nav span{ color: var(--on-band); background-color: rgba(255,255,255,.12); }
.site_nav a.site_look_toggle{ border: 1px solid rgba(255,255,255,.25); font-weight: 400; }
/* phones only: the Menu button that opens and closes the site links (see the
   max-width: 640px block below; computers never show it) */
.site_menu_button{
	display: none;
	align-items: center;
	gap: 8px;
	font: 600 15px/1 var(--body);
	padding: 9px 12px;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.3);
	background: none;
	color: var(--on-band);
	cursor: pointer;
}
.site_menu_button:hover, .site_menu_open .site_menu_button{ background-color: rgba(255,255,255,.12); }
/* three lines, drawn with a bar and its two shadows */
.site_menu_icon{ display: inline-block; width: 16px; height: 2px; margin: 5px 0px; background-color: currentColor; box-shadow: 0px -5px 0px currentColor, 0px 5px 0px currentColor; }
@media (max-width: 640px){
	.site_menu_button{ display: inline-flex; }
	.site_band_inner{ gap: 8px 12px; padding: 10px 0px; }
	/* folded away until Menu is tapped (site_menu_folds is added by the page's script, so
	   without scripts the links simply stay showing) */
	.site_menu_folds .site_nav{ display: none; }
	.site_menu_folds.site_menu_open .site_nav{ display: flex; }
	/* the open menu: one link per line, full width and easy to tap, the look buttons below */
	.site_menu_folds .site_nav{ flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0px 6px 0px; border-top: 1px solid rgba(255,255,255,.18); }
	.site_menu_folds .site_nav > a, .site_menu_folds .site_nav > span{ padding: 12px 10px; font-size: 16px; }
	.site_menu_folds .site_prefs{ margin: 6px 0px 0px 0px; padding: 12px 0px 0px 0px; border-left: 0px; border-top: 1px solid rgba(255,255,255,.18); }
}
/* the color menu (include/site_header.php): a button like Classic Look that opens
   the list of color schemes, each with a sample swatch */
.site_theme_menu{ position: relative; }
.site_theme_menu > summary{
	list-style: none;
	cursor: pointer;
	font: 400 15px/1 var(--body);
	padding: 8px 12px;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.25);
	color: var(--on-band-muted);
	white-space: nowrap;
}
.site_theme_menu > summary::-webkit-details-marker{ display: none; }
.site_theme_menu > summary::after{ content: " \25BE"; font-size: 12px; }
.site_theme_menu > summary:hover, .site_theme_menu[open] > summary{ color: var(--on-band); background-color: rgba(255,255,255,.1); }
.site_theme_list{
	position: absolute;
	right: 0px;
	top: calc(100% + 6px);
	z-index: 50;
	width: 270px;
	max-width: calc(100vw - 32px);
	margin: 0px;
	padding: 6px;
	list-style: none;
	text-align: left;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0px 10px 28px rgba(0,0,0,.22);
}
.site_nav .site_theme_list a{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; color: var(--ink); font: 400 14px/1.3 var(--body); background: none; }
.site_nav .site_theme_list a:hover{ color: var(--ink); background-color: var(--gold-soft); }
.site_nav .site_theme_list a.current_scheme{ background-color: var(--tint); }
.site_nav .site_theme_list span{ padding: 0px; border-radius: 0px; background-color: transparent; color: inherit; font: inherit; }
.site_nav .site_theme_list .site_theme_swatch{ flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.18); }
.site_theme_text{ display: flex; flex-direction: column; }
.site_theme_text small{ font-size: 12px; color: var(--muted); }

/* the look and light / dark buttons: their own group, after a divider */
.site_prefs{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 10px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }
/* who's logged in (the Account Info link): an icon and their first name */
.site_nav .site_user, .site_nav .site_user_name{ padding: 0px; border-radius: 0px; background: none; color: inherit; font: inherit; }
.site_nav .site_user{ display: inline-flex; align-items: center; gap: 6px; }
.site_nav .site_user_name{ display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.site_user_icon{ flex: none; opacity: .8; }

/* ---- section menu under the band (pool pages and admin) ---------------- */
.section_nav{
	background-color: var(--panel);
	border-bottom: 1px solid var(--line);
	padding: 0px 16px;
	margin: 0px -16px;   /* edge to edge, past the page's side gutter (body) */
	text-align: left;
}
.section_nav_inner{
	max-width: 1180px;
	margin: 0px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0px 2px;
}
.section_nav a, .section_nav span.current{
	font: 600 15px/1 var(--body);
	padding: 12px 14px 10px 14px;
	border-bottom: 3px solid transparent;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
}
/* the admin menu: the selected pool's pages, then (at the right, after a divider) the whole site's */
.section_nav_group{ display: flex; flex-wrap: wrap; gap: 0px 2px; }
.section_nav_site{ margin-left: auto; padding-left: 12px; border-left: 1px solid var(--line); }
/* a count beside a menu item, e.g. account requests waiting beside Users */
.section_nav .nav_count{ display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 9px; background-color: var(--gold); color: var(--ink); font-size: 12px; line-height: 1.3; vertical-align: 1px; }
.section_nav a:hover{ color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.section_nav span.current{ color: var(--ink); border-bottom-color: var(--gold); }
.section_nav .section_nav_label{
	font: 600 12px/1 var(--body);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	padding: 14px 10px 10px 0px;
}
/* phones: the button naming the page being shown, which opens the menu as a list
   (include/section_nav.js adds it, and section_nav_folds; computers never show it) */
.section_nav_button{ display: none; }
@media (max-width: 640px){
	.section_nav_folds .section_nav_button{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 13px 2px;
		border: 0px;
		background: none;
		font: 600 16px/1 var(--body);
		color: var(--ink);
		text-align: left;
		cursor: pointer;
	}
	.section_nav_folds .section_nav_button::after{ content: "\25BE"; font-size: 14px; color: var(--muted); transition: transform .15s; }
	.section_nav_folds.section_nav_open .section_nav_button::after{ transform: rotate(180deg); }
	@media (prefers-reduced-motion: reduce){ .section_nav_folds .section_nav_button::after{ transition: none; } }

	/* the list: one page per line, the current one marked in gold */
	.section_nav_folds .section_nav_inner{ display: none; }
	.section_nav_folds.section_nav_open .section_nav_inner{ display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; padding: 4px 0px 10px 0px; border-top: 1px solid var(--line); }
	.section_nav_folds .section_nav_inner a, .section_nav_folds .section_nav_inner span.current{ padding: 12px 10px; border-bottom: 0px; border-left: 3px solid transparent; font-size: 16px; }
	.section_nav_folds .section_nav_inner span.current{ border-left-color: var(--gold); background-color: var(--gold-soft); border-radius: 0px 4px 4px 0px; }
	.section_nav_folds .section_nav_inner a:hover{ border-bottom: 0px; background-color: var(--tint); }

	/* the admin menu's two groups, one above the other, each with its name */
	.section_nav_folds .section_nav_group{ flex-direction: column; flex-wrap: nowrap; gap: 0px; }
	.section_nav_folds .section_nav_group::before{ content: attr(aria-label); padding: 10px 10px 4px 10px; font: 600 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
	.section_nav_folds .section_nav_site{ margin: 6px 0px 0px 0px; padding: 4px 0px 0px 0px; border-left: 0px; border-top: 1px solid var(--line); }
}

/* ---- page titles -------------------------------------------------------- */
.page_title{
	margin: 22px auto 16px auto;
	border: 0px;
	background: none;
	font-family: var(--body);
	color: var(--ink);
}
.page_title td{
	padding: 2px 8px;
	text-align: center;
}
.page_title tr:first-child td{
	font: 700 32px/1.1 var(--display);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--ink);
}
/* "Hoops and Huddles" as a page title: the band's navy, with "and" in gold as in the header */
.page_title tr:first-child td.title_wordmark{ color: var(--title-brand); }
.page_title tr:first-child td.title_wordmark span{ color: var(--gold); }
.page_title tr + tr td{
	font: 600 17px/1.3 var(--body);
	color: var(--brand);
}
.page_title tr + tr + tr td{
	font: 400 14px/1.4 var(--body);
	color: var(--muted);
}

/* basketball pages' title rows */
.pooltitle td, tr.pooltitle{
	font: 700 32px/1.1 var(--display);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--ink);
	padding-top: 14px;
}
.pagetitle td, tr.pagetitle{
	font: 600 17px/1.3 var(--body);
	color: var(--brand);
}

.page_section{
	margin: 1em auto;
	background-color: var(--panel);
	max-width: 1000px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

/* ---- tables ------------------------------------------------------------- */
table{
	font: 13px/1.4 var(--body);
	color: var(--ink);
	padding: 2px;
	margin: 2px;
}
th, table th{
	background: var(--band);
	color: var(--on-band);
	font: 600 12px/1.3 var(--body);
	letter-spacing: .02em;
	text-align: center;
	padding: 6px 8px;
}
table a{ text-decoration: none; }
table a:hover{ text-decoration: underline; }

/* heading / message rows */
.rowtitle{ font-weight: 700; color: var(--brand); }
tr.rowtitle > td{ background-color: var(--tint); padding: 6px 8px; }

/* zebra rows and hover (row0 / row1 / row2, rowOn0 / rowOn1 / rowOn2) */
.row0 td{ background-color: var(--zebra); }
.row1 td{ background-color: var(--panel); }
.row2 td{ background-color: var(--done); }
.rowOn0 td, .rowOn1 td, .rowOn2 td{ background-color: var(--gold-soft); color: var(--ink); }
.rowOn0 a, .rowOn1 a, .rowOn2 a{ color: var(--brand); }
.rowOn0 a:hover, .rowOn1 a:hover, .rowOn2 a:hover{ color: var(--link-hover); }

.slimline{ height: 1px; border: 0px; background-color: var(--line); }

.title{ font-size: 15px; }

/* ---- labels ------------------------------------------------------------- */
.label, .labelLeft, .labelCenter{
	font: 600 13px/1.4 var(--body);
	color: var(--muted);
	text-align: right;
}
.labelLeft{ text-align: left; }
.labelCenter{ text-align: center; }

/* ---- form fields -------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
textarea, select,
.inputsmall, .inputsmall2, .inputsmall2err, .inputsmall4, .inputsmall5, .inputsmaller,
.inputsmall_medium, .inputsmall_wide, .inputsmall_nowidth, .inputTiebreaker, .inputGameScore,
.inputtextarea, .input_select{
	font: 14px/1.3 var(--body);
	color: var(--ink);
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 5px 8px;
	height: auto;
	box-sizing: border-box;
}
/* iPhone and iPad Safari zoom the page in when a box with text under 16px is tapped, and
   stay zoomed after the keyboard closes; while zoomed, pinned bars (the "Values used"
   tracker) slide off screen during scrolling.  16px boxes are never zoomed.  The
   @supports test is only true in Apple's mobile Safari, so computers and Android keep 14px. */
@supports (-webkit-touch-callout: none){
	input[type="text"], input[type="password"], input[type="email"], input[type="number"],
	input[type="search"], input[type="tel"], input[type="url"], input:not([type]), textarea, select{
		font-size: 16px !important;
	}
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
textarea:focus, select:focus{
	outline: none;
	border-color: var(--brand);
	box-shadow: 0px 0px 0px 3px var(--gold-soft);
}
input:disabled, textarea:disabled, select:disabled{ background-color: var(--surface); color: var(--muted); }

/* password boxes: the eye button inside the box's right end (include/password_toggle.js) */
.password_field{ position: relative; display: block; }
.password_field input{ width: 100%; padding-right: 40px; }
button.password_toggle{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	border: none;
	background: none;
	color: var(--muted);
	cursor: pointer;
	border-radius: 0px var(--radius) var(--radius) 0px;
}
button.password_toggle:hover{ color: var(--brand); }
button.password_toggle:focus-visible{ outline: 2px solid var(--brand); outline-offset: -3px; }
button.password_toggle[aria-pressed="true"]{ color: var(--brand); }

/* the old sizes are kept so forms don't reflow */
.inputsmall{ width: 48px; padding: 5px 4px; text-align: center; }
.inputsmall4{ width: 90px; }
.inputsmall2, .inputsmall2err{ width: 180px; }
.inputsmall2err{ border-color: var(--bad); }
.inputsmall5{ width: 32px; padding: 5px 2px; text-align: center; }
.inputsmaller{ width: 110px; }
.inputsmall_medium{ width: 220px; }
.inputsmall_wide{ width: 300px; }
.inputTiebreaker{ width: 48px; padding: 5px 4px; text-align: center; }
.inputGameScore{ width: 36px; padding: 4px 2px; text-align: center; }
.inputtextarea{ font-size: 13px; }
.inputsmall3{ width: 15px; height: 15px; accent-color: var(--brand); }
input[type="checkbox"], input[type="radio"]{ accent-color: var(--brand); }

/* ---- buttons ------------------------------------------------------------ */
input[type="button"], input[type="submit"], input[type="reset"], button.btn, .btn{
	font: 600 14px/1.2 var(--body);
	color: var(--on-band);
	background-color: var(--brand);
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	padding: 7px 16px;
	height: auto;
	cursor: pointer;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button.btn:hover, .btn:hover{
	background-color: var(--band-dark);
	border-color: var(--band-dark);
}
input[type="button"]:disabled, input[type="submit"]:disabled, button.btn:disabled, .btn:disabled{
	background-color: var(--line);
	border-color: var(--line);
	color: var(--muted);
	cursor: default;
}

/* large button-style link on the entry confirmation pages */
a.entry_action_link, a.entry_action_link:link, a.entry_action_link:visited{
	display: inline-block;
	padding: 11px 30px;
	margin: 6px 0px;
	background-color: var(--brand);
	color: var(--on-band);
	font: 600 17px/1.2 var(--body);
	text-decoration: none;
	border-radius: var(--radius);
}
a.entry_action_link:hover{ background-color: var(--band-dark); color: var(--on-band); text-decoration: none; }
.entry_limit_message{
	font: 600 15px/1.4 var(--body);
	color: var(--ink);
	padding-bottom: 6px;
}

/* ---- admin pool selector bar and old menu tables ------------------------ */
.navbar{
	font: 14px/1.4 var(--body);
	color: var(--muted);
	margin: 0px auto;
}
.navbar table{ margin: 0px; padding: 0px; }

/* ---- confidence value tracker (bowl entry and admin pages) -------------- */
.navlink{ font: 600 14px/1 var(--body); color: var(--on-band); }
.navlinkred{ font: 600 14px/1 var(--body); color: var(--used-number); text-decoration: line-through; }
.duplicate{ font: 700 14px/1 var(--body); color: var(--bad); }

/* ---- basketball bracket tables (tourney / sweet16) ---------------------- */
.datatable{ background-color: var(--line); border-radius: var(--radius); }
.datatable th{ padding: 5px 4px; }
.oddrow, .evenrow, .oddcorrectpick, .evencorrectpick, .oddwrongpick, .evenwrongpick,
.oddnotplayed, .evennotplayed, .oddtie, .eventie{
	font: 11px/1.35 var(--body);
	color: var(--ink);
	background-color: var(--panel);
}
.evenrow, .evencorrectpick, .evenwrongpick, .evennotplayed{ background-color: var(--zebra); }
.oddcorrectpick, .evencorrectpick{ color: var(--good); font-weight: 600; }
.oddwrongpick, .evenwrongpick{ color: var(--bad); }
.oddnotplayed, .evennotplayed{ color: var(--alive); }
.oddtie, .eventie{ color: var(--good); background-color: var(--done); }
a.pick{ color: var(--ink); }
a.pick:hover{ color: var(--brand); }

/* ---- College Football Playoff bracket (bowl_playoff pools) -------------- */
.bracket_wrapper{ overflow-x: auto; max-width: 100%; }
.bracket{ margin: 0px auto; border-collapse: separate; border-spacing: 14px 0px; }
.bracket_round_title{
	font: 700 15px/1 var(--display);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	text-align: center;
	padding-bottom: 8px;
	background: none;
}
.bracket_round_cell{ vertical-align: top; }
.bracket_round{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 200px;
	height: 440px;
}
.bracket_game{
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--panel);
	font: 14px/1.3 var(--body);
	text-align: left;
	overflow: hidden;
}
.bracket_game_name{
	font-size: 12px;
	color: var(--muted);
	background-color: var(--zebra);
	padding: 4px 8px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bracket_game_value{ float: right; padding-left: 4px; }
.bracket_slot{
	padding: 6px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.bracket_slot + .bracket_slot{ border-top: 1px solid var(--line); }
.bracket_slot:hover{ background-color: var(--gold-soft); }
.bracket_slot.empty{ color: var(--muted); font-style: italic; cursor: default; }
.bracket_slot.picked{ font-weight: 700; background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); }
.bracket_slot.eliminated{ color: var(--muted); }
.bracket_slot.correct, .bracket_champion.correct, .bracket_champion_text.correct{ color: var(--good); }
.bracket_slot.wrong, .bracket_champion.wrong, .bracket_champion_text.wrong{ color: var(--bad); text-decoration: line-through; }
.bracket_slot.pending, .bracket_champion.pending, .bracket_champion_text.pending{ color: var(--alive); }
/* Playoff Administration's Results bracket: a score box beside each team, an
   overtime box under each game (renderPlayoffBracket "admin" mode) */
.admin_bracket .bracket_round{ width: 230px; height: 600px; }
.bracket_slot.admin_slot{ display: flex; align-items: center; gap: 6px; padding: 4px 6px; cursor: default; }
.admin_slot .admin_slot_team{ min-width: 0px; overflow: hidden; text-overflow: ellipsis; }
input.admin_bracket_score{ flex: none; width: 3em; padding: 3px 4px; text-align: center; font-weight: 700; }
.bracket_admin_row{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 4px 8px; border-top: 1px solid var(--line); background-color: var(--zebra); font-size: 12px; color: var(--muted); }
input.admin_bracket_ot{ width: 2.4em; padding: 2px 4px; text-align: center; }
.bracket_admin_check{ color: var(--bad); font-weight: 600; }
/* basketball Game Administration: a scored game whose teams an earlier correction changed */
/* a score filled in by Fetch Scores from ESPN, until saved */
input.from_espn{ border-color: var(--alive); box-shadow: 0px 0px 0px 2px var(--alive); }
input.admin_bracket_score.needs_check{ border-color: var(--bad); box-shadow: 0px 0px 0px 2px var(--bad); }
.entry_notice.check_notice{ border-color: var(--bad); color: var(--bad); font-weight: 600; }
/* its Game Details section, closed to start with */
details.playoff_game_details > summary{ cursor: pointer; list-style: none; }
details.playoff_game_details > summary::-webkit-details-marker{ display: none; }
details.playoff_game_details > summary::after{ content: "\25B8"; color: var(--muted); transition: transform .15s; }
details.playoff_game_details[open] > summary::after{ transform: rotate(90deg); }
.playoff_details_round{ margin: 14px 0px 6px 0px; font: 700 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.playoff_details_round:first-child{ margin-top: 0px; }
.bracket_team_link{ float: right; padding-left: 4px; color: var(--muted); font-weight: 400; text-decoration: none; }
.bracket_team_link:hover{ color: var(--brand); text-decoration: none; }
.bracket_score{ float: right; padding-left: 6px; font-weight: 700; }
.bracket_actual{
	font-size: 12px;
	color: var(--muted);
	padding: 3px 8px;
	border-top: 1px dashed var(--line);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bracket_champion{
	border: 2px solid var(--gold);
	border-radius: 8px;
	background-color: var(--gold-soft);
	font: 700 20px/1.15 var(--display);
	text-transform: uppercase;
	text-align: center;
	padding: 14px 8px;
	min-height: 20px;
}

/* ---- Bowl Results game cards (bowl/bowl_results.php) --------------------- */
.results_grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
	max-width: 1080px;
	margin: 0px auto 8px auto;
	padding: 0px 16px;
	text-align: left;
}
/* the group headings (Today's Games, ...) start at the cards' left edge */
.section_title.results_title{ max-width: 1080px; margin: 0px auto; padding-left: 16px; padding-right: 16px; text-align: left; }
/* phones: one card per row across the full width (the page's own side gutter is
   enough), and never wider than the screen, however narrow */
@media (max-width: 640px){
	.results_grid{ grid-template-columns: minmax(0px, 1fr); gap: 10px; padding-left: 0px; padding-right: 0px; }
	.section_title.results_title{ padding-left: 0px; padding-right: 0px; }
}
.result_card, a.result_card:hover{
	display: block;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
}
a.result_card:hover{ border-color: var(--brand); }
.result_card.today{ border: 2px solid var(--gold); }
/* cards side by side (Bowl Results): the header takes any extra height, so when one
   card's place and time wraps to another line, every card's team rows still line up */
.results_grid .result_card, .results_grid a.result_card:hover{ display: flex; flex-direction: column; }
.results_grid .result_card_head{ flex: 1 0 auto; align-content: start; }
/* Bowl Results and Bowl Picks put the place and the date on separate lines: the status sits beside all three */
.results_grid .result_card_status, .picks_game .result_card_status{ grid-row: 1 / span 3; }
.result_card_head{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0px 10px;
	padding: 7px 10px;
	background-color: var(--zebra);
	border-bottom: 1px solid var(--line);
}
.result_card_name{ font: 700 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.result_card_when{ grid-column: 1; font-size: 12px; color: var(--muted); }
.result_card_status{
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font: 600 12px/1 var(--body);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
}
.result_team{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	font-size: 15px;
}
.result_team + .result_team{ border-top: 1px solid var(--line); }
.result_team small{ font-size: 12px; color: var(--muted); font-weight: 400; }
.result_score{ font-weight: 700; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.result_team.winner{ font-weight: 700; background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); }
.result_team.loser{ color: var(--muted); }
a.result_card:hover .result_team_name{ text-decoration: underline; }

/* ---- Bowl Picks: the game, then who picked each team (bowl/bowl_picks.php) ---- */
/* the same width as the team columns below, so their edges line up */
.picks_game{ max-width: 900px; margin: 0px auto 18px auto; padding: 0px 16px; text-align: left; }
/* heading over the team columns, starting at their left edge (Bowl Picks, Who Picked Whom) */
.picks_columns_title{ max-width: 900px; margin: 0px auto 10px auto; padding: 0px 16px; text-align: left; font: 700 21px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
/* "Back to Results" above the game card (Bowl Picks, Who Picked Whom) */
a.picks_back{ display: inline-block; margin-bottom: 8px; font: 600 13px/1.3 var(--body); color: var(--brand); text-decoration: none; }
a.picks_back:hover{ text-decoration: underline; }
/* the game you came back to, on Bowl Results or the results bracket */
.result_card:target{ box-shadow: 0px 0px 0px 3px var(--gold); }
.result_card{ scroll-margin: 24px; }
a.bracket_picks_link:target{ background-color: var(--gold-soft); border-radius: 3px; padding: 0px 4px; }
a.bracket_picks_link{ scroll-margin: 120px 160px; }
/* the bowl you came back to on Player Picks; the top margin clears the pinned bar */
tr.picks_return_row{ scroll-margin-top: 180px; }
table.standings_table tbody tr.picks_return_row:target td{ background-color: var(--gold-soft); }
.picks_columns{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	align-items: start;          /* every column starts at the top, whatever its length */
	max-width: 900px;
	margin: 0px auto;
	padding: 0px 16px;
	text-align: left;
}
.picks_column{
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-top: 4px solid var(--alive);
	border-radius: var(--radius);
	overflow: hidden;
}
.picks_column.correct{ border-top-color: var(--good); }
.picks_column.wrong{ border-top-color: var(--bad); }
.picks_column_head{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
}
.picks_column_team{ font: 700 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.picks_column.wrong .picks_column_team{ color: var(--muted); }   /* no strike-through: the red status pill says it */
.picks_column_count{ font-size: 13px; color: var(--muted); }
.picks_status{
	flex: none;
	font: 600 12px/1 var(--body);
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 5px 9px;
	border-radius: 999px;
	color: var(--on-band);
	background-color: var(--alive);
}
.picks_column.correct .picks_status{ background-color: var(--good); }
.picks_column.wrong .picks_status{ background-color: var(--bad); }
/* phones: the page's own side gutter is enough, so the game card, heading and team
   columns use the full width (the columns already stack, one team above the other),
   and a chooser in the page title (e.g. Bowl Picks' bowl list, whose options are long)
   is never wider than the screen */
@media (max-width: 640px){
	.picks_game, .picks_columns_title, .picks_columns{ padding-left: 0px; padding-right: 0px; }
	.picks_columns{ grid-template-columns: minmax(0px, 1fr); gap: 12px; }
	.picks_column_team{ font-size: 18px; }
	.page_title select{ max-width: calc(100vw - 90px); }
}
table.picks_list{ width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; }
table.picks_list th{ background: var(--zebra); color: var(--muted); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
table.picks_list td{ padding: 6px 12px; border-top: 1px solid var(--line); font-size: 14px; }
table.picks_list tbody tr:nth-child(even) td{ background-color: var(--zebra); }
.picks_list .picks_points{ text-align: right; font-variant-numeric: tabular-nums; width: 60px; }
.picks_list .picks_none{ color: var(--muted); font-style: italic; text-align: center; }
.picks_list tfoot td{ font-weight: 700; background-color: var(--tint); }
.picks_column.correct tfoot td{ color: var(--good); }
.picks_column.wrong tfoot td{ color: var(--bad); }

/* ---- Player Picks pinned bar (tourney/player_picks_summary.php) --------- */
.picks_bar{
	position: -webkit-sticky;    /* older iPhones */
	position: sticky;
	top: 0px;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: 1120px;
	margin: 0px auto 12px auto;
	padding: 12px 16px;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0px 6px 16px rgba(12,18,54,.10);
	text-align: left;
	box-sizing: border-box;      /* max-width includes the padding, so it matches the panels below */
}
/* over a standard-width panel (bowl and bowl_playoff Player Picks) */
.picks_bar.standings_width{ max-width: 980px; }
.picks_bar_left{ display: flex; flex-direction: column; gap: 6px; }
.picks_bar label{ font-weight: 600; margin-right: 6px; }
.picks_bar select{ font-weight: 600; }
.picks_key{ display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; font-weight: 600; }
.picks_key span{ display: inline-flex; align-items: center; gap: 6px; }
.picks_key span::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; }
.picks_key .correct{ color: var(--good); }
.picks_key .pending{ color: var(--alive); }
.picks_key .wrong{ color: var(--bad); }
.picks_bar_stats{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: 14px; color: var(--muted); }
.picks_bar_stats b{ font: 700 22px/1 var(--display); color: var(--ink); margin-right: 4px; }

/* hybrid Player Picks: bowl picks and bracket panels, each with a header */
.standings_panel.picks_panel{ margin-bottom: 18px; }
.picks_panel_head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
}
.picks_panel_title{ font: 700 21px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
/* which of a player's entries the heading is about ("Entry #2"), smaller, beside the name (Player Picks) */
.picks_panel_title .picks_panel_entry{ margin-left: 6px; font: 600 14px/1 var(--body); text-transform: none; letter-spacing: 0px; color: var(--muted); white-space: nowrap; }
.picks_panel_note{ font-size: 13px; color: var(--muted); }
.picks_panel_body{ padding: 14px 8px; }

/* bowl Player Picks table */
.picks_when{ font-size: 12px; color: var(--muted); }
.pick_points.correct{ color: var(--good); }
.pick_points.wrong{ color: var(--bad); text-decoration: line-through; }
.pick_points.pending{ color: var(--alive); }

/* ---- Entry form (bowl_playoff/pool_entry.php) --------------------------- */
.entry_panel{
	max-width: 1120px;
	margin: 0px auto 18px auto;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: left;
	/* no overflow: hidden here - it would stop the tracker from staying pinned */
}
.entry_panel_body{ padding: 14px 16px; }
.entry_notice{
	max-width: 1120px;
	margin: 0px auto 16px auto;
	padding: 12px 16px;
	border: 1px solid var(--bad);
	border-radius: var(--radius);
	background-color: var(--panel);
	color: var(--bad);
	font-weight: 600;
	text-align: center;
}
.entry_fields{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.entry_field{ display: flex; flex-direction: column; gap: 4px; }
.entry_field label{ font: 600 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.entry_field input, .entry_field textarea{ width: 100%; }
.entry_message{ margin-top: 14px; }
.entry_hint{ font-size: 12px; color: var(--muted); }

/* pinned "Values used" tracker */
.entry_tracker{
	position: -webkit-sticky;    /* older iPhones */
	position: sticky;
	top: 0px;
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 16px;
	background-color: var(--panel);
	border-bottom: 1px solid var(--line);
	box-shadow: 0px 6px 12px -8px rgba(12,18,54,.25);
}
.entry_tracker_summary{ display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.entry_tracker_summary b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.entry_tracker_label{ font: 600 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; }
.entry_tracker_dups{ color: var(--bad); font-weight: 600; }
.entry_tracker_values{ display: grid; grid-template-columns: repeat(auto-fill, 28px); justify-content: center; gap: 4px; }
.entry_tracker_values b{
	width: 28px;
	height: 26px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 5px;
	font: 600 13px/1 var(--body);
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.entry_tracker_values b.used{ background-color: var(--band); border-color: var(--band); color: var(--on-band); }
.entry_tracker_values b.dup{ background-color: var(--bad); border-color: var(--bad); color: var(--on-band); }

/* one row per bowl: name, two team buttons, points */
.entry_bowl{
	display: grid;
	grid-template-columns: minmax(180px, 1.1fr) minmax(260px, 1.6fr) 120px;
	gap: 10px 18px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
}
.entry_bowl:last-child{ border-bottom: 0px; }
.entry_bowl_name{ font-weight: 700; }
.entry_choose{ display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.entry_choose input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.entry_choose label{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	background-color: var(--surface);
	font-size: 15px;
	cursor: pointer;
}
.entry_choose label + input + label{ border-left: 1px solid var(--line); }
.entry_choose label small{ font-size: 12px; color: var(--muted); }
.entry_choose label:hover{ background-color: var(--gold-soft); }
.entry_choose input:checked + label{ background-color: var(--gold-soft); box-shadow: inset 0px -3px 0px var(--gold); font-weight: 700; }
.entry_choose input:focus-visible + label{ outline: 3px solid var(--gold); outline-offset: -3px; }
.entry_team_link{ color: var(--muted); text-decoration: none; font-weight: 400; }
.entry_team_link:hover{ color: var(--brand); text-decoration: none; }
.entry_points_cell{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.entry_points_cell label{ font-size: 13px; color: var(--muted); }
input.entry_points{ width: 62px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
input.entry_points.dup{ border-color: var(--bad); color: var(--bad); }

/* entry confirmation (bowl_playoff/pool_entry_process.php) */
.entry_success{
	max-width: 1120px;
	margin: 0px auto 18px auto;
	padding: 16px 18px;
	border: 1px solid var(--good);
	border-left: 6px solid var(--good);
	border-radius: var(--radius);
	background-color: var(--panel);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.entry_success_title{ font: 700 22px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--good); }
.entry_success_actions{ margin-top: 4px; }
dl.entry_summary{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 18px;
	margin: 0px;
	padding: 14px 16px;
}
dl.entry_summary dt{ font: 600 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
dl.entry_summary dd{ margin: 2px 0px 0px 0px; font-size: 15px; }
dl.entry_summary .entry_summary_wide{ grid-column: 1 / -1; }
.entry_next{ max-width: 1120px; margin: 4px auto 0px auto; text-align: center; }

/* "Entry Not Submitted" */
.entry_panel.entry_problem{ border-color: var(--bad); border-left: 6px solid var(--bad); }
.entry_problem .picks_panel_title{ color: var(--bad); }
ul.entry_problem_list{ margin: 0px 0px 14px 0px; padding-left: 20px; }
ul.entry_problem_list li{ margin-bottom: 4px; }

/* printing: just the entry, without the menus and buttons */
@media print{
	body{ background-color: #ffffff; }
	.site_band, .section_nav, .no_print, #myBtn{ display: none !important; }
	.entry_panel, .standings_panel, .entry_success{ border-color: #999999; break-inside: avoid; }

	/* the pick colors (green, red, blue) and highlights print as they look on screen,
	   rather than being dropped to save ink */
	body{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

	/* brackets: a printer can't scroll, so the whole bracket prints, shrunk by
	   include/print_brackets.js to fit the page (which also asks for landscape) */
	.tourney_entry_scroll, .bracket_wrapper{ overflow: visible !important; }
	.tourney_entry_scroll::before{ display: none !important; }   /* the phones' "swipe sideways" note */
	.entry_panel.bracket_fit, .entry_panel.entry_panel_full.bracket_fit, .standings_panel.bracket_fit, .bracket_fit_group{ width: auto !important; max-width: none !important; }
	.picks_bar{ position: static; box-shadow: none; }
	/* the spacing at the bottom of a bracket page would spill onto an empty last page */
	.bracket_fit ~ br, .bracket_fit_group ~ br{ display: none; }
}
/* printing a page with a bracket (include/print_brackets.js adds "printing" to <html>
   while it prints, and measures the page this way, so the bracket can be sized to share
   the first page): the title and player summary above the bracket print compactly, and
   the "Showing" player list (a dropdown, no use on paper; the bracket's heading names
   the player) is left out */
/* the page is laid out at a landscape page's width (11in less 0.4in margins, less the
   body's 16px side gutters), on a phone too, so what's measured is what prints */
html.printing body{ width: 947px; }
html.printing .tourney_entry_scroll::before{ display: none; }   /* the phones' "swipe sideways" note */
html.printing .page_title{ margin: 0px auto 8px auto; }
html.printing .page_title tr:first-child td{ font-size: 24px; }
html.printing .page_title tr + tr td{ font-size: 14px; }
html.printing .picks_bar{ margin-bottom: 8px; padding: 8px 14px; gap: 4px 20px; }
html.printing .picks_bar_left > div:first-child{ display: none; }
html.printing .picks_bar_stats b{ font-size: 18px; }
html.printing .bracket_fit .picks_panel_head{ padding-top: 8px; padding-bottom: 8px; }

/* bracket footer: tiebreaker and buttons */
.entry_footer{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 14px 16px;
	border-top: 1px solid var(--line);
}
.entry_tiebreaker input{ width: 90px; }
.entry_buttons{ display: flex; flex-wrap: wrap; gap: 10px; }
input.button_secondary{ background-color: var(--panel); color: var(--ink); border-color: var(--line); }
input.button_secondary:hover{ background-color: var(--surface); border-color: var(--muted); color: var(--ink); }

/* ---- pool list (index.php) --------------------------------------------- */
.pool_section{ max-width: 1120px; margin: 0px auto 26px auto; text-align: left; }
.pool_section_title{ margin: 0px 0px 10px 0px; font: 700 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pool_cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.pool_cards.past{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pool_card{
	display: flex;
	flex-direction: column;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.pool_card.open{ box-shadow: inset 0px 4px 0px var(--gold); }
.pool_card.live{ box-shadow: inset 0px 4px 0px var(--brand); }
.pool_card_main, .pool_card_child{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	color: var(--ink);
	text-decoration: none;
}
.pool_card_child{ padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--line); background-color: var(--surface); }
.pool_card_main:hover, .pool_card_child:hover{ background-color: var(--gold-soft); color: var(--ink); text-decoration: none; }
.pool_card_main:focus-visible, .pool_card_child:focus-visible{ outline: 3px solid var(--gold); outline-offset: -3px; }
.pool_card_top{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; }
.pool_card_type{ font: 600 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pool_card_name{ font: 700 22px/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.pool_card_child .pool_card_name{ font-size: 18px; }
.pool_cards.past .pool_card_name{ font-size: 18px; }
.pool_card_action{ font-size: 13px; font-weight: 600; color: var(--brand); }
.pool_cards.past .pool_card_action{ color: var(--muted); }
.pool_status{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.pool_status::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; }
.pool_status.open{ color: var(--good); }
.pool_status.live{ color: var(--alive); }
.pool_status.final{ color: var(--muted); }
/* admin pool selector (admin/pool_administration_selector.php), on every pool admin page */
form.admin_pool_picker{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0px auto 18px auto;
	padding: 8px 14px;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: 600 12px/1.3 var(--body);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
}
form.admin_pool_picker select{ font: 600 15px/1.3 var(--body); text-transform: none; letter-spacing: 0px; color: var(--ink); max-width: 70vw; }
/* the older admin pages place it inside the page title */
.page_title form.admin_pool_picker{ margin: 6px 0px 0px 0px; }
/* on its own (Pool Administration), centered under the title */
body > form.admin_pool_picker{ display: flex; width: max-content; max-width: calc(100% - 32px); }

/* the Standings pages' pool drop-down (include/standings_pool_picker.php), styled like the admin one */
.standings_pool_picker{
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: calc(100% - 32px);
	box-sizing: border-box;
	margin: 0px auto 18px auto;
	padding: 8px 14px;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: 600 12px/1.3 var(--body);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
}
.standings_pool_picker select{ min-width: 0px; max-width: 70vw; font: 600 15px/1.3 var(--body); text-transform: none; letter-spacing: 0px; color: var(--ink); }
/* pools with the player's entries, in the open list (browsers that allow coloring options) */
.standings_pool_picker option{ color: var(--ink); font-weight: 400; }
.standings_pool_picker option.picker_mine{ color: var(--brand); font-weight: 700; }

/* Pool Administration (admin/pool_administration.php) */
.admin_saved{ border: 0px; background: none; }
.entry_field.admin_field_wide{ grid-column: 1 / -1; }
input.admin_number{ width: 90px; }
.admin_toggles{ display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
/* Pool Administration's basketball Scoring: one small box per round, side by side */
.scoring_rounds{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px 16px; }
.settings_group_title{ margin: 22px 0px 10px 0px; font: 700 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }   /* a group of fields within a Site Settings panel */
.settings_group_title:first-child{ margin-top: 0px; }
.settings_reference{ display: grid; grid-template-columns: max-content minmax(0px, 1fr); gap: 8px 24px; margin: 0px; font-size: 14px; }   /* Site Settings' server settings: label, then value, one per line */
.settings_reference dt{ color: var(--muted); font-weight: 600; }
.settings_reference dd{ margin: 0px; overflow-wrap: anywhere; }
@media (max-width: 640px){
	.settings_reference{ grid-template-columns: minmax(0px, 1fr); gap: 0px; }
	.settings_reference dd{ margin-bottom: 8px; }
}
.scoring_total{ margin: 14px 0px 0px 0px; }
.scoring_rounds .scoring_mixed{ color: var(--bad); }
.scoring_total b{ font: 700 20px/1 var(--display); color: var(--ink); }
.entry_fields + .admin_toggles{ padding-top: 12px; border-top: 1px solid var(--line); }
label.admin_toggle{ display: flex; align-items: flex-start; gap: 12px; padding: 8px 4px; border-radius: 6px; cursor: pointer; }
label.admin_toggle:hover{ background-color: var(--surface); }
label.admin_toggle input{ flex: none; width: 18px; height: 18px; margin: 2px 0px 0px 0px; }
/* the Stage choice (Pool Administration, Add Pool): the chosen stage stands out */
.admin_stages{ margin-top: 0px; }
.admin_stages label.admin_toggle:has(input:checked){ background-color: var(--tint); }
.admin_stages + .admin_toggles{ padding-top: 10px; border-top: 1px solid var(--line); }
label.admin_toggle span{ display: flex; flex-direction: column; gap: 2px; }
label.admin_toggle b{ font-weight: 600; }
label.admin_toggle small{ font-size: 13px; color: var(--muted); }

/* Game Administration (admin/game_administration_bowl.php): one card per bowl */
a.button_link, a.button_link:link, a.button_link:visited{ display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--panel); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
a.button_link:hover{ background-color: var(--surface); border-color: var(--muted); color: var(--ink); text-decoration: none; }
.game_admin_bar{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; max-width: 1120px; margin: 0px auto 18px auto; text-align: left; }
.game_admin_progress{ font-size: 15px; color: var(--muted); }
.game_admin_progress b{ font: 700 22px/1 var(--display); color: var(--ink); }
details.game_admin_section{ max-width: 1120px; margin: 0px auto 22px auto; text-align: left; }
details.game_admin_section > summary{ cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.game_admin_section > summary::-webkit-details-marker{ display: none; }
details.game_admin_section > summary::before{ content: "\25B8"; font-size: 14px; transition: transform .15s; }
details.game_admin_section[open] > summary::before{ transform: rotate(90deg); }
.game_admin_count{ padding: 1px 8px; border-radius: 10px; background-color: var(--surface); border: 1px solid var(--line); font: 600 12px/1.4 var(--body); color: var(--muted); }
.game_admin_card{ margin-bottom: 12px; background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 12px; }
.game_admin_card.next{ border-color: var(--gold); box-shadow: inset 0px 4px 0px var(--gold); }
.game_admin_card.done{ box-shadow: inset 4px 0px 0px var(--good); }
.game_admin_head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 14px 16px 8px 16px; }
.game_admin_name{ font: 700 20px/1.2 var(--display); text-transform: uppercase; }
.game_admin_id{ font-size: 12px; color: var(--muted); margin-left: 4px; }
.game_admin_next{ margin-left: 6px; padding: 2px 8px; border-radius: 10px; background-color: var(--gold-soft); border: 1px solid var(--gold); font-size: 12px; font-weight: 600; }
/* the team suggestions under a team name box (admin/include/team_picker.js) */
.team_suggest{
	position: absolute;
	z-index: 1000;
	max-width: calc(100vw - 32px);
	max-height: 280px;
	overflow-y: auto;
	margin: 0px;
	padding: 4px;
	list-style: none;
	text-align: left;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0px 10px 28px rgba(0,0,0,.18);
}
.team_suggest li{ padding: 9px 10px; border-radius: 4px; font-size: 15px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.team_suggest li:hover, .team_suggest li.active{ background-color: var(--gold-soft); }
.team_suggest small{ margin-left: 6px; font-size: 12px; color: var(--muted); }
/* a team name that isn't in the team list yet (admin/include/team_picker.js): saving adds it */
input.team_new{ border-style: dashed; border-color: var(--gold); }
/* Set Up From ESPN (admin/espn_setup_bowls.php): the season chooser, the bowl list and
   its name boxes (a name over the 30 characters a bowl name holds is marked red) */
.setup_season_bar{ align-items: flex-end; }
.setup_season{ min-width: 220px; }
.setup_tools{ padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--line); text-align: left; }
.setup_table input.setup_name{ width: 100%; min-width: 180px; max-width: 320px; margin-bottom: 4px; }
.setup_table input.setup_too_long{ border-color: var(--bad); box-shadow: inset 0px 0px 0px 1px var(--bad); }
table.standings_table tbody tr.setup_in_pool td{ color: var(--muted); }
/* Fill In From ESPN (admin/espn_setup_tourney.php): the four regions laid out as the
   bracket's corners, each with its region chooser, name and 16 seeds */
.espn_field_corners{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-areas: "ul ur" "ll lr"; gap: 18px 24px; }
.espn_field_ul{ grid-area: ul; }
.espn_field_ur{ grid-area: ur; }
.espn_field_ll{ grid-area: ll; }
.espn_field_lr{ grid-area: lr; }
.espn_field_corner{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); }
.espn_field_teams{ list-style: none; margin: 4px 0px 0px 0px; padding: 0px; font-size: 14px; }
.espn_field_teams li{ padding: 3px 0px; border-bottom: 1px solid var(--line); }
.espn_field_seed{ display: inline-block; min-width: 1.6em; font: 700 15px/1 var(--display); color: var(--muted); }
@media (max-width: 640px){
	.espn_field_corners{ grid-template-columns: minmax(0px, 1fr); grid-template-areas: "ul" "ll" "ur" "lr"; }
}
/* a bowl whose scores were just filled in by Fetch Scores from ESPN (still to be checked and saved) */
.game_admin_espn{ margin-left: 6px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--alive); color: var(--alive); font: 600 12px/1.4 var(--body); white-space: nowrap; }
/* a bowl with changes not saved yet (and the count of them in the top bar) */
.game_admin_unsaved{ margin-left: 6px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--bad); color: var(--bad); font: 600 12px/1.4 var(--body); white-space: nowrap; }
.game_admin_status{ display: flex; align-items: center; gap: 14px; }
.pool_status.needed{ color: var(--bad); }
.game_admin_winner{ font-size: 14px; color: var(--good); }
.game_admin_teams{ display: grid; grid-template-columns: 60px minmax(160px, 1fr) 150px 80px; gap: 6px 10px; align-items: center; padding: 4px 16px 12px 16px; }
/* a team name box with the note under it (admin/include/team_picker.php): a team with no
   link code yet links to Team List, where codes are set */
.team_name_cell input{ width: 100%; }
.team_code_note{ display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.team_code_note a{ font-weight: 600; }
/* a team's record as three small boxes, wins - losses - ties (admin/include/admin_forms.php) */
.record_inputs{ display: flex; align-items: center; gap: 3px; }
.record_inputs input, .game_admin_teams .record_inputs input, .teams_admin_list .record_inputs input, .playoff_admin_teams .record_inputs input{ width: 3.2em; min-width: 0px; padding-left: 4px; padding-right: 4px; text-align: center; }
.record_dash{ color: var(--muted); }
.game_admin_col{ font: 600 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.game_admin_side{ font-weight: 600; color: var(--muted); }
.game_admin_teams input{ width: 100%; }
input.game_admin_score{ font: 700 18px/1 var(--display); text-align: center; }
.game_admin_details{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.entry_panel_body .game_admin_details{ padding: 0px 0px 12px 0px; border-top: 0px; }
.game_admin_foot{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 16px; border-top: 1px solid var(--line); background-color: var(--surface); border-radius: 0px 0px var(--radius) var(--radius); }
.game_admin_foot input.admin_delete:hover{ border-color: var(--bad); color: var(--bad); }
.entry_panel.game_admin_add{ scroll-margin-top: 12px; }
.game_admin_warning{ color: var(--bad); font-weight: 600; }
/* each team's boxes are grouped in the page (admin/game_administration_bowl.php); on a
   computer the groups and the small labels make no difference: the boxes fill the
   grid's columns under the headings (team, record, score) */
.game_admin_side_row, .game_admin_cell{ display: contents; }
.game_admin_cell_label{ display: none; }
/* on phones each team is its own block: the name across the full width, then its
   code, record and score side by side, each with its own small label */
@media (max-width: 640px){
	.game_admin_teams{ display: block; }
	.game_admin_teams > .game_admin_col{ display: none; }
	.game_admin_side_row{ display: grid; grid-template-columns: auto minmax(52px, 68px); justify-content: space-between; align-items: end; gap: 6px 10px; }
	.game_admin_side_row + .game_admin_side_row{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
	.game_admin_side_row > .game_admin_side, .game_admin_side_row > .team_name_cell{ grid-column: 1 / -1; }
	.game_admin_cell{ display: flex; flex-direction: column; gap: 3px; min-width: 0px; }
	.game_admin_cell_label{ display: block; font: 600 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
}

/* User Administration (admin/user_admin.php) */
.user_admin_tools{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.user_admin_search{ flex: 1 1 240px; max-width: 360px; }
.user_admin_table tbody.user_admin_row > tr:first-child > td{ vertical-align: middle; }
.user_admin_tag{ display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); }
.user_admin_tag.admin{ border-color: var(--brand); color: var(--brand); background-color: var(--panel); }
.user_admin_tag.inactive{ border-color: var(--bad); color: var(--bad); background-color: var(--panel); }
.user_admin_tag.active_now{ border-color: var(--good); color: var(--good); background-color: var(--panel); }   /* a page loaded in the last few minutes */
.user_admin_colors{ text-align: center; margin: -8px 16px 16px 16px; }   /* the colors the accounts use, under the summary */
.user_admin_you{ margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
table.standings_table tbody.user_admin_row tr.user_admin_edit > td{ background-color: var(--gold-soft); white-space: normal; padding: 14px 16px; }
.user_admin_fields{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }
.user_admin_edit_foot{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 12px; }
.user_admin_none{ padding: 14px 16px; margin: 0px; }
/* Add User: the button at the right of the tools row, and the panel it opens under it */
.user_admin_add_button{ margin-left: auto; }
.user_admin_add{ padding: 14px 16px; background-color: var(--gold-soft); border-bottom: 1px solid var(--line); text-align: left; }
.user_admin_add > .entry_hint{ margin: 4px 0px 12px 0px; }
/* Request an Account: the field only bots fill in, kept out of sight (and out of reach of the keyboard) */
.request_trap{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* User Administration: account requests waiting for an answer */
.account_requests{ max-width: 1120px; margin: 0px auto 18px auto; text-align: left; }
.account_request{ padding: 14px 16px; border-top: 1px solid var(--line); }
.account_request:first-of-type{ border-top: 0px; }
.account_request_meta{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0px 0px 10px 0px; color: var(--muted); font-size: 14px; }
.account_request_note{ margin: 0px 0px 10px 0px; font-style: italic; }
.account_request_setting{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; background-color: var(--surface); }
.account_request_setting .admin_toggle{ flex: 1 1 320px; }
.admin_requests_notice{ max-width: 1120px; margin: 0px auto 18px auto; text-align: left; }
/* Team List (admin/team_list.php): the team just added, saved or merged into */
table.standings_table tbody.team_list_highlight > tr:first-child > td{ background-color: var(--gold-soft); }

/* Email Picks to Player preview (admin/send_entry_email.php) */
/* Email Players (admin/email_players.php) */
.email_compose_field{ margin-top: 14px; }
.email_compose_field textarea{ width: 100%; font: 15px/1.5 var(--body); }
.email_compose_field select{ max-width: 100%; }
.email_fill_ins{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
button.email_fill_in{ padding: 3px 8px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--surface); color: var(--brand); font: 600 12px/1.3 ui-monospace, Consolas, monospace; cursor: pointer; }
button.email_fill_in:hover{ border-color: var(--brand); }
.email_fill_ins > .entry_hint:first-child{ min-width: 12em; }
p.email_season_pools{ margin: 8px 0px 0px 0px; }
.email_recipient_tools{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 12px 0px 6px 0px; font-size: 13px; }
.email_recipients{ max-height: 380px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); }
/* "Not Sent Yet" and "Already Sent", each a heading and its own grid of names */
.email_recipient_group{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; }
.email_recipient_group + .email_recipient_group{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.email_recipient_heading{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 4px; font-size: 13px; }
.email_recipient_heading b{ font: 600 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
label.email_recipient{ align-items: flex-start; font-size: 14px; padding: 3px 0px; }
label.email_recipient input{ margin-top: 3px; }
label.email_recipient small{ display: block; color: var(--muted); font-size: 12px; word-break: break-all; }
details.email_contacts{ margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
details.email_contacts summary{ cursor: pointer; font-weight: 600; color: var(--brand); }
.email_contact_add{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 12px 0px; }
.email_contact_add .entry_field{ flex: 1 1 180px; }
.email_contact{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0px; border-bottom: 1px solid var(--line); font-size: 14px; }
.email_contact small{ color: var(--muted); margin-left: 4px; word-break: break-all; }
.email_progress{ padding: 0px 16px 14px 16px; }
.email_progress_bar{ height: 10px; border-radius: 5px; background-color: var(--line); overflow: hidden; margin-bottom: 6px; }
.email_progress_bar span{ display: block; height: 100%; width: 0%; background-color: var(--good); transition: width .3s; }
.email_preview_frame{ padding: 0px 16px 14px 16px; }
.email_preview_frame iframe{ display: block; width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background-color: #ffffff; }
details.email_preview_text{ margin: 0px 16px 14px 16px; }
details.email_preview_text summary{ cursor: pointer; font-size: 14px; font-weight: 600; color: var(--brand); }
details.email_preview_text pre{ max-height: 320px; overflow: auto; margin: 8px 0px 0px 0px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; }

/* Scenario Tools (admin/scenario_calculator_tools.php): the data files, two across */
.scenario_files{ display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; max-width: 1120px; margin: 0px auto; }
.entry_panel.scenario_file{ margin: 0px; }
/* Player Scenarios' status (Scenario Tools): one line per pool */
.scenario_status_line{ margin: 0px; }
.scenario_status_line + .scenario_status_line{ margin-top: 6px; }
@media (max-width: 640px){ .scenario_files{ grid-template-columns: minmax(0px, 1fr); } }

/* Email List (admin/email_list.php) */
.email_list_options{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-bottom: 12px; }
.entry_check_group{ display: flex; flex-wrap: wrap; gap: 6px 18px; }
textarea.email_list_text{ width: 100%; font: 13px/1.5 ui-monospace, Consolas, monospace; background-color: var(--surface); }

/* Player Administration (admin/player_administration_*.php) */
.picks_bar.admin_player_bar{ position: static; }
.admin_lock_bar{ max-width: 1120px; margin: 0px auto 14px auto; text-align: center; }
.lock_status.locked, .lock_status.editing{ display: inline-block; padding: 7px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.lock_status.locked{ background-color: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.lock_status.editing{ background-color: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink); }
.admin_actions_panel{ padding: 14px 16px; }
.admin_actions_panel .admin_lock_bar{ margin-bottom: 12px; }
.admin_entry_actions{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.admin_entry_actions input.admin_delete:hover{ border-color: var(--bad); color: var(--bad); }
/* Player Administration's entry bar: whose entry it is ("Kendal Kline's Picks") on the
   left, the entry list in the middle, its points on the right.  The two sides take
   equal room, so the entry list is truly centered. */
.picks_bar.admin_player_bar{ display: grid; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr); align-items: center; gap: 10px 24px; }
.admin_player_bar .admin_entry_heading{ justify-self: start; }
.admin_player_bar .picks_bar_left{ justify-self: center; align-items: center; text-align: center; }
.admin_player_bar .picks_bar_stats{ justify-self: end; }
.admin_entry_heading{ margin: 0px; text-align: left; font: 700 24px/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
/* "Entry #2" beside the name, as on the Player Picks headings (.picks_panel_entry) */
.admin_entry_heading small{ margin-left: 6px; font: 600 14px/1 var(--body); text-transform: none; letter-spacing: 0px; color: var(--muted); white-space: nowrap; }
/* on phones: one under another, on the left */
@media (max-width: 640px){
	.picks_bar.admin_player_bar{ grid-template-columns: minmax(0px, 1fr); }
	.admin_player_bar .picks_bar_left, .admin_player_bar .picks_bar_stats{ justify-self: start; align-items: flex-start; text-align: left; }
}
/* while an entry is locked, the teams not picked are greyed, but every team still
   reacts to the mouse like the playoff bracket does (clicking one shows the
   "entry is locked" reminder) */
.entry_choose input:disabled + label{ cursor: pointer; }
.entry_choose input:disabled:not(:checked) + label{ color: var(--muted); background-color: var(--panel); }
.entry_choose input:disabled + label:hover{ background-color: var(--gold-soft); }

/* Playoff Administration (admin/playoff_administration.php) */
section.game_admin_section{ max-width: 1120px; margin: 0px auto 22px auto; text-align: left; }
/* the 12 seeds in two columns (1-6, 7-12), each a seed / team / record grid with the
   team box about 30 characters wide; one column when the panel is narrower */
.playoff_admin_halves{ display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 14px 40px; }
.playoff_admin_teams{ display: grid; grid-template-columns: 62px minmax(180px, 260px) 150px; gap: 6px 10px; align-items: center; align-content: start; }
.playoff_admin_teams input{ width: 100%; }
.playoff_admin_seed{ font: 700 18px/1 var(--display); }
.playoff_admin_seed small{ margin-left: 4px; padding: 1px 6px; border-radius: 8px; background-color: var(--gold-soft); border: 1px solid var(--gold); font: 600 11px/1.3 var(--body); color: var(--ink); }
.playoff_admin_scores{ display: grid; grid-template-columns: minmax(160px, 1fr) 80px; gap: 6px 12px; align-items: center; max-width: 520px; padding: 4px 16px 12px 16px; }
.playoff_admin_team{ font-weight: 600; }
.playoff_admin_team.won{ color: var(--good); }
.playoff_admin_scores input:disabled{ opacity: .5; }
/* each seed's boxes are grouped in the page; on a computer the group makes no
   difference (the boxes fill the grid's columns under the headings) */
.playoff_admin_row{ display: contents; }
/* on phones each seed is its own block: the seed and the team name across the full
   width, then the code and record below, each with its own small label (the labels'
   styles are the Game Administration ones, .game_admin_cell) */
@media (max-width: 640px){
	.playoff_admin_halves{ display: block; }
	.playoff_admin_teams{ display: block; }
	.playoff_admin_teams + .playoff_admin_teams{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
	.playoff_admin_teams > .game_admin_col{ display: none; }
	.playoff_admin_row{ display: grid; grid-template-columns: 56px minmax(0px, 1fr); align-items: end; gap: 6px 10px; }
	.playoff_admin_row + .playoff_admin_row{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
	.playoff_admin_row > .playoff_admin_seed{ align-self: center; }
	.playoff_admin_row > .game_admin_cell{ grid-column: 2; }
}

/* Teams (admin/teams.php): one panel per region, laid out like the bracket */
.teams_admin_regions{
	display: grid;
	grid-template-columns: repeat(2, minmax(0px, 1fr));
	grid-template-areas: "ul ur" "ll lr";
	gap: 16px;
	max-width: 1120px;
	margin: 0px auto 18px auto;
}
.teams_admin_ul{ grid-area: ul; }
.teams_admin_ur{ grid-area: ur; }
.teams_admin_ll{ grid-area: ll; }
.teams_admin_lr{ grid-area: lr; }
.entry_panel.teams_admin_region{ margin: 0px; }
.teams_admin_region_name{ flex: 1 1 160px; }
.teams_admin_region .picks_panel_head{ gap: 8px 14px; align-items: flex-end; }
.teams_admin_swap{ flex: 0 0 auto; }
.teams_admin_swap select{ width: auto; }
.teams_admin_region_name input{ font: 700 18px/1.2 var(--display); text-transform: uppercase; }
.teams_admin_list{ display: grid; grid-template-columns: 44px minmax(0px, 1fr) 100px; gap: 4px 10px; align-items: center; padding: 10px 16px 14px 16px; }
.teams_admin_list input{ width: 100%; }
.teams_admin_seed{ font: 700 16px/1 var(--display); color: var(--muted); text-align: center; }
/* a little space after each first-round matchup */
.teams_admin_list .second{ margin-bottom: 10px; }
/* the Opening Round: one box per game, its spot (region and seed) above its two teams */
.entry_panel.teams_admin_opening{ max-width: 1120px; margin: 0px auto 18px auto; }
.teams_admin_opening_games{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px 16px; padding: 12px 16px 14px 16px; }
.teams_admin_opening_game{ border: 1px solid var(--line); border-radius: 8px; padding-top: 10px; }
.teams_admin_opening_head{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; padding: 0px 16px; }
.teams_admin_opening_head > b{ flex: 1 1 100%; font: 700 16px/1.2 var(--display); text-transform: uppercase; }
.teams_admin_opening_head .entry_field{ flex: 1 1 110px; }
.teams_admin_opening_note{ display: block; padding: 4px 16px 0px 16px; }
.teams_admin_opening_note.error{ color: var(--bad); font-weight: 700; }
/* a 1st round spot an opening game feeds: filled by the game's winner, so not typed in */
.teams_admin_list input.opening_spot{ background-color: var(--gold-soft); font-style: italic; }
@media (max-width: 760px){
	.teams_admin_regions{ grid-template-columns: minmax(0px, 1fr); grid-template-areas: "ul" "ll" "ur" "lr"; }
	.teams_admin_opening_games{ grid-template-columns: minmax(0px, 1fr); padding-left: 8px; padding-right: 8px; }
}

/* tourney Results (tourney/results.php): teams and scores on the bracket */
.tourney_entry_bracket .pick.won, .tourney_entry_bracket .pick.lost{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tourney_entry_bracket .pick.won{ background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); font-weight: 700; }
.tourney_entry_bracket .pick.lost{ color: var(--muted); }
/* results pages show a loser in grey, without crossing it out (crossing out is for wrong picks) */
.tourney_entry_bracket .pick_score{ font-variant-numeric: tabular-nums; }
a.bracket_picks_link{ display: inline-block; margin: 2px 0px 0px 6px; font-size: 11px; font-weight: 600; color: var(--brand); text-decoration: none; }
a.bracket_picks_link:hover{ text-decoration: underline; }
.bracket_final_total{ font: 700 20px/1.2 var(--display); }
/* a bracket panel that's only as wide as its bracket (centred), so the panel's
   heading lines up with the bracket's left edge.  Never wider than the screen: on a
   phone the bracket scrolls sideways inside the panel while the page (and its header)
   stays put.  (.entry_panel_full.bracket_fit outranks .entry_panel_full's own
   "max-width: none", which would otherwise let the panel push the whole page wider.) */
.entry_panel.bracket_fit, .entry_panel.entry_panel_full.bracket_fit, .standings_panel.bracket_fit{ width: fit-content; max-width: 100%; box-sizing: border-box; }
/* likewise a wide panel holding the football playoff bracket: up to 1120px on a computer,
   never wider than a phone's screen */
.standings_panel.standings_wide.bracket_fit{ max-width: min(1120px, 100%); }
.bracket_fit .tourney_entry_scroll{ padding: 14px 16px; }
.bracket_fit table.tourney_entry_bracket{ margin: 0px; }
/* the playoff bracket's columns already have 14px of spacing, so 2px more makes 16px */
.bracket_fit .picks_panel_body{ padding: 14px 2px; }
.bracket_fit table.bracket{ margin: 0px; }
/* a summary line above a bracket_fit panel (tourney Results): the group is as wide
   as the panel, and the summary starts at the same 16px inset as the panel heading */
.bracket_fit_group{ width: fit-content; max-width: 100%; margin: 0px auto; }
.standings_summary.bracket_fit_summary{ justify-content: flex-start; }
/* panels in the group fill it, so a bracket panel and a table panel share both edges
   (Playoff Results); group_wide caps the group at the wide-panel width */
.bracket_fit_group > .bracket_fit{ width: auto; }
/* a button bar above a bracket panel (basketball Game Administration): as wide as the
   panel, inset like the panel's own footer (16px + its 1px border), so both rows of
   buttons end at the same edge */
.bracket_fit_group > .game_admin_bar{ max-width: none; box-sizing: border-box; padding: 0px 17px; }
.bracket_fit_group.group_wide{ max-width: min(1120px, 100%); }

/* tourney Player Picks (tourney/player_picks.php): each pick coloured by how it turned out */
.tourney_entry_bracket .pick.slot.correct, .tourney_entry_bracket .pick.slot.wrong, .tourney_entry_bracket .pick.slot.pending{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tourney_entry_bracket .pick.slot.correct{ color: var(--good); font-weight: 700; background-color: var(--panel); box-shadow: inset 3px 0px 0px var(--good); }
.tourney_entry_bracket .pick.slot.wrong{ color: var(--bad); }
.tourney_entry_bracket .pick.slot.wrong .pick_name{ text-decoration: line-through; }
.tourney_entry_bracket .pick.slot.pending{ color: var(--alive); }
.tourney_champion.correct{ border-color: var(--good); color: var(--good); }
.tourney_champion.wrong{ border-color: var(--bad); background-color: var(--panel); color: var(--bad); text-decoration: line-through; }
.tourney_champion.pending{ border-color: var(--alive); }
.tourney_champion small{ font-size: 13px; }
/* Tournament Summary (tourney/tournament_summary.php): picks per team per round */
.summary_table td.summary_count{ text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.summary_table td.summary_count.correct{ color: var(--good); background-color: rgba(26, 127, 55, .10); }
.summary_table td.summary_count.wrong{ color: var(--muted); }
.summary_table tr.summary_out td:first-child b{ color: var(--muted); font-weight: 600; }   /* a team that's out: grey, not crossed out (crossing out is for wrong picks) */
/* phones: too many round columns to fit, so the team column stays pinned at the left
   while the counts scroll sideways past it */
@media (max-width: 640px){
	.summary_table th, .summary_table td{ padding: 8px 6px; }
	.summary_table th:first-child, .summary_table td:first-child{ position: sticky; left: 0px; z-index: 1; min-width: 104px; max-width: 128px; white-space: normal; background-color: var(--panel); box-shadow: 1px 0px 0px var(--line); }
	.summary_table th:first-child{ z-index: 2; background-color: var(--band); }
	.summary_table tbody tr:nth-child(even) td:first-child{ background-color: var(--zebra); }
}
/* Playoff Game Picks (bowl_playoff/playoff_results.php): each team picked, with its share */
.standings_panel.picks_panel + .standings_panel.picks_panel{ margin-top: 18px; }
.playoff_picks_table td{ vertical-align: top; white-space: normal; }
.playoff_picks_cell{ min-width: 300px; }
details.playoff_pick_team{ margin: 2px 0px; }
details.playoff_pick_team > summary{ display: grid; grid-template-columns: minmax(150px, 1fr) 110px 36px; align-items: center; gap: 10px; padding: 3px 4px; border-radius: 4px; cursor: pointer; list-style: none; }
details.playoff_pick_team > summary::-webkit-details-marker{ display: none; }
details.playoff_pick_team > summary:hover{ background-color: var(--gold-soft); }
details.playoff_pick_team .champions_meter{ display: block; min-width: 0px; }
.playoff_pick_count{ text-align: right; font-variant-numeric: tabular-nums; }
.playoff_pick_names{ padding: 4px 8px 8px 22px; font-size: 13px; color: var(--muted); }
/* Champions Summary (tourney/champions_summary.php): each team's share of the entries */
.champions_meter{ min-width: 140px; height: 8px; border-radius: 4px; background-color: var(--line); overflow: hidden; }
.champions_meter i{ display: block; height: 100%; background-color: var(--alive); }
.champions_meter i.correct{ background-color: var(--good); }
.champions_meter i.wrong{ background-color: var(--muted); }
/* Who Picked Whom (tourney/game_picks.php) */
.result_card.game_picks_head{ margin: 0px; }   /* sits in .picks_game, the width of the team columns */
ul.game_picks_list{ list-style: none; margin: 0px; padding: 6px 14px 10px 14px; }
ul.game_picks_list li{ padding: 4px 0px; border-bottom: 1px solid var(--line); color: var(--ink); }
ul.game_picks_list li:last-child{ border-bottom: 0px; }

/* tourney Game Administration (admin/game_administration_tourney.php): scores on the bracket */
.admin_bracket_team{ display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 4px; white-space: nowrap; }
.admin_bracket_team + .admin_bracket_team{ margin-top: 3px; }
.admin_bracket_team small{ font-size: 11px; color: var(--muted); }
.admin_bracket_team.won{ background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); font-weight: 700; }
.admin_bracket_team.lost{ color: var(--muted); }   /* grey, not crossed out: crossing out is for wrong picks */
.admin_bracket_team span.empty{ color: var(--muted); }
.admin_bracket_team.slot{ min-width: 110px; }
input.admin_bracket_score{ flex: none; width: 38px; padding: 3px 2px; text-align: center; font: 700 13px/1 var(--body); font-variant-numeric: tabular-nums; }
.tourney_center .admin_bracket_team{ justify-content: flex-start; margin: 4px auto; }
input.admin_tiebreaker{ width: 70px; text-align: center; font-weight: 700; }
/* the Opening Round (Game Administration): one box per game, above the bracket */
.game_admin_opening{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 14px; padding: 12px 16px 14px 16px; }
.game_admin_opening_game{ display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.game_admin_opening_head b{ font: 700 15px/1.2 var(--display); text-transform: uppercase; }
.game_admin_opening_game .admin_bracket_team{ white-space: normal; }
.game_admin_opening_time{ margin-top: 4px; }
.game_admin_opening_time input{ width: 100%; }

/* Admin Home (admin/admin_home.php): the same cards, with admin actions along the bottom */
.admin_home_bar{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; max-width: 1120px; margin: 0px auto 20px auto; font-size: 14px; color: var(--muted); text-align: left; }
.pool_card_flag{ align-self: flex-start; padding: 2px 8px; border-radius: 10px; background-color: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.admin_pool_actions{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding: 10px 18px; border-top: 1px solid var(--line); background-color: var(--surface); font-size: 13px; font-weight: 600; }
.admin_pool_actions input.button_secondary{ padding: 5px 12px; font-size: 13px; }
.admin_pool_actions input.admin_delete:hover{ border-color: var(--bad); color: var(--bad); }

/* past pools (index.php): one compact line each, grouped into seasons */
.past_seasons{ display: flex; flex-direction: column; gap: 10px; }
details.past_season{ background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
details.past_season > summary{ display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
details.past_season > summary::-webkit-details-marker{ display: none; }
details.past_season > summary::before{ content: "\25B8"; color: var(--muted); transition: transform .15s; }
details.past_season[open] > summary::before{ transform: rotate(90deg); }
details.past_season > summary:hover{ background-color: var(--surface); }
.past_season_name{ font: 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.past_season_count{ margin-left: auto; font-size: 13px; color: var(--muted); }
/* My Entries' past seasons: the season's pool cards inside its box (loaded when opened) */
details.my_season > .my_season_cards{ padding: 4px 16px 16px 16px; }
.my_season_message{ grid-column: 1 / -1; margin: 4px 0px; font-size: 14px; color: var(--muted); }
ul.past_pool_list{ list-style: none; margin: 0px; padding: 0px; border-top: 1px solid var(--line); }
ul.past_pool_list > li + li{ border-top: 1px solid var(--line); }
a.past_pool{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px 10px 40px; color: var(--ink); text-decoration: none; }
a.past_pool:hover{ background-color: var(--gold-soft); color: var(--ink); text-decoration: none; }
a.past_pool:focus-visible{ outline: 3px solid var(--gold); outline-offset: -3px; }
.past_pool_name{ font-weight: 600; }
/* "Last opened" on the pool list (index.php), My Entries and admin home: the pool last opened in this browser */
.pool_last_tag{ display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background-color: var(--gold-soft); color: var(--ink); font: 600 11px/1.5 var(--body); text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; white-space: nowrap; }
a.past_pool:hover .past_pool_name{ color: var(--brand); }
.past_pool_type{ flex: none; font-size: 12px; color: var(--muted); }
a.past_pool.past_pool_child{ padding-top: 0px; padding-left: 58px; font-size: 14px; }
a.past_pool.past_pool_child .past_pool_name{ font-weight: 400; }
a.past_pool.past_pool_child .past_pool_name::before{ content: "\21B3  "; color: var(--muted); }

a.back_to_top{
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 30;
	padding: 8px 14px;
	border-radius: var(--radius);
	background-color: var(--band);
	color: var(--on-band);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0px 4px 12px rgba(12,18,54,.2);
}
a.back_to_top:hover{ background-color: var(--brand); color: var(--on-band); text-decoration: none; }

/* ---- Account Info (account_info.php) ------------------------------------ */
.entry_panel.account_panel{ max-width: 760px; }
.account_panel form{ margin: 0px; }
.account_actions{ display: flex; justify-content: flex-end; margin-top: 16px; }
.field_error{ font-size: 13px; font-weight: 600; color: var(--bad); }
.field_error:empty{ display: none; }
input[aria-invalid="true"]{ border-color: var(--bad); }
.account_message{ margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
.account_message.success{ color: var(--good); background-color: var(--panel); border: 1px solid var(--good); border-left: 6px solid var(--good); }
.account_message.error{ color: var(--bad); background-color: var(--panel); border: 1px solid var(--bad); border-left: 6px solid var(--bad); }
ul.password_rules{ display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 14px 0px 0px 0px; padding: 0px; font-size: 13px; color: var(--muted); }
ul.password_rules li{ display: inline-flex; align-items: center; gap: 6px; }
ul.password_rules li::before{ content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
ul.password_rules li.met{ color: var(--good); font-weight: 600; }
ul.password_rules li.met::before{ border-color: var(--good); background-color: var(--good); }

/* ---- Log In (login.php) -------------------------------------------------- */
.entry_panel.login_panel{ max-width: 420px; }
.login_panel form{ display: flex; flex-direction: column; gap: 14px; margin: 0px; padding: 22px 22px 18px 22px; }
.login_panel .account_message{ margin-bottom: 0px; }
.login_already{ margin: 0px; }
.login_step{ font: 600 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.login_intro{ margin: 0px; font-size: 14px; color: var(--muted); }
.login_body{ display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.login_panel ul.password_rules{ margin-top: -4px; }
a.entry_action_link.login_action{ margin: 0px; text-align: center; }
input.login_button{ width: 100%; padding-top: 11px; padding-bottom: 11px; font-size: 15px; }
.login_links{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 14px; }
.login_footer{ padding: 14px 22px; border-top: 1px solid var(--line); background-color: var(--surface); font-size: 14px; color: var(--muted); border-radius: 0px 0px var(--radius) var(--radius); }
.login_footer_lead{ margin: 0px 0px 10px 0px; font-weight: 700; color: var(--ink); }
.login_footer_options{ list-style: none; margin: 0px; padding: 0px; display: grid; gap: 10px; }
.login_footer_options li{ display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--gold); }
.login_footer_options a{ font-weight: 600; }

/* ---- the site's own messages (include/site_notices.js) ------------------ */
.site_toast{
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 50;
	max-width: min(560px, calc(100% - 32px));
	padding: 12px 18px;
	border-radius: var(--radius);
	background-color: var(--bad);
	color: var(--on-band);
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0px 6px 20px rgba(12,18,54,.25);
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.site_toast.info{ background-color: var(--band); }
.site_toast.visible{ opacity: 1; transform: translate(-50%, 0px); }
.form_problems{
	max-width: 1120px;
	margin: 12px auto;
	padding: 12px 16px;
	border: 1px solid var(--bad);
	border-left: 6px solid var(--bad);
	border-radius: var(--radius);
	background-color: var(--panel);
	text-align: left;
	outline: none;
}
.entry_panel .form_problems, .game_admin_card .form_problems{ margin: 12px 16px; }
.form_problems_title{ font-weight: 700; color: var(--bad); margin-bottom: 4px; }
.form_problems ul{ margin: 0px; padding-left: 20px; }
.form_problems li{ margin: 2px 0px; }
/* a problem that jumps to its field when clicked */
.form_problems li a{ color: inherit; text-decoration: underline; text-decoration-color: rgba(192, 57, 47, .45); text-underline-offset: 2px; }
.form_problems li a:hover{ text-decoration-color: currentColor; }
/* a field with a problem: outlined in red until it's changed (include/site_notices.js) */
.field_problem{ outline: 2px solid var(--bad) !important; outline-offset: 2px; border-radius: var(--radius); }
input.field_problem, select.field_problem, textarea.field_problem{ border-color: var(--bad) !important; outline-offset: 1px; }
dialog.site_dialog{
	width: min(480px, calc(100% - 32px));
	padding: 20px 22px 18px 22px;
	border: 0px;
	border-radius: var(--radius);
	background-color: var(--panel);
	color: var(--ink);
	box-shadow: 0px 16px 48px rgba(12,18,54,.35);
	text-align: left;
}
dialog.site_dialog::backdrop{ background-color: rgba(12,18,54,.45); }
.site_dialog_title{ font: 700 22px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
dialog.site_dialog p{ margin: 0px 0px 12px 0px; font-size: 15px; white-space: pre-line; }
ul.site_dialog_list{ max-height: 240px; overflow: auto; margin: 0px 0px 14px 0px; padding: 8px 12px 8px 28px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); font-size: 14px; }
ul.site_dialog_list li{ margin: 2px 0px; }
.site_dialog_buttons{ display: flex; justify-content: flex-end; gap: 10px; }
input.site_dialog_danger{ background-color: var(--bad); border-color: var(--bad); }
input.site_dialog_danger:hover{ background-color: #8f1f1f; border-color: #8f1f1f; }

/* ---- changing an entry (include/entry_edit.php, my_entries.php, ----------
   ---- request_entry_link.php, edit_entry.php) ---------------------------- */
input[readonly]{ background-color: var(--surface); color: var(--muted); }
.entry_change_hint{ max-width: 1120px; margin: -6px auto 14px auto; text-align: center; font-size: 14px; color: var(--muted); }
/* the line about logging in, just under it (entry forms, when not logged in) */
.entry_change_hint + .entry_account_hint{ margin-top: -10px; font-size: 13px; }
/* the offer of an account on the confirmation pages (include/entry_edit.php entryAccountOfferHtml) */
.entry_account_offer{
	max-width: 1120px;
	margin: 0px auto 18px auto;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--panel);
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	font-size: 14px;
	box-sizing: border-box;
}
.entry_account_offer_text{ flex: 1 1 380px; color: var(--muted); }
.entry_account_offer_text b{ color: var(--ink); }
.entry_account_offer_actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.entry_account_offer_actions form{ margin: 0px; }
.entry_edit_notice{
	max-width: 1120px;
	margin: 0px auto 16px auto;
	padding: 12px 16px;
	border: 1px solid var(--gold);
	border-left: 6px solid var(--gold);
	border-radius: var(--radius);
	background-color: var(--gold-soft);
	text-align: left;
	font-size: 14px;
}
.entry_edit_notice_title{ font: 700 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-bottom: 4px; }
a.entry_cancel_link{ align-self: center; padding: 0px 6px; color: var(--muted); font-weight: 600; }
a.entry_cancel_link:hover{ color: var(--ink); }
.entry_changes{ max-width: 1120px; margin: 0px auto 18px auto; }
.entry_changes td{ white-space: normal; }
.entry_change_old{ color: var(--muted); text-decoration: line-through; }
.entry_change_new{ font-weight: 700; background-color: var(--gold-soft); }
/* My Entries: pool cards (as on the pool list) with the player's entries inside */
.pool_section_note{ max-width: 1120px; margin: -4px auto 12px auto; font-size: 14px; color: var(--muted); text-align: left; }
.my_entries_logged_out{ margin-top: 6px; }
/* My Entries: other entries using the account's email address, to tick and add */
.my_claim_list{ list-style: none; margin: 0px; padding: 0px; display: grid; gap: 8px; text-align: left; }
.my_claim_list .entry_check{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.my_claim_list small{ color: var(--muted); }
.my_claim_pool{ color: var(--muted); font-size: 14px; }
.pool_card_head{ display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 10px 18px; }
ul.my_entry_list{ list-style: none; margin: 0px; padding: 0px 18px 12px 18px; }
.my_entry_row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0px; border-top: 1px solid var(--line); }
.my_entry_name{ font-weight: 600; }
.my_entry_name small{ margin-left: 4px; font-weight: 400; color: var(--muted); }
/* the entry's place and points, under its name (pools that have started) */
.my_entry_result{ display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.my_entry_result b{ color: var(--ink); }
/* a top three finish in a finished pool (My Entries, final Standings): gold, silver, bronze */
.finish_label{ display: inline-block; padding: 0px 7px; border-radius: 10px; color: var(--on-gold); font: 600 11px/1.6 var(--body); text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }
.finish_label.first{ background-color: var(--gold); }
.finish_label.second{ background-color: var(--silver); }
.finish_label.third{ background-color: var(--bronze); }
/* on the final Standings, the place number in the same color */
.standings_place .finish_place{ display: inline-block; min-width: 1.6em; padding: 2px 6px; border-radius: 6px; text-align: center; color: var(--on-gold); }
.standings_place .finish_place.first{ background-color: var(--gold); }
.standings_place .finish_place.second{ background-color: var(--silver); }
.standings_place .finish_place.third{ background-color: var(--bronze); }
.standings_player .finish_label{ margin-left: 6px; }
a.pool_card_footer{ margin-top: auto; padding: 12px 18px; border-top: 1px solid var(--line); background-color: var(--surface); font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; }
a.pool_card_footer:hover{ background-color: var(--gold-soft); color: var(--brand); text-decoration: none; }
.pool_cards.past a.pool_card_footer{ color: var(--muted); }
a.my_entry_button, a.my_entry_button:link, a.my_entry_button:visited{ flex: none; padding: 6px 16px; border-radius: var(--radius); background-color: var(--brand); color: var(--on-band); font-weight: 600; text-decoration: none; }
a.my_entry_button:hover{ background-color: var(--band-dark); color: var(--on-band); text-decoration: none; }
a.my_entry_button.secondary{ background-color: var(--panel); color: var(--ink); border: 1px solid var(--line); }
a.my_entry_button.secondary:hover{ background-color: var(--surface); color: var(--ink); }

/* ---- basketball entry form (tourney/pool_entry.php) --------------------- */
.entry_panel.entry_panel_full{ max-width: none; }
.entry_email_options{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 14px; }
.entry_check{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.entry_check input, .entry_check select{ width: auto; }
.entry_field label.entry_check{ font: 400 15px/1.3 var(--body); text-transform: none; letter-spacing: 0px; color: var(--ink); }   /* choices inside a field (User Administration's "Email new requests to"), not the field's heading */
.entry_field .entry_check_group{ margin-bottom: 6px; }
.tourney_entry_scroll{ overflow-x: auto; padding: 14px 12px; }
table.tourney_entry_bracket{ margin: 0px auto; }
.tourney_entry_bracket td{ font-size: 12px; padding: 3px 4px; vertical-align: middle; }
.tourney_entry_bracket .pick{
	display: block;
	padding: 3px 6px;
	border-radius: 4px;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.tourney_entry_bracket .pick small{ font-size: 11px; color: var(--muted); }
/* a team's ↗ team page link, just after its name (not floated as on the football bracket) */
.tourney_entry_bracket .bracket_team_link, .admin_bracket_team .bracket_team_link{ float: none; padding-left: 2px; cursor: pointer; }
.tourney_entry_bracket a.pick:hover{ background-color: var(--gold-soft); color: var(--ink); text-decoration: none; }
.tourney_entry_bracket .pick.picked{ background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); font-weight: 700; }
.tourney_entry_bracket a.pick:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.tourney_entry_bracket .pick.slot{ min-width: 84px; }
.tourney_entry_bracket .pick.slot.empty, .tourney_entry_bracket .pick.team.empty{ color: var(--muted); text-align: center; cursor: default; }
.tourney_entry_bracket a.pick.slot.empty:hover{ background-color: transparent; }
/* the Opening Round (tournament_functions.php renderTourneyOpening): one box per game, above the bracket */
.tourney_opening{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 14px; }
.tourney_opening_game{ display: flex; flex-direction: column; gap: 3px; min-width: 0px; padding: 8px 10px 10px 10px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--panel); }
.tourney_opening_head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 2px; }
.tourney_opening_head b{ font: 700 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.tourney_opening_head span{ font-size: 12px; color: var(--muted); }
.tourney_opening .pick{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 14px; }
.tourney_opening .pick small{ font-size: 11px; color: var(--muted); }
.tourney_opening a.pick:hover{ background-color: var(--gold-soft); }
.tourney_opening a.pick:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.tourney_opening .pick.picked{ background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); font-weight: 700; }
.tourney_opening .pick.won .pick_name{ font-weight: 700; }
.tourney_opening .pick.lost{ color: var(--muted); }
.tourney_opening .pick_score{ font-variant-numeric: tabular-nums; }
/* Player Picks: the entry's pick coloured by how it did, as on the bracket */
.tourney_opening .pick.picked.correct{ color: var(--good); background-color: var(--panel); box-shadow: inset 3px 0px 0px var(--good); }
.tourney_opening .pick.picked.wrong{ color: var(--bad); background-color: var(--panel); box-shadow: inset 3px 0px 0px var(--bad); }
.tourney_opening .pick.picked.wrong .pick_name{ text-decoration: line-through; }
.tourney_opening .pick.picked.pending{ color: var(--alive); }
.tourney_opening_note{ margin-top: 2px; font-size: 12px; color: var(--muted); }
.tourney_opening_note .bracket_picks_link{ font-weight: 600; }
.tourney_opening_game.started:not(.final) .tourney_opening_note{ color: var(--ink); font-weight: 600; }
/* how it works, above the games */
.tourney_opening_rules{ max-width: 68ch; margin-bottom: 14px; padding: 10px 14px; border-left: 4px solid var(--gold); border-radius: 6px; background-color: var(--gold-soft); font-size: 14px; }
.tourney_opening_rules_title{ font: 700 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.tourney_opening_rules ul{ margin: 0px; padding-left: 18px; }
.tourney_opening_rules li + li{ margin-top: 3px; }
#opening_cleared{ margin-bottom: 12px; }
.bracket_region_cell{ text-align: center; }
.bracket_region{
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 700 15px/1 var(--display);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--muted);
}
.tourney_center{ text-align: center; min-width: 150px; }
.tourney_center .pick.slot{ margin: 4px auto; }
.tourney_center_label{ margin: 14px 0px 4px 0px; font: 600 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tourney_champion{
	margin: 0px auto;
	padding: 8px 10px;
	border: 2px solid var(--gold);
	border-radius: var(--radius);
	background-color: var(--gold-soft);
	font: 700 17px/1.2 var(--display);
	color: var(--ink);
}
.tourney_champion.empty{ border-style: dashed; border-color: var(--line); background-color: transparent; color: var(--muted); }

/* ---- Standings (bowl/standings.php) ------------------------------------- */
.standings_summary{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 28px;
	margin: 0px auto 16px auto;
	padding: 0px 16px;
	font-size: 15px;
	color: var(--muted);
}
.standings_summary b{ font: 700 22px/1 var(--display); color: var(--ink); margin-right: 4px; }
/* over a standings panel: starts in line with the table's first column (the 12px
   matches the table's cell padding) - standings_width over a standard panel (bowl),
   standings_wide over a wide one (bowl_playoff, tourney) */
.standings_summary.standings_width, .standings_summary.standings_wide{ justify-content: flex-start; max-width: 980px; box-sizing: border-box; padding: 0px 12px; }
.standings_summary.standings_wide{ max-width: 1120px; }
/* the Standings pages: players on the left, status in the middle, points possible on
   the right; the first and last take equal room, so the middle is truly centered */
.standings_summary.standings_summary_spread{ flex-wrap: nowrap; justify-content: center; }
.standings_summary_spread > span{ text-align: center; }
.standings_summary_spread > span:first-child{ flex: 1 1 0px; text-align: left; }
.standings_summary_spread > span:last-child{ flex: 1 1 0px; text-align: right; }
/* on phones there isn't room for three across: one under another, on the left */
@media (max-width: 640px){
	.standings_summary.standings_summary_spread{ flex-wrap: wrap; justify-content: flex-start; }
	.standings_summary_spread > span, .standings_summary_spread > span:first-child, .standings_summary_spread > span:last-child{ flex: 0 1 auto; text-align: left; }
}
/* over a panel with a heading: in line with the heading instead (16px) - Champions / Tournament Summary */
.standings_summary.summary_heading_inset{ padding: 0px 16px; }
.standings_panel{
	max-width: 980px;
	box-sizing: border-box;
	margin: 0px auto;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-align: left;
}
.standings_scroll{ overflow-x: auto; }
table.standings_table{ width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; font-size: 14px; }
table.standings_table th{ padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
table.standings_table th.sortable a{ color: var(--on-band-muted); text-decoration: none; }
table.standings_table th.sortable a:hover, table.standings_table th.sorted a{ color: var(--on-band); }
table.standings_table td{ padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.standings_table tbody tr:nth-child(even) td{ background-color: var(--zebra); }
table.standings_table tbody tr:hover td{ background-color: var(--gold-soft); }
/* the logged in player's own entries on the Standings pages: tinted, with a gold edge and a "You" tag */
table.standings_table tbody tr.standings_mine td{ background-color: var(--gold-soft); }
table.standings_table tbody tr.standings_mine td:first-child{ box-shadow: inset 4px 0px 0px var(--gold); }
.standings_you{ display: inline-block; margin-left: 6px; padding: 0px 7px; border-radius: 10px; background-color: var(--gold); color: var(--on-gold); font: 600 11px/1.6 var(--body); text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }
.standings_table .compare_col{ width: 44px; text-align: center; }
.standings_table .num{ text-align: right; font-variant-numeric: tabular-nums; }
.standings_table .total{ font-weight: 700; font-size: 16px; }
.standings_place{ font: 700 20px/1 var(--display); color: var(--muted); width: 56px; }
.standings_place.first{ color: var(--gold); }
.standings_player a{ font-weight: 600; color: var(--ink); }
.standings_player a:hover{ color: var(--brand); }
.standings_meter{ display: flex; height: 5px; min-width: 110px; margin-top: 5px; border-radius: 3px; overflow: hidden; background-color: var(--line); }
/* headings with a long and a short wording: the short one is for phones */
.label_short{ display: none; }
/* phones only: a standings row's numbers from the columns hidden there */
.standings_mobile_detail{ display: none; }
/* standings tables marked phone_standings (bowl and Bowls + Playoff Standings) on phones:
   the columns marked standings_extra move under each player's name (standings_mobile_detail),
   the spacing tightens and long names wrap, so the table fits */
@media (max-width: 640px){
	table.phone_standings .standings_extra{ display: none; }
	table.phone_standings .label_long{ display: none; }
	table.phone_standings .label_short{ display: inline; }
	table.phone_standings th, table.phone_standings td{ padding: 8px 6px; }
	table.phone_standings .compare_col{ width: 30px; }
	table.phone_standings .standings_place{ width: 34px; font-size: 18px; }
	table.phone_standings td.standings_player{ white-space: normal; min-width: 110px; }
	table.phone_standings .standings_meter{ min-width: 70px; }
	table.phone_standings .standings_mobile_detail{ display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
	table.phone_standings .standings_mobile_detail .champion_tag{ display: inline-block; margin-top: 4px; }
	/* other cells that may wrap onto a second line (bowl Player Picks: the bowl, the pick) */
	table.phone_standings td.standings_wrap{ white-space: normal; }
	table.phone_standings .standings_wrap .champion_tag{ white-space: normal; }
	/* the Player Picks summary bar scrolls away with the page instead of staying pinned,
	   where it would cover much of a phone screen; its player list fits the screen */
	.picks_bar{ position: static; }
	.picks_bar select{ max-width: 100%; }
	/* a basketball bracket (entry form, Player Picks, Results, admin) shows only a round or
	   two on a phone: a note at its top-left says there's more to the right */
	.tourney_entry_scroll::before{
		content: "Swipe sideways to see the whole bracket \2192";
		display: block;
		margin-bottom: 8px;
		font-size: 12px;
		font-weight: 600;
		color: var(--muted);
	}
}
.standings_meter i{ display: block; background-color: var(--brand); }
.standings_meter i + i{ background-color: var(--gold); }
/* hybrid pool standings: wider table, three-part bar, champion pick tags */
.standings_panel.standings_wide{ max-width: 1120px; }
.standings_meter i.playoff{ background-color: var(--brand-light); }
.standings_meter i.remaining{ background-color: var(--gold); }
.champion_tag{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13px;
}
.champion_tag::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background-color: currentColor; }
.champion_tag.correct{ color: var(--good); }
.champion_tag.pending{ color: var(--alive); }
.champion_tag.wrong{ color: var(--bad); text-decoration: line-through; }
/* basketball standings: correct picks per round */
table.standings_table th.round_group{ text-align: center; border-bottom: 1px solid rgba(255,255,255,.2); }
.standings_table .round_col{ text-align: center; width: 38px; }
/* Player Scenarios (tourney/player_scenarios.php): best and worst finish, and who to root for */
table.standings_table th.scenario_place, table.standings_table th.scenario_points{ text-align: center; white-space: nowrap; }
.scenarios_table td.num.total, .scenarios_table td.num{ text-align: center; }
.scenarios_table td.scenario_root_for{ min-width: 260px; line-height: 1.6; white-space: normal; }
.scenario_root{ margin-right: 10px; }
.scenario_root small{ white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.scenario_range{ display: inline-block; color: var(--ink); font-style: italic; }
.scenario_others, .scenario_doesnt_matter{ color: var(--muted); }
.scenario_others{ white-space: nowrap; }
.standings_key{ margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.standings_key i{ display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-left: 8px; }
.standings_key i.bowl{ background-color: var(--brand); }
.standings_key i.playoff{ background-color: var(--brand-light); }
.standings_key i.remaining{ background-color: var(--gold); }

.standings_actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 12px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--muted);
}

/* pinned confidence value tracker on the bowl_playoff entry forms */
.confidence_tracker{
	position: -webkit-sticky;    /* older iPhones */
	position: sticky;
	top: 0px;
	z-index: 10;
	background-color: var(--band);
	border-radius: var(--radius);
	padding: 6px 10px;
	max-width: 744px;
	margin: 0px auto;
	text-align: center;
}
.confidence_tracker span{ padding: 0px 3px; }

.section_title{
	font: 700 22px/1.1 var(--display);
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ink);
	text-align: center;
	padding: 24px 0px 6px 0px;
}
.section_note{
	font: 14px/1.45 var(--body);
	color: var(--muted);
	text-align: center;
	padding-bottom: 12px;
}

/* ---- phones ------------------------------------------------------------- */
/* ---- Compare Picks (bowl and bowl_playoff compare_picks.php) ------------ */
/* scoreboard: one card per player, in column order, above the scrolling table */
/* starts at the left edge of the key bar and table below, like their contents */
.compare_scoreboard{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-width: 1120px; margin: 0px auto 10px auto; }
.compare_score{
	flex: 1 1 150px;
	max-width: 230px;
	min-width: 0px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	text-align: left;
	text-decoration: none;
}
.compare_score:hover{ border-color: var(--brand); text-decoration: none; }
.compare_score:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.compare_score.leader{ border-color: var(--gold); box-shadow: inset 0px 3px 0px var(--gold); }
.compare_score_name{ font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare_score_points{ font-size: 13px; color: var(--muted); }
.compare_score_points b{ font: 700 26px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.compare_score_note{ font-size: 12px; color: var(--muted); }
.compare_score.leader .compare_score_note:last-child{ color: var(--ink); font-weight: 600; }
.picks_key .split{ color: var(--ink); }
.picks_key .split::before{ border-radius: 2px; width: 4px; height: 14px; background-color: var(--gold); }
table.compare_table td{ vertical-align: middle; }
/* The comparison scrolls inside its panel (at most a screen tall), so the players'
   names stay across the top and the game column down the side while scrolling.
   The key bar doesn't pin on this page, so it can't cover the names. */
.picks_bar.compare_key_bar{ position: static; }
.compare_panel .standings_scroll{ max-height: calc(100vh - 90px); overflow: auto; }
@media print{ .compare_panel .standings_scroll{ max-height: none; overflow: visible; } }
.compare_table thead th{ position: sticky; top: 0px; z-index: 2; box-shadow: 0px 1px 0px var(--line); }
.compare_table .compare_game{ position: sticky; left: 0px; z-index: 1; background-color: var(--panel); min-width: 190px; white-space: normal; }
.compare_table thead th.compare_game{ z-index: 3; background-color: var(--band); text-align: left; }
.compare_table .compare_game a{ color: var(--ink); text-decoration: none; }
.compare_table .compare_game a:hover{ color: var(--brand); }
.compare_table th.compare_player{ text-align: left; min-width: 150px; }
.compare_table th.compare_player a{ color: var(--on-band); text-decoration: none; }
.compare_table th.compare_player a:hover{ text-decoration: underline; }
.compare_table tr.compare_split td.compare_game{ box-shadow: inset 4px 0px 0px var(--gold); }
/* the bowl you came back to from Bowl Picks */
table.standings_table tbody tr.compare_returned td{ background-color: var(--gold-soft); }
.compare_pick_inner{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.compare_points{ font-weight: 700; font-variant-numeric: tabular-nums; }
.compare_pick.correct{ color: var(--good); font-weight: 600; }
.compare_pick.pending{ color: var(--alive); }
.compare_pick.wrong{ color: var(--bad); }
.compare_pick.wrong .compare_team{ text-decoration: line-through; }
table.standings_table tbody tr.compare_section td{
	background-color: var(--surface);
	padding-top: 14px;
	font: 700 15px/1 var(--display);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
}
.compare_table tfoot td{ font-weight: 600; background-color: var(--panel); }
.compare_table tfoot tr:first-child td{ border-top: 2px solid var(--line); }
.compare_table .compare_total_label{ text-align: right; color: var(--muted); font-size: 13px; }
.compare_table .compare_total{ font: 700 20px/1 var(--display); color: var(--ink); }

/* Compare Picks on phones: the game column narrows (it stays pinned at the left), each
   player's column gets narrower with names and picks wrapping onto two lines, so two
   players fit on the screen and more scroll sideways past the pinned games; the
   scoreboard cards sit two to a row */
@media (max-width: 640px){
	table.compare_table th, table.compare_table td{ padding: 7px 6px; }
	.compare_table .compare_game{ min-width: 108px; max-width: 128px; font-size: 13px; }
	.compare_table .compare_game .picks_when{ font-size: 11px; }
	.compare_table th.compare_player{ min-width: 92px; white-space: normal; }
	.compare_table td.compare_pick{ white-space: normal; min-width: 92px; }
	.compare_pick_inner{ gap: 6px; }
	.compare_table .compare_total_label{ font-size: 12px; }
	.compare_score{ flex: 1 1 calc(50% - 4px); max-width: none; padding: 7px 10px; }
	.compare_score_points b{ font-size: 22px; }
}

@media (max-width: 640px){
	a.site_wordmark{ font-size: 24px; }
	.site_nav a, .site_nav span{ padding: 6px 8px; font-size: 14px; }
	.section_nav_inner, .section_nav_group{ flex-wrap: nowrap; }
	/* the color menu wraps to the left edge on phones: open its list rightward */
	.site_theme_list{ right: auto; left: 0px; }
	.section_nav_inner{ overflow-x: auto; }
	.page_title tr:first-child td, .pooltitle td, tr.pooltitle{ font-size: 26px; }
	.entry_bowl{ grid-template-columns: 1fr; }
	.entry_points_cell{ justify-content: flex-start; }
	.entry_tracker_values{ display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
	.entry_tracker_values b{ flex: none; }
	.picks_bar{ padding: 8px 12px; gap: 6px 14px; }
	.picks_key{ font-size: 12px; gap: 3px 10px; }
	.picks_bar_stats{ font-size: 13px; gap: 3px 12px; }
	.picks_bar_stats b{ font-size: 18px; }
}

@media screen and (prefers-color-scheme: dark){
/* ==========================================================================
   site_dark.css - the dark mode colors for site.css

   Only the color tokens change; site.css styles everything through them.
   stylesheet.php adds this after site.css: for "Automatic" (the default) inside
   @media (prefers-color-scheme: dark), so it follows the phone or computer, and
   as it is for "Dark".  "Light" leaves it out.  The classic look never uses it.
   ========================================================================== */

:root{
	color-scheme: dark;      /* form controls and scrollbars follow */

	--band:#141a3d;          /* header band, table headings: still navy, a little deeper */
	--band-dark:#0d122e;     /* button hover */
	--brand:#5b74e8;         /* links and buttons: light enough to read, dark enough under white text */
	--brand-light:#8f9de0;
	--gold:#e7ae22;          /* unchanged: reads well on dark */
	--gold-soft:#3a3118;     /* picked / hovered row wash: a dark gold tint */
	--silver:#c3c9d6;
	--bronze:#d9a57b;
	--ink:#e6e9f2;           /* text */
	--muted:#9aa2bd;         /* secondary text, labels */
	--surface:#0f1320;       /* page background */
	--panel:#181d2e;         /* boxes, inputs */
	--line:#2d3452;          /* borders, rules */
	--zebra:#1c2235;         /* alternate table rows */
	--tint:#232a41;          /* heading rows inside tables */
	--done:#20273b;          /* completed games in admin */
	--good:#4cc283;          /* correct */
	--bad:#f0716a;           /* wrong, errors */
	--alive:#7c9cf5;         /* not decided yet / still alive */
	--on-band:#ffffff;
	--on-band-muted:#aab4e0;
	--used-number:#ff9a8f;
	--on-gold:#161d36;       /* text on gold / silver / bronze badges stays dark */
	--link-hover:#c7d2ff;    /* hovered links */
	--title-brand:#dfe4f5;   /* "Hoops and Huddles" as a page title, with "and" still gold */
}

}