/* ==========================================================================
   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;   /* a lighter --brand (the Standings bar has its own --meter-... colors) */
	--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 */
	--correct-wash:#e3f4ea;  /* behind a correct pick: a light green chip */
	--bad:#c0392f;           /* wrong, errors */
	--wrong-wash:color-mix(in srgb, var(--bad) 6%, var(--panel));   /* behind a wrong pick: a faint chip in the scheme's "wrong" color */
	--wrong-text:var(--muted);  /* a wrong pick's text: grey, not faded (the red-edged chip says it's wrong) */
	--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;   /* every page's big title (the band's navy) */
	--button:var(--brand);           /* filled buttons; a scheme can give them their own color */
	--on-button:var(--on-band);      /* text on them */
	--button-hover:var(--band-dark);
	--on-button-hover:var(--on-band);
	--meter-earned:var(--band);      /* the Standings bar (include/standings_table.php): points earned, */
	--on-meter-earned:var(--on-band);
	--meter-playoff:color-mix(in srgb, var(--meter-earned) 55%, var(--panel));   /* playoff points earned (Bowls + Playoff), */
	--on-meter-playoff:var(--ink);
	--meter-possible:var(--gold);    /* still possible */
	--on-meter-possible:var(--on-gold);
	--meter-lost:var(--line);        /* and lost; a scheme can give the bar its own colors */
	--on-meter-lost:var(--muted);

	/* 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;
	box-shadow: inset 0px -4px 0px var(--gold);   /* the accent stripe along its bottom (gold, or silver for the Bulldogs) */
}
.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); }
/* a pool's pages light its sport's word instead: Hoops on basketball pools, Huddles on football (site_header.php) */
.site_wordmark_basketball span, .site_wordmark_football span{ color: inherit; }
.site_wordmark_basketball span.wordmark_hoops, .site_wordmark_football span.wordmark_huddles{ 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); }
/* the menu's two parts: Colors and Light or Dark */
.site_nav .site_theme_list li.site_theme_heading{ padding: 8px 10px 4px 10px; font: 600 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.site_nav .site_theme_list li.site_theme_heading + li{ margin-top: 0px; }
.site_nav .site_theme_list li + li.site_theme_heading{ margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.site_nav .site_theme_list .site_theme_swatch.site_theme_mode{ display: flex; align-items: center; justify-content: center; box-shadow: none; font-size: 15px; color: var(--muted); }
.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 basketball pool's admin menu (7 pool pages and 6 site pages) fits one row at full width,
   with room for the request count beside Users */
.admin_section_nav a, .admin_section_nav span.current{ padding-left: 11px; padding-right: 11px; }
/* 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); }
/* the admin menu on a whole-site page: one link back to the selected pool, a long name cut short */
.section_nav a.nav_back_to_pool{ max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.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;
}
/* computers: the menu back at the top of the window on scrolling up, away on scrolling down
   (include/section_nav.js; a spacer holds its place while it's pinned) */
.section_nav.section_nav_pinned{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 28;    /* over the bars pinned at the top (20 and under); under Back to Top, the header's menus and dialogs */
	margin: 0px;
	transform: translateY(-100%);   /* away: just above the window */
	transition: transform .2s ease, box-shadow .2s ease;
}
.section_nav.section_nav_pinned.section_nav_shown{ transform: none; box-shadow: 0px 2px 10px rgba(0, 0, 0, .14); }
.section_nav.section_nav_still{ transition: none; }
/* the bars that stay at the top of the window move down while it shows */
.picks_bar, .entry_tracker, .confidence_tracker{ transition: top .2s ease; }
@media (prefers-reduced-motion: reduce){
	.section_nav.section_nav_pinned, .picks_bar, .entry_tracker, .confidence_tracker{ transition: none; }
}
@media print{
	.section_nav.section_nav_pinned{ position: static; transform: none; box-shadow: none; }
	.section_nav_spacer{ display: none; }
}
/* 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;
	text-wrap: balance;      /* a title that wraps splits into lines of about the same length */
}
/* every page's big title is in the color scheme's title color (--title-brand: the band's navy,
   cardinal for Cyclones, purple for Panthers...; black for Hawkeyes, near white when dark) */
.page_title tr:first-child td{
	font: 700 32px/1.1 var(--display);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--title-brand);
}
/* "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); }
/* the header band already shows the name, so the site's own pages (Home, My Entries,
   Admin Home...) lead with their page name instead; the classic look, which has no band,
   keeps the wordmark row (include/classic/classic_menus.css doesn't hide it) */
.page_title tr.title_wordmark_row{ display: none; }
.page_title tr.title_wordmark_row + tr td{
	font: 700 32px/1.1 var(--display);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--title-brand);
}
.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(--title-brand);
	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); }

/* drop-down lists in the color scheme: browsers with customizable selects (Chrome and Edge
   135+) style the open list like the site, with the scheme's wash on the hovered item and a
   gold stripe on the chosen one.  Other browsers (Safari, Firefox) keep their own lists. */
@supports (appearance: base-select){
	:where(select:not([multiple]):not([size])), :where(select:not([multiple]):not([size]))::picker(select){
		appearance: base-select;
	}
	:where(select:not([multiple]):not([size])){
		display: inline-flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
	}
	:where(select:not([multiple]):not([size]))::picker-icon{
		color: var(--muted);
		transition: rotate .15s;
	}
	:where(select:not([multiple]):not([size])):open::picker-icon{ rotate: 180deg; }
	:where(select:not([multiple]):not([size]))::picker(select){
		margin-top: 4px;
		padding: 4px;
		background-color: var(--panel);
		color: var(--ink);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: 0px 6px 20px rgba(12,18,54,.18);
	}
	:where(select:not([multiple]):not([size])) option{
		padding: 6px 10px;
		border-radius: 4px;
		font-weight: 400;
		color: var(--ink);
	}
	:where(select:not([multiple]):not([size])) option::checkmark{ display: none; }
	:where(select:not([multiple]):not([size])) option:hover, :where(select:not([multiple]):not([size])) option:focus-visible{
		outline: none;
		background-color: var(--gold-soft);
		color: var(--ink);
	}
	:where(select:not([multiple]):not([size])) option:checked{
		font-weight: 700;
		box-shadow: inset 3px 0px 0px var(--gold);
	}
	:where(select:not([multiple]):not([size])) option:disabled{ color: var(--muted); }
	/* group headings ("2025-26 Season") like the site's section headings, with a rule between groups;
	   the options inside get the select's own font back */
	:where(select:not([multiple]):not([size])) optgroup{
		padding-top: 4px;
		font-family: var(--display);
		font-size: 1.1em;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--ink);
	}
	:where(select:not([multiple]):not([size])) optgroup + optgroup{
		margin-top: 6px;
		padding-top: 10px;
		border-top: 1px solid var(--line);
	}
	:where(select:not([multiple]):not([size])) optgroup option{
		margin-top: 2px;
		padding-left: 22px;      /* indented under the heading */
		font-family: var(--body);
		font-size: calc(1em / 1.1);
		font-weight: 400;
		letter-spacing: 0px;
		text-transform: none;
		color: var(--ink);
	}
	:where(select:not([multiple]):not([size])) optgroup option:checked{ font-weight: 700; }
}

/* 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-button);
	background-color: var(--button);
	border: 1px solid var(--button);
	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{
	color: var(--on-button-hover);
	background-color: var(--button-hover);
	border-color: var(--button-hover);
}
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(--button);
	color: var(--on-button);
	font: 600 17px/1.2 var(--body);
	text-decoration: none;
	border-radius: var(--radius);
}
a.entry_action_link:hover{ background-color: var(--button-hover); color: var(--on-button-hover); 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%; }
/* laid out as Results' bracket (renderPlayoffBracket): a column per round, the games in the
   official order, lines between them (include/results_bracket.js), the champion above the title game */
.bracket.pbracket{ position: relative; display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: auto repeat(8, auto); gap: 10px 30px; width: max-content; margin: 0px auto; }
.pbracket .bracket_round_title{ grid-row: 1; padding: 8px 0px 16px 0px; }
.pbracket .bracket_game{ position: relative; z-index: 1; align-self: center; }
.bracket_game_foot{ padding: 4px 8px; background-color: var(--zebra); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbracket_final{ position: relative; align-self: center; }
.pbracket_champion{ position: absolute; z-index: 1; left: 0px; right: 0px; bottom: calc(100% + 28px); }
.pbracket_champion_label{ margin-bottom: 4px; font: 700 13px/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; }
.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); }
/* graded picks (the Bowls + Playoff Player Picks bracket): right = a green chip, wrong = a faint
   red chip with grey text (the game's final score is under it), still alive = an outlined box with a ring;
   the champion box once it's out takes the same colors, with a red border */
.bracket_slot.picked.correct{ color: var(--ink); background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); }
.bracket_slot.picked.wrong{ color: var(--wrong-text); font-weight: 400; background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px var(--bad); }
.bracket_slot.picked.pending{ background-color: var(--panel); box-shadow: inset 0px 0px 0px 1px var(--line), inset 3px 0px 0px var(--muted); }
.bracket_slot.picked.pending::before{ content: "\25CB"; margin-right: 4px; font-size: 10px; color: var(--muted); }
.bracket_champion.correct{ color: var(--ink); background-color: var(--correct-wash); border-color: var(--good); }
.bracket_champion.wrong{ color: var(--wrong-text); background-color: var(--wrong-wash); border-color: var(--bad); }
.bracket_champion.pending{ color: var(--ink); }
.bracket_champion_text.correct{ color: var(--good); }
.bracket_champion_text.wrong{ color: var(--wrong-text); }
.bracket_champion_text.pending{ color: var(--ink); }
/* Playoff Administration's Results bracket: a score box beside each team, an
   overtime box under each game (renderPlayoffBracket "admin" mode) */
/* a little wider for the score boxes */
.bracket.pbracket.admin_bracket{ grid-template-columns: repeat(4, 212px); }
.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: 2.6em; padding: 3px 2px; 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; }
.bracket_admin_espn{ margin-left: auto; color: var(--good); font-weight: 600; cursor: help; }   /* a result filled in from ESPN by itself (hover for when) */
/* 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; }
/* a team's name as a link to its team page (Results, Tournament Summary, Who Picked Whom, Bowl Picks):
   plain until hovered, so a page of team names doesn't look like a page of links */
a.team_name_link{ color: inherit; text-decoration: none; }
a.team_name_link:hover{ color: var(--brand); text-decoration: underline; }
.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; }
/* "All times Central", once under the page title */
.results_note{ margin: -6px 0px 6px 0px; font-size: 13px; color: var(--muted); }
/* the sections (Today's / Upcoming / Completed Games), each of which can be folded away:
   the heading with a turning arrow and the number of games, at the cards' left edge */
details.results_section{ margin-bottom: 8px; }
/* above Completed Games: the bowls with the most points won and lost (bowlHighlightsHtml in
   bowl/bowl_results.php), headed in the pick chips' colors; as wide as the list; stacked on phones */
.bowl_highlights{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; max-width: 1080px; margin: 4px auto 6px auto; padding: 0px 16px; box-sizing: border-box; text-align: left; }
.bowl_highlight{ background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bowl_highlight_label{ padding: 8px 14px; border-bottom: 1px solid var(--line); font: 700 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.bowl_highlight.won .bowl_highlight_label{ background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); }
.bowl_highlight.lost .bowl_highlight_label{ background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px var(--bad); }
a.bowl_highlight_game{ display: grid; grid-template-columns: minmax(0px, 1fr) auto; grid-template-areas: "bowl total" "line total"; gap: 2px 14px; padding: 10px 14px; color: var(--ink); text-decoration: none; }
a.bowl_highlight_game + a.bowl_highlight_game{ border-top: 1px solid var(--line); }
a.bowl_highlight_game:hover{ background-color: var(--gold-soft); color: var(--ink); text-decoration: none; }
.bowl_highlight_bowl{ grid-area: bowl; font: 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bowl_highlight_line{ grid-area: line; font-size: 13px; color: var(--muted); }
.bowl_highlight_total{ grid-area: total; align-self: center; text-align: right; font-size: 13px; color: var(--muted); }
.bowl_highlight_total b{ display: block; font: 700 24px/1.1 var(--display); color: var(--ink); }
@media (max-width: 640px){ .bowl_highlights{ grid-template-columns: minmax(0px, 1fr); padding: 0px; } }
details.results_section > summary{
	display: flex;
	align-items: baseline;
	gap: 10px;
	max-width: 1080px;
	margin: 0px auto;
	padding: 14px 16px 8px 16px;
	box-sizing: border-box;
	cursor: pointer;
	list-style: none;
	text-align: left;
}
details.results_section > summary::-webkit-details-marker{ display: none; }
details.results_section > summary::before{ content: "\25B8"; align-self: center; color: var(--muted); transition: transform .15s; }
details.results_section[open] > summary::before{ transform: rotate(90deg); }
/* a panel heading that folds its panel away the same way (Bowls + Playoff Player Picks' bowl picks): ▸ folded, ▾ open */
button.picks_panel_fold{ display: inline-flex; align-items: center; gap: 8px; padding: 0px; border: 0px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.picks_panel_fold::before{ content: "\25B8"; color: var(--muted); transition: transform .15s; }
button.picks_panel_fold[aria-expanded="true"]::before{ transform: rotate(90deg); }
button.picks_panel_fold:hover .picks_panel_title{ color: var(--brand); }
@media (prefers-reduced-motion: reduce){ button.picks_panel_fold::before{ transition: none; } }
.results_section_name{ font: 700 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.results_section_count{ font-size: 13px; color: var(--muted); }
details.results_section > summary:hover .results_section_name{ color: var(--brand); }
/* Results (Bowls + Playoff): the playoff bracket at the top, a box per game in the official order,
   lines from each game to the spot its winner moves into (include/results_bracket.js lifts the
   First Round so its lines run straight); the winner's row shaded in the color of its path */
.results_bracket_panel{ max-width: 1080px; margin: 4px auto 6px auto; padding: 14px 16px 6px 16px; box-sizing: border-box; text-align: left; }
.rbracket_scroll{ overflow-x: auto; padding: 0px 2px 6px 2px; }
.rbracket{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(178px, 1fr)); grid-template-rows: auto repeat(8, auto); gap: 10px 30px; min-width: 770px; }
.rbracket_lines{ position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rbracket_line{ fill: none; stroke: var(--line); stroke-width: 1.5; }
.rbracket_line.done{ stroke: var(--brand); stroke-width: 2; }
.rbracket_round{ grid-row: 1; padding: 8px 0px 16px 0px; font: 700 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; }
a.rbracket_game, a.rbracket_game:hover{ position: relative; z-index: 1; align-self: center; display: block; background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
a.rbracket_game:hover{ border-color: var(--brand); }
a.rbracket_game.today{ border: 2px solid var(--gold); }
.rbracket_head{ display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; background-color: var(--zebra); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.rbracket_team{ display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rbracket_team.win{ font-weight: 700; background-color: var(--tint); box-shadow: inset 4px 0px 0px var(--brand); }
.rbracket_team.lose{ color: var(--muted); }
.rbracket_team.tbd{ color: var(--muted); font-style: italic; }
.rbracket_score{ font-variant-numeric: tabular-nums; }
.rbracket_foot{ display: block; padding: 4px 8px; background-color: var(--zebra); font-size: 11.5px; color: var(--muted); }
.rbracket_final{ position: relative; align-self: center; }
.rbracket_champion{ position: absolute; z-index: 1; left: 0px; right: 0px; bottom: calc(100% + 28px); display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 12px; background-color: var(--gold-soft); border: 2px solid var(--gold); border-radius: 8px; text-align: center; }
.rbracket_champion b{ font: 700 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.rbracket_champion small{ color: var(--muted); font-size: 12px; }
/* a playoff game's round and points above its name on a card, and its tag on a completed line */
.result_card_head > .result_card_name{ grid-column: 1; }   /* below the label, not beside it */
.result_card_head > .result_card_status{ grid-row: 1 / span 3; }
.result_card_label{ grid-column: 1; font: 700 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.result_line_tag{ display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--brand); border-radius: 8px; font: 700 10px/1.4 var(--body); text-transform: uppercase; letter-spacing: .05em; color: var(--brand); vertical-align: 2px; white-space: nowrap; }
.result_team_name.tbd{ color: var(--muted); font-style: italic; }
/* Completed Games: one line per game (day, bowl, score, overtime), newest first */
.result_lines{
	max-width: 1080px;
	margin: 0px auto 8px auto;
	padding: 0px 16px;
	box-sizing: border-box;
	text-align: left;
}
.result_lines > a.result_line:first-child{ border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.result_lines > a.result_line:last-child{ border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
a.result_line{
	display: grid;
	grid-template-columns: 92px minmax(0px, 1fr) minmax(0px, 1.4fr) 46px;
	align-items: center;
	gap: 0px 14px;
	padding: 8px 12px;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-top: none;
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
	scroll-margin: 24px;
}
.result_lines > a.result_line:first-child{ border-top: 1px solid var(--line); }
.result_lines > a.result_line:nth-child(even){ background-color: var(--zebra); }
.result_lines > a.result_line:hover{ background-color: var(--gold-soft); }
a.result_line:target{ box-shadow: inset 3px 0px 0px var(--gold); background-color: var(--gold-soft); }
.result_line_date{ font-size: 12px; color: var(--muted); white-space: nowrap; }
.result_line_name{ font: 600 14px/1.3 var(--body); }   /* the page's own type, not capitals: a long list of 30-odd bowls reads calmly */
.result_line_score{ font-variant-numeric: tabular-nums; }
.result_line_loser{ color: var(--muted); }
.result_line_ot{ font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: right; }
/* phones: two lines per game, the bowl and its day, then the score and any overtime */
@media (max-width: 640px){
	details.results_section > summary, .result_lines{ padding-left: 0px; padding-right: 0px; }
	a.result_line{ grid-template-columns: minmax(0px, 1fr) auto; grid-template-areas: "name date" "score ot"; gap: 2px 10px; }
	.result_line_name{ grid-area: name; }
	.result_line_date{ grid-area: date; text-align: right; }
	.result_line_score{ grid-area: score; }
	.result_line_ot{ grid-area: ot; }
}
/* 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; }
.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);
}
/* a finished game's recap on ESPN (include/espn_links.php), beside "Final": in the link color, not shouted
   like the status around it */
a.espn_recap_link{ font-weight: 600; text-transform: none; letter-spacing: 0px; color: var(--brand); text-decoration: none; white-space: nowrap; }
a.espn_recap_link:hover{ text-decoration: underline; }
.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); }
/* Bowl Results (and its game on Bowl Picks): with a few dozen games on the page, the
   winner is bold with the gold marker but no gold wash, so the page isn't a wall of yellow */
.results_grid .result_team.winner, .picks_game .result_team.winner{ background-color: transparent; }
.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; }
.tourney_entry_bracket a.bracket_picks_link:target{ border-color: var(--gold); padding: 2px 6px; border-radius: 999px; box-shadow: 0px 0px 0px 2px var(--gold); }
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(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.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; }
/* the team's name as on the brackets once the game is played: a light green chip with a green edge for
   the winner, a faint red one with a red edge for the loser (the totals below say Points Won / Lost) */
.picks_column.correct .picks_column_team, .picks_column.wrong .picks_column_team{ display: inline-block; margin-bottom: 4px; padding: 2px 10px 2px 11px; border-radius: 3px; }
.picks_column.correct .picks_column_team{ color: var(--ink); background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); }
.picks_column.wrong .picks_column_team{ color: var(--wrong-text); background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px var(--bad); }
.picks_column_count{ font-size: 13px; color: var(--muted); }
/* a team's view (tourney/team_picks.php): the entries grouped by how far each had it going; the
   groups behind the Tournament Summary number clicked get a gold edge */
.team_picks_note{ margin: 10px 2px 0px 2px; font-size: 13px; color: var(--muted); text-align: left; }
.team_picks_note_clicked{ color: var(--ink); }
.picks_column.team_picks_clicked{ border-top-color: var(--gold); }
/* 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; }
/* Playoff Picks: the team each player picked, for picks of a team that's already out, and the note on points */
.picks_list .picks_out_team{ width: auto; white-space: nowrap; color: var(--muted); }
.game_picks_list .picks_out_pick{ color: var(--muted); }   /* basketball: the team that was already out */
.game_picks_list li.picks_highlight{ margin: 0px -6px; padding-left: 6px; padding-right: 6px; font-weight: 700; color: var(--ink); background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); }   /* the entry Player Picks opened it from */
.picks_columns_note{ max-width: 900px; margin: 10px auto 0px auto; padding: 0px 16px; box-sizing: border-box; text-align: left; font-size: 13px; color: var(--muted); }
.picks_list .picks_none{ color: var(--muted); font-style: italic; text-align: center; }
/* a bowl team's points (Bowl Picks), at the top right of its column beside the team, in grey:
   the number level with the team's name, "points won" / "points lost" under it */
.picks_column_total{ flex: none; text-align: right; font-size: 13px; color: var(--muted); }
.picks_column_total b{ display: block; margin-bottom: 4px; font: 700 20px/1.3 var(--display); }

/* ---- Player Picks pinned bar (tourney/player_picks_summary.php) --------- */
.picks_bar{
	position: -webkit-sticky;    /* older iPhones */
	position: sticky;
	top: var(--section-nav-pin, 0px);   /* under the pool menu while it's pinned (section_nav.js) */
	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 14px; font-size: 12px; color: var(--muted); }
.picks_key span{ display: inline-flex; align-items: center; gap: 5px; }
/* a key, not buttons: plain words, each after a small swatch of how it looks on the page (a green
   chip, an outlined box, a faint red chip) */
.picks_key span::before{ content: ""; flex: none; width: 12px; height: 10px; border-radius: 2px; box-sizing: border-box; }
.picks_key .correct::before{ background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); }
.picks_key .pending::before{ background-color: var(--panel); box-shadow: inset 0px 0px 0px 1px var(--line), inset 3px 0px 0px var(--muted); }
.picks_key .wrong::before{ background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px 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; }
/* Player Picks: the player list centered (like the Standings pool list) with the color
   key under it, the player's numbers on the left and the predicted champion on the right;
   the two sides take equal room.  All of it stays pinned while scrolling. */
.picks_bar.player_picks_bar{
	display: grid;
	grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr);
	grid-template-areas: "stats player champion" "stats key champion";
	align-items: center;
	row-gap: 6px;
}
.player_picks_bar .picks_bar_left{ display: contents; }
.player_picks_bar .picks_bar_left > div:first-child{ grid-area: player; justify-self: center; }
.player_picks_bar .picks_key{ grid-area: key; justify-self: center; justify-content: center; }
.player_picks_bar .picks_bar_stats{ grid-area: stats; justify-self: start; }
.picks_bar_champion{ grid-area: champion; justify-self: end; font-size: 14px; color: var(--muted); }
.picks_bar_gap{ display: inline-block; width: 12px; }   /* between a Bowl / Playoff Winner label and the champion picked */
/* phones: the player list and key centered on top, the rest under them */
@media (max-width: 640px){
	.picks_bar.player_picks_bar{ grid-template-columns: minmax(0px, 1fr); grid-template-areas: "player" "key" "stats" "champion"; }
	.picks_bar_champion{ justify-self: start; }
}

/* 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); font-weight: 700; }
.pick_points.wrong{ color: color-mix(in srgb, var(--muted) 50%, transparent); }   /* faded text only: opacity would fade the cell's row shading too */
.pick_points.pending{ color: var(--ink); }

/* ---- 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); }

/* the last-hour countdown bar (include/entry_deadline.php): pinned to the bottom of the
   screen, clear of the pinned tracker at the top; the page gets room below so it covers
   nothing.  (entry_deadline, without _bar, is the "when entries close" panel: pool_deadline.php) */
.entry_deadline_bar{ position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 30; padding: 10px 16px; border-top: 3px solid var(--gold); background-color: var(--gold-soft); color: var(--ink); font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12); }
.entry_deadline_bar.soon{ border-top-color: var(--bad); color: var(--bad); }
.entry_deadline_bar.closed{ border-top-color: var(--bad); background-color: var(--bad); color: #ffffff; }
body.entry_deadline_bar_shown{ padding-bottom: 64px; }

/* an unfinished entry offered back (include/entry_draft.js): above the entry form */
.entry_draft_bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; max-width: 1120px; margin: 0px auto 18px auto; padding: 12px 16px; border: 1px solid var(--gold); border-left: 4px solid var(--gold); border-radius: var(--radius); background-color: var(--gold-soft); color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; box-sizing: border-box; }
.entry_draft_bar.restored{ border-color: var(--good); font-weight: 400; }

/* pinned "Values used" tracker */
.entry_tracker{
	position: -webkit-sticky;    /* older iPhones */
	position: sticky;
	top: var(--section-nav-pin, 0px);   /* under the pool menu while it's pinned (section_nav.js) */
	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); }
/* the bowl entry forms' ranked list (include/ranked_picks.js): every bowl a row, most sure at the top, its points
   from its place on a button that opens the number grid, arrows and a drag handle to move it; "Type the numbers
   instead" brings back the points boxes and the Values Used tracker */
.entry_panel:not(.entry_ranked) .entry_ranked_only, .entry_panel.entry_ranked .entry_typed_only{ display: none; }
.entry_bowls:not(.ranked) .entry_rank, .entry_bowls:not(.ranked) .entry_moves{ display: none; }
.entry_bowls.ranked .entry_points_cell, .entry_panel.entry_ranked .entry_tracker{ display: none; }
.entry_bowls.ranked .entry_bowl{ position: relative; grid-template-columns: 62px minmax(160px, 1fr) minmax(240px, 1.5fr) auto; gap: 8px 14px; padding: 10px 12px 10px 14px; background-color: var(--panel); }
.entry_rank{ display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; padding: 0px 6px; border: 1px solid var(--brand); border-radius: var(--radius); background-color: var(--panel); color: var(--ink); font: 700 22px/1 var(--display); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0px 1px 2px rgba(12, 18, 54, .18); }
.entry_rank:hover{ background-color: var(--tint); }
.entry_rank_arrow{ font-size: 11px; color: var(--brand); }
.entry_moves{ display: flex; align-items: center; gap: 4px; }
.entry_move{ width: 34px; height: 34px; padding: 0px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--panel); color: var(--brand); font-size: 15px; line-height: 1; cursor: pointer; }
.entry_move:hover:not(:disabled){ border-color: var(--brand); }
.entry_move svg{ display: block; width: 16px; height: 16px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entry_rank_tools input.button_secondary{ padding: 5px 12px; font-size: 13px; }
.entry_move:disabled{ opacity: .35; cursor: default; }
.entry_move[data-move="down"]{ order: 2; }
.entry_handle{ order: 3; width: 36px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); color: var(--muted); cursor: grab; touch-action: none; }
.entry_handle:hover{ background-color: var(--zebra); color: var(--ink); }
.entry_handle svg{ width: 18px; height: 18px; fill: currentColor; }
.entry_bowl.entry_dragging{ z-index: 5; background-color: var(--gold-soft); box-shadow: 0px 8px 22px rgba(12, 18, 54, .25); }
.entry_bowl.entry_dragging .entry_handle{ cursor: grabbing; }
.entry_bowl.entry_moved{ animation: entry_moved 1s ease-out; }
@keyframes entry_moved{ from{ background-color: var(--gold-soft); } to{ background-color: var(--panel); } }
.entry_unpicked .entry_choose{ border-style: dashed; border-color: var(--gold); }
.entry_flash{ animation: entry_flash 1.2s ease-out; }
@keyframes entry_flash{ from{ box-shadow: 0px 0px 0px 3px var(--gold); } to{ box-shadow: 0px 0px 0px 0px transparent; } }
.entry_rank_tools{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.entry_rank_switch{ padding: 4px 2px; border: 0px; background: none; color: var(--brand); font-size: 13px; text-decoration: underline; cursor: pointer; }
.entry_rank_grid{ position: absolute; z-index: 40; width: min(300px, calc(100vw - 24px)); box-sizing: border-box; padding: 10px; border: 1px solid var(--brand); border-radius: 8px; background-color: var(--panel); box-shadow: 0px 10px 30px rgba(12, 18, 54, .3); }
.entry_rank_grid_title{ margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.entry_rank_grid_title b{ color: var(--ink); }
.entry_rank_grid_values{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.entry_rank_grid_values button{ height: 32px; padding: 0px; border: 1px solid var(--line); border-radius: 4px; background-color: var(--zebra); color: var(--ink); font: 700 15px/1 var(--display); cursor: pointer; }
.entry_rank_grid_values button:hover{ border-color: var(--brand); }
.entry_rank_grid_values button.current{ border-color: var(--gold); background-color: var(--gold); color: var(--on-gold); }
/* the bar along the bottom: what's still to pick, and a button to it (the tiebreaker last) */
.entry_summary{ position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 25; padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px)) 16px; border-top: 3px solid var(--gold); background-color: var(--band); color: var(--on-band); }
.entry_summary_inner{ max-width: 1120px; margin: 0px auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.entry_summary_text{ font-size: 14px; }
.entry_summary_text b{ margin-right: 10px; font: 700 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.entry_summary_next{ padding: 7px 12px; border: 1px solid var(--on-band); border-radius: var(--radius); background: none; color: var(--on-band); font-weight: 600; cursor: pointer; }
body.entry_summary_shown{ padding-bottom: 64px; }
body.entry_summary_shown .entry_bowl, body.entry_summary_shown .bracket_game{ scroll-margin: 16px 0px 84px 0px; }   /* scrolled to, they stop clear of the bar */
body.entry_typing .entry_summary{ display: none; }
body.entry_summary_shown a.back_to_top{ bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }   /* above the bar, not on its button */   /* a phone's keyboard is up for the tiebreaker: the bar would sit on the box */
body.entry_deadline_bar_shown .entry_summary{ bottom: 44px; }   /* above the closing-soon bar (include/entry_deadline.php) */
.entry_tiebreaker.entry_due{ padding: 8px 10px; border-radius: var(--radius); background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); }
@media (max-width: 640px){
	/* phones: the number on the left, the bowl and its teams in the middle, up / the handle / down stacked on the right */
	.entry_bowls.ranked .entry_bowl{ grid-template-columns: 48px minmax(0px, 1fr) 34px; grid-template-areas: "rank info moves" "rank choose moves"; gap: 4px 8px; padding: 8px 6px 8px 8px; }
	.entry_bowls.ranked .entry_rank{ grid-area: rank; align-self: start; height: 40px; font-size: 20px; }
	.entry_bowls.ranked .entry_bowl > div:nth-child(2){ grid-area: info; }
	.entry_bowls.ranked .entry_choose{ grid-area: choose; }
	.entry_bowls.ranked .entry_moves{ grid-area: moves; flex-direction: column; gap: 2px; }
	.entry_move{ width: 32px; height: 28px; }
	.entry_move_top{ display: none; }
	.entry_handle{ order: 1; width: 32px; height: 28px; }
	.entry_summary_text b{ font-size: 15px; margin-right: 8px; }
}
@media (prefers-reduced-motion: reduce){ .entry_bowl.entry_moved, .entry_flash{ animation: none; } }
@media print{ .entry_summary, .entry_moves, .entry_rank_tools{ display: none; } }

/* 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, .bracket_wrapper::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, html.printing .bracket_wrapper::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 .page_title tr.title_wordmark_row + tr td{ font-size: 24px; }
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); }
/* a pool still being set up (include/pool_cards.php poolStatus): an open circle, and no colored top edge */
.pool_status.soon{ color: var(--muted); }
.pool_status.soon::before{ width: 4px; height: 4px; border: 2px solid currentColor; background-color: transparent; }
/* 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 open list's pools, as on the Standings pages' Pool box (its pools with entries) */
form.admin_pool_picker option{ color: var(--brand); font-weight: 700; }
/* 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; }

/* a pool page's title: the pool name opens the list of pools to switch to (include/pool_switch.php, pool_switch.js) */
.pool_switch{ cursor: pointer; border-radius: 4px; }
.pool_switch:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.pool_switch_last{ white-space: nowrap; }   /* the arrow stays with the name's last word */
.pool_switch_caret{ display: inline-block; width: .42em; height: .42em; margin-left: .3em; border-right: .12em solid currentColor; border-bottom: .12em solid currentColor; transform: translateY(-.18em) rotate(45deg); opacity: .7; transition: transform .15s, opacity .15s; }
.pool_switch:hover .pool_switch_caret, .pool_switch[aria-expanded="true"] .pool_switch_caret{ opacity: 1; }
.pool_switch[aria-expanded="true"] .pool_switch_caret{ transform: translateY(.05em) rotate(225deg); }
.pool_switch_anchor{ position: relative; height: 0px; z-index: 60; }
.pool_switch_menu{ position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 540px); overflow-y: auto; box-sizing: border-box; padding: 4px 0px; text-align: left; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0px 14px 36px rgba(0,0,0,.2); }
.pool_switch_group + .pool_switch_group{ border-top: 1px solid var(--line); }
.pool_switch_group_title{ padding: 12px 16px 4px 16px; font: 700 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.pool_switch_menu a{ display: block; padding: 8px 16px 8px 19px; font: 400 15px/1.3 var(--body); color: var(--ink); text-decoration: none; }
.pool_switch_menu a small{ font-size: 13px; font-weight: 400; color: var(--muted); }
.pool_switch_menu a.mine{ color: var(--brand); font-weight: 700; }   /* the player's pools, with their entry counts */
.pool_switch_menu a:hover, .pool_switch_menu a:focus-visible{ background-color: var(--gold-soft); outline: none; }
.pool_switch_menu a.current{ box-shadow: inset 3px 0px 0px var(--gold); font-weight: 700; }   /* the pool shown */
/* the admin pages version (pool_switch.php poolSwitchAdminHtml): every pool, each with its status at the right */
.pool_switch_menu.admin a{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }   /* on a phone, a long name puts its status underneath */
.pool_switch_menu.admin a .pool_status{ flex: none; }
.pool_switch_menu.admin a .pool_last_tag{ margin-left: 6px; }

/* Pool Administration (admin/pool_administration.php) */
.admin_saved{ border: 0px; background: none; }
.entry_field.admin_field_wide{ grid-column: 1 / -1; }
/* two columns wide, so a whole address shows (the team link address); one column on a phone */
@media (min-width: 700px){ .entry_field.admin_field_double{ grid-column: span 2; } }
input.admin_number{ width: 90px; }
.entry_hint.pool_name_used{ color: var(--bad); font-weight: 600; }   /* Add Pool: the name filled in or typed is already a pool's */
.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; }
.settings_group_note{ margin: -4px 0px 12px 0px; font-size: 13px; color: var(--muted); }   /* the line under a group's title */
.settings_subgroup_title{ margin: 14px 0px 8px 0px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }   /* College Football Playoff, NCAA Tournament under Points */
/* Site Settings: the sections to jump to, under the title; each section stops clear of the top when jumped to */
.settings_jump{ max-width: 760px; margin: 0px auto 16px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; font-size: 14px; }
.settings_jump a{ padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--panel); color: var(--brand); text-decoration: none; font-weight: 600; }
.settings_jump a:hover{ border-color: var(--brand); color: var(--link-hover); }
.account_panel[id]{ scroll-margin-top: 12px; }
/* Site Settings' extras: one row each, the choices in columns; a whole cell picks its choice */
table.settings_extras{ width: 100%; border-collapse: collapse; font-size: 14px; }
.settings_extras th{ background: none; letter-spacing: normal; }   /* not the tables' navy headings */
.settings_extras thead th{ padding: 0px 6px 8px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: center; white-space: nowrap; }
.settings_extras thead th:first-child{ text-align: left; padding-left: 0px; }
.settings_extras tbody th{ padding: 9px 12px 9px 0px; text-align: left; font: 600 14px/1.35 var(--body); color: var(--ink); vertical-align: top; }
.settings_extras tbody tr + tr > *{ border-top: 1px solid var(--line); }
.settings_extra_where{ display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.settings_extras td{ width: 76px; padding: 0px; text-align: center; vertical-align: middle; }
.settings_extras td label{ display: flex; align-items: center; justify-content: center; min-height: 40px; height: 100%; cursor: pointer; }
.settings_extras td:hover{ background-color: var(--gold-soft); }
.settings_extras td input{ margin: 0px; cursor: pointer; }
@media (max-width: 640px){ .settings_extras td{ width: 56px; } .settings_extras thead th{ font-size: 11px; white-space: normal; } }
/* the read-only parts (the daily check's runs, the server settings): folded, with a ▸ that turns */
details.settings_details{ margin-top: 14px; }
.entry_panel_body > details.settings_details:first-child{ margin-top: 0px; }
details.settings_details > summary{ cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--brand); }
details.settings_details > summary::-webkit-details-marker{ display: none; }
details.settings_details > summary::before{ content: "\25B8"; display: inline-block; margin-right: 6px; color: var(--muted); transition: transform .15s; }
details.settings_details[open] > summary::before{ transform: rotate(90deg); }
details.settings_details[open] > summary{ margin-bottom: 10px; }
@media print{ details.settings_details > *{ display: revert; } .settings_jump{ display: none; } }

/* two-step login (admin/two_step_setup.php): the QR code always on white, the key and recovery codes in a fixed-width font */
.two_step_steps > li{ margin-bottom: 14px; }
.two_step_qr{ width: 200px; max-width: 100%; margin: 10px 0px; padding: 0px; background: #ffffff; border: 1px solid var(--line); border-radius: 6px; line-height: 0; }
.two_step_qr svg{ width: 100%; height: auto; display: block; }
.two_step_key{ font-family: Consolas, "Courier New", monospace; font-size: 15px; letter-spacing: 1px; word-break: break-all; }
.two_step_codes{ font-family: Consolas, "Courier New", monospace; font-size: 17px; line-height: 1.7; columns: 2; column-gap: 32px; max-width: 320px; margin: 4px 0px 12px 0px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 6px; }
.two_step_code_buttons{ justify-content: flex-start; margin-bottom: 12px; }
.two_step_actions{ display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); }
.two_step_action{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.two_step_action button{ min-width: 220px; }
@media print{ .two_step_codes{ border-color: #000000; } }
@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); }
/* Pool Administration's "Ready to Open?" checks (admin/include/pool_checks.php) */
.pool_check_list{ list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 8px; }
.pool_check{ display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.pool_check_mark{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #ffffff; }
.pool_check_fix .pool_check_mark{ background-color: var(--bad); }
.pool_check_check .pool_check_mark{ background-color: var(--muted); }
.pool_check_ok .pool_check_mark{ background-color: var(--good); }
.pool_check a{ margin-left: 4px; white-space: nowrap; }
.pool_checks_passed{ margin-top: 12px; }
.pool_check_list + .pool_checks_passed{ padding-top: 10px; border-top: 1px solid var(--line); }
.pool_checks_passed summary{ cursor: pointer; font-size: 14px; color: var(--muted); }
/* Admin Home's "Needs Attention" (admin/include/admin_attention.php), in the same style; "info" lines get a quiet mark */
.admin_attention{ max-width: 1120px; margin-left: auto; margin-right: auto; }
.admin_attention .pool_check_ok .pool_check_mark{ background-color: var(--muted); font-style: italic; font-family: Georgia, serif; }
.admin_attention_count{ display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0px 6px; border-radius: 11px; background-color: var(--bad); color: #ffffff; font: 700 13px/1 var(--body); vertical-align: middle; }
.admin_attention_none{ margin: 0px; font-size: 14px; color: var(--muted); }
.pool_checks_passed .pool_check_list{ margin-top: 8px; }
/* the automatic lock (Pool Administration's Status): the switch, its minutes, and when it locks */
.auto_lock_setting{ padding-top: 10px; border-top: 1px solid var(--line); }
.auto_lock_setting .auto_lock_fields{ margin: 4px 0px 0px 34px; }
.auto_lock_when{ margin: 10px 0px 0px 34px; padding: 8px 12px; border-radius: 6px; background-color: var(--surface); font-size: 14px; }
@media (max-width: 640px){
	.auto_lock_setting .auto_lock_fields, .auto_lock_when{ margin-left: 0px; }
}

/* 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(--gold); background-color: var(--gold); color: var(--on-gold); 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); }
/* Clear: empties a game's result (Games, Playoff Games), a small link-style button */
.admin_clear_link{ margin-left: 6px; padding: 0px; border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: underline; cursor: pointer; }
.admin_clear_link:hover{ color: var(--bad); }
.form_sending, .form_sending input, .form_sending button{ cursor: progress; }   /* a form on its way (include/unsaved_changes.js): its buttons say "Sending…" */
.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_nopassword{ display: inline-block; vertical-align: top; text-align: center; }   /* No Password Yet with its date centered under it */
.user_admin_nopassword .user_admin_tag{ margin-right: 0; }
.user_admin_expires{ display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }   /* under No Password Yet: when an unused account is removed */
.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; }
/* Players without accounts, under the accounts: a Regular, and the other names an address was used with */
.standings_panel.no_account_panel{ margin-top: 28px; }   /* .standings_panel sets its margin later on */
/* on a computer, long emails, names and pool names wrap, so the table leaves room for Add as User */
@media (min-width: 641px){
	table.no_account_table .no_account_email{ min-width: 190px; max-width: 230px; white-space: normal; overflow-wrap: anywhere; }
	table.no_account_table .no_account_name{ width: 190px; white-space: normal; }   /* the same width whichever rows show, so the Regular tag stays beside the name */
	table.no_account_table .no_account_last{ min-width: 160px; max-width: 200px; white-space: normal; }
}
.no_account_panel > .picks_panel_head{ text-align: left; }
.user_admin_tag.regular{ border-color: var(--good); color: var(--good); background-color: var(--panel); }
.no_account_more_line{ display: block; margin-top: 2px; }   /* "+N more" on its own line under the name */
.no_account_more{ font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; }
.no_account_also{ display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }   /* the same name on other addresses */
/* Add User and an account's Edit: the other addresses to link, one per line */
.add_link_choices{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.add_link_choices > .entry_hint{ margin: 2px 0px 8px 0px; }
.link_list > .entry_check{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0px; overflow-wrap: anywhere; }
.add_link_choices > .entry_buttons{ margin-top: 8px; justify-content: flex-start; }
.add_link_choices + .add_link_choices{ margin-top: 12px; }
/* an account's Edit: an address with its button (Not the Same Person, or Unlink) at the right */
.link_list > .link_row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 0px; border-bottom: 1px dotted var(--line); overflow-wrap: anywhere; }
.link_row > .entry_check{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0px; }
input.link_row_button{ padding: 3px 10px; font-size: 12px; }
.link_dismiss_check{ margin-top: 8px; }
.link_dismissed_list{ margin: 10px 0px 0px 0px; }
.user_admin_tag.link{ margin-top: 3px; border-color: var(--brand); color: var(--brand); background-color: var(--panel); text-decoration: none; }   /* "2 addresses to link": opens Edit */
/* 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; }
/* Help (admin/admin_help.php): the guide's steps, lists and questions */
.help_panel{ scroll-margin-top: 12px; }
.help_panel .entry_panel_body{ font-size: 15px; line-height: 1.55; }
.help_contents{ margin: 0px; padding-left: 20px; columns: 2 220px; }
.help_list, .help_steps{ margin: 0px; padding-left: 22px; }
.help_list > li, .help_steps > li{ margin-bottom: 8px; }
.help_steps + .help_when{ margin-top: 16px; }
h3.help_when{ margin: 0px 0px 8px 0px; font: 600 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.help_how{ margin: 0px; }
.help_how dt{ margin-top: 14px; font-weight: 600; color: var(--ink); }
.help_how dt:first-child{ margin-top: 0px; }
.help_how dd{ margin: 2px 0px 0px 0px; }
/* 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: 400; color: var(--muted); text-decoration: none; }
a.bracket_picks_link:hover{ color: var(--brand); text-decoration: underline; }
/* on the bracket: a small outlined button for each game (a two-people icon, tourneyPicksIcon),
   between its two teams - in the 1st round beside the pair on the bracket's inner edge, later
   on the line joining the two boxes (game_top / game_bottom are a game's two cells, one above
   the other; the button sits on the border between them) */
.tourney_entry_bracket a.bracket_picks_link{
	display: table;
	margin: 3px auto;
	padding: 2px 6px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background-color: var(--panel);
	color: var(--brand);
	line-height: 0px;
}
.tourney_entry_bracket a.bracket_picks_link svg{ display: block; }
/* quieter at rest, so 63 of them don't dot the bracket: a faint, grey button, full strength once the
   pointer is on its game (or the button itself, or it has the keyboard's focus); touch screens, with
   no pointer to rest on a game, keep them full strength */
.tourney_entry_bracket a.bracket_picks_link{ opacity: .45; color: var(--muted); transition: opacity .12s; }
.tourney_entry_bracket td:hover > a.bracket_picks_link, .tourney_entry_bracket a.bracket_picks_link:hover, .tourney_entry_bracket a.bracket_picks_link:focus-visible{ opacity: 1; color: var(--brand); }
@media (hover: none){ .tourney_entry_bracket a.bracket_picks_link{ opacity: 1; color: var(--brand); } }
@media print{ .tourney_entry_bracket a.bracket_picks_link{ opacity: 1; } }
.tourney_entry_bracket a.bracket_picks_link:hover, .tourney_entry_bracket a.bracket_picks_link:focus-visible{ border-color: var(--gold); background-color: var(--gold-soft); color: var(--ink); text-decoration: none; }
.tourney_entry_bracket a.bracket_picks_link:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.tourney_center a.bracket_picks_link{ display: inline-block; }
/* the 1st round: the button beside its pair (no line: the pair sits together) */
.bracket_results td.first_round{ position: relative; }
.bracket_results td.first_left{ padding-right: 36px; }
.bracket_results td.first_right{ padding-left: 36px; }
.bracket_results td.first_round > a.bracket_picks_link{ position: absolute; top: 50%; margin: 0px; transform: translateY(-50%); z-index: 1; }
.bracket_results td.first_left > a.bracket_picks_link{ right: 4px; }
.bracket_results td.first_right > a.bracket_picks_link{ left: 4px; }

.bracket_results td.first_round .pick.team + .pick.team{ margin-top: 2px; }
/* the Sweet 16 pool's outer columns (one team per row): the button beside the pair too, on the
   border between its two cells, without the joining line (the pair sits together, as in the 1st round) */
.bracket_results td.outer_left{ padding-right: 36px; }
.bracket_results td.outer_right{ padding-left: 36px; }
.bracket_results td.game_top.outer_left > a.bracket_picks_link{ left: auto; right: 4px; transform: translateY(50%); }
.bracket_results td.game_top.outer_right > a.bracket_picks_link{ left: 4px; transform: translateY(50%); }
.tourney_entry_bracket td.game_top.outer_left::after, .tourney_entry_bracket td.game_bottom.outer_left::before,
.tourney_entry_bracket td.game_top.outer_right::after, .tourney_entry_bracket td.game_bottom.outer_right::before{ content: none; }
.tourney_entry_bracket td.game_top, .tourney_entry_bracket td.game_bottom{ position: relative; }
.bracket_results td.game_top > a.bracket_picks_link{ position: absolute; left: 50%; bottom: 0px; margin: 0px; transform: translate(-50%, 50%); z-index: 2; }
/* the line joining a game's two teams, down the middle of the column from box to box */
/* a solid colour, not see-through, so where the two halves overlap (the 1px gap between the
   cells, which a scaled screen rounds unevenly) doesn't show as a darker dot; above the patch
   below, so the line doesn't break where the cells meet */
.tourney_entry_bracket td.game_top::after, .tourney_entry_bracket td.game_bottom::before{ content: ""; position: absolute; left: 50%; border-left: 1px solid color-mix(in srgb, var(--muted) 45%, var(--panel)); pointer-events: none; z-index: 1; }
.tourney_entry_bracket td.game_top::after{ top: calc(50% + 11px); bottom: -1px; }
.tourney_entry_bracket td.game_bottom::before{ top: -1px; bottom: calc(50% + 11px); }
/* no rule across the column between a game's two teams (the 1px gap between the cells,
   filled with the cell's own colour); the rules between different games stay */
.tourney_entry_bracket td.game_bottom::after{ content: ""; position: absolute; left: 0px; right: 0px; top: -1px; height: 1px; background: inherit; pointer-events: none; }
/* a game's two teams while its button is pointed at (results.php) */
.tourney_entry_bracket .pick.game_lit{ outline: 2px solid var(--gold); outline-offset: 1px; }
.bracket_final_total{ font: 700 20px/1.2 var(--display); }
/* the icon in the Results note, as on the bracket's buttons */
.picks_icon_key{ display: inline-block; vertical-align: -2px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--panel); color: var(--brand); line-height: 0px; }
.picks_icon_key svg{ display: block; }
/* 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, .bracket_fit .bracket.pbracket{ 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 marked by how it turned out,
   without leaning on green and red text.  Right: a light green chip with the points.
   Wrong: faded grey (hovering shows who won).  Still alive: an outlined box with a ring.  Red and
   a strikethrough are kept for a champion pick that's 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(--ink); font-weight: 700; background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); }
.tourney_entry_bracket .pick.slot.correct .pick_score{ color: var(--good); }
.tourney_entry_bracket .pick.slot.wrong{ color: var(--wrong-text); font-weight: 400; background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px var(--bad); }   /* a faint red chip: out of play */
/* still alive: semi-bold in an outlined box (right = a filled green box, wrong = faded text) */
.tourney_entry_bracket .pick.slot.pending{ color: var(--ink); font-weight: 600; background-color: var(--panel); box-shadow: inset 0px 0px 0px 1px var(--line), inset 3px 0px 0px var(--muted); }
.tourney_entry_bracket .pick.slot.pending .pick_name::before{ content: "\25CB"; margin-right: 2px; font-size: 10px; color: var(--muted); }
.tourney_champion.correct{ border-color: var(--good); background-color: var(--correct-wash); color: var(--ink); }
.tourney_champion.correct small{ color: var(--good); }
.tourney_champion.wrong{ border-color: var(--bad); background-color: var(--wrong-wash); color: var(--wrong-text); }   /* out: the missed-pick chip's colors, no strikethrough */
.tourney_champion.pending{ border-color: var(--line); color: var(--ink); }
.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(--wrong-text); background-color: var(--wrong-wash); }   /* picked to win after the team was out: the site's wrong-pick colors */
/* "Picked to Win" over the round headings, and how far each team went */
.summary_table th.summary_group{ text-align: center; padding-top: 7px; padding-bottom: 5px; font-size: 11px; letter-spacing: .1em; opacity: .85; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.summary_table td.summary_result{ white-space: nowrap; color: var(--muted); }
.summary_table td.summary_result.summary_in{ color: var(--ink); font-weight: 600; }
.summary_table td.summary_result.summary_champion{ color: var(--good); font-weight: 700; }
/* furthest first: a thin darker line where the Result changes (Runner-up, Out in the Final Four...) */
.summary_table tr.summary_group_start td{ border-top: 2px solid color-mix(in srgb, var(--muted) 45%, var(--panel)); }
.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) */
.summary_table td.summary_count[data-share]{ position: relative; }   /* relative: holds its screen-reader text inside the scrolling table */
.summary_table td.summary_count[data-share]:hover{ box-shadow: inset 0px 0px 0px 1px var(--muted); }
/* each number opens who picked it (team_picks.php in the pop-up): the whole cell, in the cell's own color */
.summary_table a.summary_picks_link{ display: block; margin: -9px -12px; padding: 9px 12px; color: inherit; text-decoration: none; }
.summary_table a.summary_picks_link:hover, .summary_table a.summary_picks_link:focus-visible{ text-decoration: underline; }
@media (max-width: 640px){
	.summary_table a.summary_picks_link{ margin: -8px -6px; padding: 8px 6px; }
}
.summary_share_text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the percentage, for screen readers (others see it in the box) */
.summary_share_tip{ position: fixed; z-index: 50; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background-color: var(--panel); color: var(--ink); font: 600 13px/1.3 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0px 2px 8px rgba(0, 0, 0, .18); pointer-events: none; }
.summary_share_tip[hidden]{ display: none; }
/* 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); }
	/* the round headings' row starts with 1st Round, not Team: it scrolls with the counts */
	.summary_table tr.summary_rounds_row th:first-child{ position: static; min-width: 0px; max-width: none; white-space: nowrap; box-shadow: none; }
	.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); }
/* Champions Summary's Share of entries: the bar, then its percentage; on phones (where the column
   is hidden) the percentage shows after the count instead */
.champions_share{ display: flex; align-items: center; gap: 10px; }
.champions_share .champions_meter{ flex: 1; }
.champions_share_text{ flex: none; min-width: 3em; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.champions_share_phone{ display: none; }
@media (max-width: 640px){
	.champions_share_phone{ display: inline; }
}
/* Champions Summary (tourney/champions_summary.php): each team's row, then (when there are names to
   show) a row of the entries that picked it, with no line between the two; no zebra stripes, so the
   names' shaded box always sits on the panel's own color */
table.standings_table.champions_table tbody tr:nth-child(n) td{ background-color: var(--panel); }   /* :nth-child(n): outranks the every-other-row stripes */
table.standings_table.champions_table tr.champion_team_row:has(+ tr.champion_names_row:not([hidden])) td{ border-bottom: 0px; padding-bottom: 4px; }
table.standings_table.champions_table tr.champion_names_row td{ padding-top: 2px; padding-bottom: 12px; white-space: normal; font-size: 13px; line-height: 1.5; color: var(--ink); }
table.standings_table.champions_table tr.champion_names_row small{ font-size: 11px; color: var(--muted); }
/* the names, set apart from the team's row: a lightly shaded box, indented, with a rule down its left */
.champion_names_box{ margin-left: 14px; padding: 5px 12px; border-left: 3px solid var(--line); border-radius: 0px 4px 4px 0px; background-color: color-mix(in srgb, var(--muted) 7%, var(--panel)); }
/* a long list: one a line, in columns (four on a computer, two on a phone), each column filled top to bottom */
ul.champion_names{ margin: 0px; padding: 0px; list-style: none; columns: 4 170px; column-gap: 24px; }
ul.champion_names li{ padding: 1px 0px; break-inside: avoid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a short one: side by side, together at the left */
ul.champion_names.champion_names_short{ columns: auto; display: flex; flex-wrap: wrap; gap: 0px 22px; }
@media (max-width: 640px){
	ul.champion_names{ columns: 2; column-gap: 14px; }
	.champion_names_box{ margin-left: 6px; }
}
/* a long list's count opens it: "19 26% ▸", the arrow turning down while it's open */
button.champion_names_toggle{ padding: 2px 4px; margin: -2px -4px; border: 0px; border-radius: 4px; background: none; color: inherit; font: inherit; cursor: pointer; }
button.champion_names_toggle:hover, button.champion_names_toggle:focus-visible{ background-color: var(--gold-soft); }
.champion_names_caret{ display: inline-block; width: 12px; margin-left: 3px; color: var(--muted); text-align: center; transition: transform .15s; }
button.champion_names_toggle[aria-expanded="true"] .champion_names_caret{ transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce){ .champion_names_caret{ transition: none; } }
.champion_names_caret_space{ visibility: hidden; }   /* a count without a list to open keeps the arrow's room, so the numbers line up */
input.champion_names_all{ flex: none; }
a.champion_team_link{ color: inherit; text-decoration: none; }
a.champion_team_link:hover, a.champion_team_link:focus-visible{ text-decoration: underline; }
/* 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 */
/* the basketball bracket's Clear: a small x beside each winner, at the end of its box */
.admin_clear_x{ margin-left: auto; width: 18px; height: 18px; padding: 0px; border: 1px solid var(--line); border-radius: 50%; background-color: var(--panel); font-size: 13px; line-height: 15px; color: var(--muted); cursor: pointer; flex: none; }
.admin_clear_x:hover{ border-color: var(--bad); color: var(--bad); }
.admin_champion_row{ display: flex; align-items: center; gap: 6px; }
.admin_champion_row .tourney_champion{ flex: 1; }
.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; }
.admin_home_bar_links{ display: flex; align-items: center; gap: 18px; }
.admin_todo_link{ font-weight: 600; }
.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); }
/* Pool Settings: a deleted pool says so at the top, with Undelete beside it; the Delete Pool panel at the bottom */
.pool_deleted_notice{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.pool_deleted_notice span{ flex: 1 1 300px; }
.pool_deleted_notice input.button_secondary{ flex: 0 0 auto; }
#delete input.admin_delete:hover, .pool_deleted_buttons input.admin_delete:hover{ border-color: var(--bad); color: var(--bad); }
.pool_deleted_buttons{ display: flex; flex-wrap: wrap; gap: 8px; }
.pool_deleted_when, .pool_card_deleted{ display: block; margin-top: 4px; font-size: 12px; font-weight: normal; color: var(--muted); }
.entry_deleted_when{ margin-top: 4px; font-size: 12px; font-weight: normal; color: var(--muted); }
.pool_purge{ margin-top: 10px; padding: 12px 14px; border: 1px solid var(--bad); border-radius: var(--radius); background-color: var(--panel); text-align: left; }
.pool_purge[hidden]{ display: none; }
.pool_purge_title{ font-weight: 700; color: var(--bad); }
.pool_purge p{ margin: 6px 0px 10px 0px; font-size: 13px; }
.pool_purge label{ display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.pool_purge_row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pool_purge_row input[type="text"]{ flex: 1 1 220px; }
.pool_purge input.site_dialog_danger:disabled{ opacity: 0.45; cursor: not-allowed; }

/* 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_history{ margin: -6px 16px 18px 16px; font-size: 14px; color: var(--muted); }   /* My Entries: the whole history, under the title */
.my_entries_history b{ color: var(--ink); }
/* 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(--button); color: var(--on-button); text-decoration: none; }

/* ---- Admin save bar (include/admin_save_bar.js) --------------------------- */
/* pinned along the bottom of Games, Playoff Games and Teams while there are unsaved changes,
   with the page's Undo and Save, so a change far down the page doesn't need a scroll back up */
.admin_save_bar{ position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 25; padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px)) 16px; border-top: 3px solid var(--gold); background-color: var(--band); color: var(--on-band); }
.admin_save_bar[hidden]{ display: none; }
.admin_save_bar_inner{ max-width: 1120px; margin: 0px auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.admin_save_bar_text{ font: 700 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.admin_save_bar_buttons{ display: flex; flex-wrap: wrap; gap: 8px; }
.admin_save_bar button{ padding: 7px 14px; border: 1px solid var(--on-band); border-radius: var(--radius); background: none; color: var(--on-band); font-weight: 600; cursor: pointer; }
.admin_save_bar button.admin_save_bar_save{ border-color: var(--gold); background-color: var(--gold); color: var(--on-gold); }
.admin_save_bar button:disabled{ opacity: .6; cursor: default; }
body.admin_save_bar_shown{ padding-bottom: 64px; }
/* what's unsaved: each changed box, and on Games the changed bowl's card, in gold until saved or undone */
input.unsaved_field, select.unsaved_field, textarea.unsaved_field{ border-color: var(--gold) !important; background-color: var(--gold-soft) !important; color: var(--ink) !important; box-shadow: 0px 0px 0px 1px var(--gold); }
.game_admin_card:has(.game_admin_unsaved:not([hidden])){ border-color: var(--gold); box-shadow: inset 5px 0px 0px var(--gold); }
body.admin_save_bar_shown a.back_to_top{ bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }   /* above the bar, not on its buttons */
@media (max-width: 640px){
	.admin_save_bar_text{ font-size: 15px; }
	body.admin_save_bar_shown{ padding-bottom: 104px; }   /* the buttons wrap under the words */
	body.admin_save_bar_shown a.back_to_top{ bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
}
@media print{ .admin_save_bar{ display: 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); }
p.password_rules_note{ margin: 8px 0px 0px 0px; font-size: 13px; color: var(--muted); }   /* the checks made when it's saved: names, breached passwords */

/* ---- 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); }
/* who picked each team, in a pop-up over Results and Bowl Results (include/picks_dialog.js): a bar
   like the site's header with Previous / Next and close, then the game card and picks; full screen on phones */
dialog.picks_dialog{ width: min(840px, calc(100% - 32px)); max-height: calc(100vh - 48px); margin: 24px auto auto auto; padding: 0px; border: 0px; border-radius: var(--radius); background-color: var(--surface); color: var(--ink); box-shadow: 0px 16px 48px rgba(12,18,54,.35); text-align: left; overflow: hidden; }   /* pinned near the top, not centered: the bar and its buttons stay put from game to game */
dialog.picks_dialog[open]{ display: flex; flex-direction: column; }
dialog.picks_dialog::backdrop{ background-color: rgba(12,18,54,.45); }
.picks_dialog_bar{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; background-color: var(--band); color: var(--on-band); border-bottom: 3px solid var(--gold); }
.picks_dialog_title{ flex: 1; min-width: 0; font: 700 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.picks_dialog_bar button{ flex: none; width: 38px; height: 38px; padding: 0px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; background: transparent; color: var(--on-band); font: 400 26px/1 var(--body); cursor: pointer; }
.picks_dialog_bar button:hover:not(:disabled){ background-color: rgba(255,255,255,.14); }
.picks_dialog_bar button:disabled{ opacity: .35; cursor: default; }
.picks_dialog_bar button:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.picks_dialog_close{ margin-left: 4px; }
.picks_dialog_body{ overflow: auto; padding: 16px 18px 20px 18px; }
.picks_dialog_body .picks_game, .picks_dialog_body .picks_columns{ max-width: none; margin-left: 0px; margin-right: 0px; }
.picks_dialog_message{ padding: 40px 0px; text-align: center; color: var(--muted); }
@media (max-width: 700px){
	dialog.picks_dialog{ width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0px; border-radius: 0px; }
	.picks_dialog_title{ font-size: 17px; }
	.picks_dialog_body{ padding: 12px; }
}
.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); }
/* a new-entry form's top box (entryIntroHtml in include/entry_edit.php): when picks are due,
   changing an entry / logging in, and that unfinished picks are kept; as wide as the panels below */
.entry_intro{ max-width: 1120px; margin: 0px auto 18px auto; padding: 10px 16px; box-sizing: border-box; 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; color: var(--ink); }
.entry_intro_due{ margin-bottom: 4px; }
.entry_intro_dot{ margin: 0px 6px; color: var(--muted); }
.entry_intro_note{ margin-top: 2px; font-size: 13px; color: var(--muted); }
.local_time{ font-weight: 400; }   /* the player's own time after a Central deadline (include/pool_deadline.php) */
/* when entries close (include/pool_deadline.php): entry forms and confirmation pages, and the pool cards */
.entry_deadline{ max-width: 1120px; margin: 0px auto 16px auto; padding: 10px 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; color: var(--ink); }
.pool_card_deadline{ font-size: 13px; font-weight: 600; color: var(--ink); }
/* 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_draft_list li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }   /* My Entries' unfinished entries: the pool, then Finish Entry */
.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_place .finish_place.plain{ color: inherit; }   /* 4th place on: no medal, centered in the same box as the top three */
/* ---- Who to Root For (include/root_for_page.php) --------------------------- */
.root_for{ max-width: 1120px; margin: 0px auto; padding: 0px 12px; box-sizing: border-box; text-align: left; }
.root_for_lead{ max-width: 680px; margin: 0px auto 16px auto; text-align: center; color: var(--muted); }
.root_for_controls{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0px 0px 14px 0px; font-size: 14px; color: var(--muted); }
.root_for_controls select{ max-width: 100%; }
.root_for_day{ margin-bottom: 10px; text-align: center; font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.root_for_summary{ display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.root_for_summary > div{ min-width: 120px; padding: 8px 14px; text-align: center; background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted); }
.root_for_summary b{ display: block; font: 700 28px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.root_for_games{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.root_for_game{ display: flex; flex-direction: column; background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.root_for_game.lot{ border-color: var(--gold); box-shadow: inset 0px 3px 0px var(--gold); }
.root_for_game_top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 10px 14px 0px 14px; font-size: 13px; color: var(--muted); }
.root_for_level{ flex: none; padding: 1px 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.root_for_level.lot{ background-color: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.root_for_level.some{ border-color: var(--gold); color: var(--ink); }
.root_for_teams{ display: grid; gap: 6px; padding: 10px 14px; }
.root_for_team{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.root_for_team.root{ background-color: var(--correct-wash); border-color: var(--good); }
.root_for_seed{ width: 22px; text-align: right; font: 700 15px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.root_for_name{ flex: 1; font-weight: 600; color: var(--ink); }
.root_for_name small{ margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.root_for_tag{ font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--good); }
.root_for_why{ margin: 0px; padding: 0px 14px 12px 14px; font-size: 14px; color: var(--muted); }
.root_for_why b{ color: var(--ink); }
.root_for_bar{ height: 8px; margin: auto 14px 14px 14px; border-radius: 4px; background-color: var(--zebra); box-shadow: inset 0px 0px 0px 1px var(--line); overflow: hidden; }
.root_for_bar i{ display: block; height: 100%; background-color: var(--good); }
.root_for_game.none .root_for_teams{ opacity: .75; }
a.scenario_root_for_link{ margin-left: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.root_for_settled{ max-width: 680px; margin: 0px auto 14px auto; padding: 10px 14px; text-align: center; border: 1px solid var(--good); border-radius: var(--radius); background-color: var(--correct-wash); color: var(--ink); }
.root_for_note{ max-width: 760px; margin: 18px auto 0px auto; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 640px){
	.root_for_summary > div{ min-width: 0px; flex: 1 1 0px; padding: 6px; }
	.root_for_summary b{ font-size: 24px; }
	.root_for_day{ font-size: 19px; }
}
/* ---- Achievements on the career pages (include/achievements.php) ---------- */
.achievements_panel{ max-width: 1120px; margin: 0px auto 18px auto; }
.achievements_layout{ display: grid; grid-template-columns: minmax(0px, 1fr) 270px; gap: 16px; padding: 0px 16px 16px 16px; align-items: start; }
.achievements_group_title{ margin: 4px 0px 8px 0px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.achievements_group + .achievements_group{ margin-top: 14px; }
.achievements_grid{ display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 8px; }   /* six across: each group fits one row */
button.achievement{ display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px 9px 6px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--panel); color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
button.achievement:hover{ border-color: var(--brand); }
button.achievement[aria-pressed="true"]{ border-color: var(--gold); box-shadow: 0px 0px 0px 2px var(--gold); }
.achievement_icon{ width: 44px; height: 44px; fill: var(--line); stroke: var(--line); }
.achievement.earned .achievement_icon, .achievement_detail.earned .achievement_icon{ fill: var(--gold); stroke: var(--gold); }
.achievement_name{ font: 700 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.achievement:not(.earned) .achievement_name{ color: var(--muted); }
.achievement_sub{ font-size: 12px; color: var(--muted); }
.achievement_progress{ display: block; width: 78%; height: 5px; border-radius: 3px; background-color: var(--zebra); box-shadow: inset 0px 0px 0px 1px var(--line); overflow: hidden; }
.achievement_progress i{ display: block; height: 100%; background-color: var(--brand); }
.achievements_details{ position: sticky; top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--zebra); }
.achievement_detail .achievement_icon{ width: 60px; height: 60px; }
.achievement_detail_name{ margin: 6px 0px 2px 0px; font: 700 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.achievement_detail p{ margin: 6px 0px; font-size: 14px; }
.achievement_detail ul{ margin: 4px 0px 8px 0px; padding-left: 18px; font-size: 14px; }
.achievement_detail_rarity{ color: var(--muted); font-size: 13px !important; }
@media (max-width: 820px){
	.achievements_layout{ grid-template-columns: minmax(0px, 1fr); }
	.achievements_grid{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
	.achievements_details{ position: static; order: -1; }
}
@media (max-width: 640px){
	.achievements_grid{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
	.achievement_icon{ width: 36px; height: 36px; }
	.achievement_name{ font-size: 14px; }
}
@media print{ .achievements_details{ position: static; } }
/* ---- Standings movement (include/standings_movement.php) ------------------ */
/* under each place: up 3 / down 2 / - / New since the morning's places; the strip above the table */
.standings_move{ display: block; margin-top: 3px; font: 700 11px/1 var(--body); white-space: nowrap; cursor: help; }
.standings_move.up{ color: var(--good); }
.standings_move.down{ color: var(--bad); }
.standings_move.same{ color: var(--muted); font-weight: 400; }
.standings_move.new_entry{ color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
html:not(.standings_movement_round) .standings_move.movement_round, html.standings_movement_round .standings_move.movement_day{ display: none; }
.standings_movement{ max-width: 980px; margin: 0px auto 14px auto; padding: 0px 12px; box-sizing: border-box; text-align: left; }
.standings_movement.standings_wide{ max-width: 1120px; }
.standings_movement_switch{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 0px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.standings_movement_switch span{ margin-right: 10px; }
.standings_movement_switch button{ padding: 5px 12px; border: 1px solid var(--line); background-color: var(--panel); color: var(--muted); font: 600 14px var(--body); cursor: pointer; }
.standings_movement_switch button:first-of-type{ border-radius: var(--radius) 0px 0px var(--radius); }
.standings_movement_switch button:last-of-type{ border-radius: 0px var(--radius) var(--radius) 0px; border-left: 0px; }
.standings_movement_switch button[aria-pressed="true"]{ background-color: var(--band); border-color: var(--band); color: var(--on-band); }
.standings_movement:not(.show_round) .standings_movement_cards.movement_round, .standings_movement.show_round .standings_movement_cards.movement_day{ display: none; }
.standings_movement_cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.standings_movement_card{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.standings_movement_big{ min-width: 46px; text-align: center; font: 700 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.standings_movement_big.up{ color: var(--good); }
.standings_movement_big.down{ color: var(--bad); }
.standings_movement_big.lead{ color: var(--gold); }
.standings_movement_label{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.standings_movement_who{ font-weight: 700; color: var(--ink); }
.standings_movement_detail{ font-size: 13px; color: var(--muted); }
@media (max-width: 640px){
	.standings_movement_cards{ gap: 6px; }
	.standings_movement_card{ padding: 7px 12px; gap: 10px; }
	.standings_movement_big{ min-width: 38px; font-size: 21px; }
	.standings_movement_detail{ font-size: 12px; }
	.standings_movement_switch span{ flex: 1 1 100%; margin: 0px; text-align: center; }
}
@media print{ .standings_movement, .standings_move{ display: none; } }
.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(--button); color: var(--on-button); font-weight: 600; text-decoration: none; }
a.my_entry_button:hover{ background-color: var(--button-hover); color: var(--on-button-hover); 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; }
/* Player Picks' first column: the game's actual winner bold, the loser grey (the player's pick is in the next column) */
.tourney_entry_bracket .pick.team.actual_won{ font-weight: 700; color: var(--ink); }
.tourney_entry_bracket .pick.team.actual_lost{ color: var(--muted); }
.tourney_entry_bracket a.pick:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.tourney_entry_bracket .pick.slot{ min-width: 84px; }
/* the entry form, once its script has sized it (renderTourneyBracket): the winner columns a fixed
   width, a longer name's type made smaller to fit, so the bracket doesn't widen as picks are made */
.tourney_entry_bracket.bracket_fixed .pick.slot{ width: var(--slot-width); min-width: 0px; overflow: hidden; }
.tourney_entry_bracket.bracket_fixed .tourney_champion{ overflow: hidden; white-space: nowrap; }
.tourney_entry_bracket.bracket_fixed .pick.team{ width: var(--team-width); overflow: hidden; }
.tourney_entry_bracket.bracket_fixed .tourney_center{ width: 150px; }
/* the entry form: a team picked this far but not on to the next round gets a faint outline,
   so the line joining a game's two teams meets a box, as it does the gold one above it */
.tourney_entry_bracket:not(.bracket_results) .pick.slot:not(.empty):not(.picked):not(.correct):not(.wrong):not(.pending){ background-color: var(--panel); box-shadow: inset 0px 0px 0px 1px var(--line); }
.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 marked by how it did, as on the bracket (both teams show,
   so the winner of a wrong pick is the bold one beside it) */
.tourney_opening .pick.picked.correct{ color: var(--ink); background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); }
.tourney_opening .pick.picked.wrong{ color: var(--wrong-text); font-weight: 400; background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px var(--bad); }
.tourney_opening .pick.picked.pending{ background-color: var(--panel); box-shadow: inset 0px 0px 0px 1px var(--line), inset 3px 0px 0px var(--muted); }
.tourney_opening .pick.picked.pending .pick_name::before{ content: "\25CB"; margin-right: 4px; font-size: 10px; color: var(--muted); }
.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{ 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; columns: 2; column-gap: 36px; }   /* the panel's full width, in two columns */
.tourney_opening_rules li{ break-inside: avoid; }
@media (max-width: 700px){ .tourney_opening_rules ul{ columns: 1; } }
.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;
	align-items: baseline;   /* a status beside a big number sits on the number's line */
	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; }
/* basketball Results, Standings and Player Scenarios: the round it's in, or the champion, in the heading font */
.standings_summary_status{ font: 700 20px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.standings_summary.summary_status_only{ justify-content: center; text-align: center; }   /* Results: the status alone, centered over the bracket (and the champion's share line under it) */
/* 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; }
	/* a basketball pool's status (the round, or the champion) on a line of its own, first, with the two counts together under it */
	.standings_summary_spread > span.standings_summary_status{ order: -1; flex: 1 1 100%; }
}
/* Bowls + Playoff standings: the bowls and the playoff on their own, side by side (one under the other on phones) */
.section_leaders{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1120px; margin: 0px auto 16px auto; padding: 0px 12px; box-sizing: border-box; text-align: left; }
.section_leader{ padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--panel); }
.section_leader.finished{ border-color: var(--gold); background-color: var(--gold-soft); }
.section_leader_name{ font: 700 13px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.section_leader_who{ margin-top: 4px; font-size: 15px; color: var(--ink); }
.section_leader_title{ color: var(--muted); }
.section_leader_points{ margin-left: 4px; font: 700 18px/1 var(--display); }
.section_leader_note{ margin-top: 2px; font-size: 12px; color: var(--muted); }
@media (max-width: 640px){
	.section_leaders{ grid-template-columns: 1fr; }
}
.section_place{ color: var(--muted); font-size: 12px; }   /* a Bowl or Playoff place beside its points: "(3)" */
.finish_label.section_winner{ background-color: transparent; border: 1px solid var(--gold); color: var(--ink); }   /* "Bowl Winner": outlined, apart from the overall gold/silver/bronze */
/* 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;
	overflow: clip;    /* clips the corners without stopping the Compare Picks bar pinning (browsers without clip keep hidden, and the bar stays put) */
	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: 13px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
/* sortable headings look like the others (the arrow marks the sorted one); pointing at one underlines it */
table.standings_table th.sortable a{ color: var(--on-band); text-decoration: none; }
table.standings_table th.sortable a:hover{ color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; }
/* the sorted heading's arrow (include/standings_table.php) sits in the padding beside the
   heading and takes no room, so the columns don't shift when the sort changes */
table.standings_table th.sortable a{ position: relative; }
table.standings_table .sort_arrow{ position: absolute; top: 0px; }
table.standings_table .sort_arrow.before{ right: 100%; }
table.standings_table .sort_arrow.after{ left: 100%; }
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); }
/* the Standings pages (include/standings_table.php): each player's name and score a little larger, so they stand out */
table.standings_main td.standings_player > a, table.standings_main .standings_name_line > a{ font-size: 16px; }
table.standings_main td.total{ font-size: 18px; }
/* under each name, the whole width of the Player column: points earned, still possible and lost, a thin bar
   in the scheme's bar colors (--meter-earned... at the top); pointing at a part shows its number ("131 earned", data-tip) */
.standings_meter{ display: flex; height: 8px; min-width: 190px; margin-top: 7px; border-radius: 4px; background-color: var(--meter-lost); }
/* computers: the name's line, with the row's words at its right end ("70% picked right · Tiebreaker 141 (off by 9)");
   a name too long to share the line pushes the words onto one of their own, still at the right */
.standings_name_line{ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.standings_name_line .standings_detail{ margin-left: auto; padding-left: 16px; }
.standings_detail{ font-size: 12px; color: var(--muted); white-space: nowrap; }
/* small sort links inside a heading, for the sorts with no column of their own (include/standings_table.php
   standingsSubSortHtml): "% right · tiebreaker" under Player, each round's name in Right by Round */
.standings_table th .sub_sorts{ display: block; margin-top: 3px; font-size: 10px; letter-spacing: .04em; color: var(--on-band); opacity: .8; }
table.standings_table th a.sub_sort{ color: var(--on-band); text-decoration: none; opacity: .8; }
table.standings_table th .sub_sorts a.sub_sort{ opacity: 1; }   /* (the line itself is already dimmed) */
table.standings_table th a.sub_sort:hover{ opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
table.standings_table th a.sub_sort.sorted{ opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sub_sort_arrow{ margin-left: 2px; font-size: 8px; }
/* what the table is sorted by stands out: the part of the words beside the bar, or the round in the run */
table.standings_sorted_percent .detail_percent,
table.standings_sorted_tiebreaker .detail_tiebreaker,
table.standings_sorted_difference .detail_tiebreaker{ color: var(--ink); font-weight: 600; }
/* Right by Round: one number per round, each in the same width, under the rounds' short names */
.round_run{ display: inline-flex; }
.round_run > span, .round_run > a{ display: inline-block; width: 34px; text-align: center; font-variant-numeric: tabular-nums; }   /* px, not em: the names above are smaller type, and must line up */
.round_run_labels{ display: flex; margin-top: 3px; font-size: 10px; letter-spacing: .04em; }
table.standings_sorted_openingnumcorrect .run_openingnumcorrect,
table.standings_sorted_final32numcorrect .run_final32numcorrect,
table.standings_sorted_sweet16numcorrect .run_sweet16numcorrect,
table.standings_sorted_elite8numcorrect .run_elite8numcorrect,
table.standings_sorted_final4numcorrect .run_final4numcorrect,
table.standings_sorted_champgamenumcorrect .run_champgamenumcorrect{ border-radius: 3px; background-color: var(--gold-soft); color: var(--ink); font-weight: 700; }
/* 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 .sort_arrow{ position: static; }   /* the sort arrow is part of the heading: there's too little padding to hold it */
	table.phone_standings th, table.phone_standings td{ padding: 8px 6px; }
	table.phone_standings th{ font-size: 12px; }   /* computers get 13px headings; phones keep 12px */
	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; }
	/* the bar and its key are left out once final (Score is a column); while in progress the bar
	   is a thin line without numbers (Total and Possible are columns), so the rows stay short */
	table.phone_standings .standings_meter, .standings_meter_key{ display: none; }
	table.phone_standings .standings_meter.in_progress{ display: flex; height: 4px; min-width: 0px; margin-top: 6px; border-radius: 2px; font-size: 0px; }
	table.phone_standings .standings_meter.in_progress i{ min-width: 0px; padding: 0px; }
	table.phone_standings .standings_detail{ display: none; }   /* the words are in the line under the name instead */
	.standings_meter_key.in_progress{ display: inline-flex; }
	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-flex; margin-top: 4px; }   /* inline-flex, as on computers: the still-alive circle keeps its size */
	/* 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 bracket (basketball or football: 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, .bracket_wrapper::before{
		content: "Swipe sideways to see the whole bracket \2192";
		display: block;
		margin-bottom: 8px;
		font-size: 12px;
		font-weight: 600;
		color: var(--muted);
	}
}
/* the bar's parts: the last takes up what rounding leaves; the ends are rounded (the bar can't clip
   them: its numbers' boxes show above it) */
.standings_meter i{ position: relative; display: block; flex: none; min-width: 3px; box-sizing: border-box; font-style: normal; }
.standings_meter i:last-child{ flex: 1; border-radius: 0px 4px 4px 0px; }
.standings_meter i:first-child{ border-radius: 4px 0px 0px 4px; }
.standings_meter i:only-child{ border-radius: 4px; }
/* pointing at a part: a taller place to point (the bar is only 8px), the part a little brighter, and its number in a box above it */
.standings_meter i::before{ content: ""; position: absolute; left: 0px; right: 0px; top: -6px; bottom: -6px; }
/* Site Settings' "Numbers in the Standings bar" (standings_bar_numbers on the table): on computers the bar
   is twice as thick, each part's number at its right end in the part's own text color */
@media (min-width: 641px){
	table.standings_bar_numbers .standings_meter{ height: 16px; font-size: 11px; font-weight: 700; line-height: 16px; font-variant-numeric: tabular-nums; }
	table.standings_bar_numbers .standings_meter i{ min-width: 22px; padding: 0px 4px; text-align: right; white-space: nowrap; }
}
.standings_meter i:hover{ filter: brightness(1.15); }
/* a touch screen, with no pointer: a tap on a part shows its number the same way (tip_shown, include/standings_table.php's script) */
.standings_meter i.tip_shown{ filter: brightness(1.15); }
.standings_meter i[data-tip].tip_shown::after,
.standings_meter i[data-tip]:hover::after{ content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 6; transform: translateX(-50%); padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; background-color: var(--panel); color: var(--ink); font: 600 12px/1.3 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0px 2px 8px rgba(0, 0, 0, .18); pointer-events: none; }
.standings_meter i.earned{ background-color: var(--meter-earned); color: var(--on-meter-earned); }
.standings_meter i.playoff{ background-color: var(--meter-playoff); color: var(--on-meter-playoff); }
.standings_meter i.possible{ background-color: var(--meter-possible); color: var(--on-meter-possible); }
.standings_meter i.lost{ background-color: var(--meter-lost); color: var(--on-meter-lost); }
/* hybrid pool standings: wider table, champion pick tags */
.standings_panel.standings_wide{ max-width: 1120px; }
/* narrower still, for a table with few columns (bowl Standings: Player and Final Score), so the score sits near the words beside each bar */
.standings_panel.standings_narrow, .standings_summary.standings_narrow, .standings_movement.standings_narrow{ max-width: 780px; }
.champion_tag{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13px;
}
/* a champion or bowl pick (Standings' Champion column, bowl Player Picks): right = a green
   chip, still alive = bold in an outlined box, out = a faint red chip with grey text, as
   a missed pick in a bracket */
.champion_tag::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; box-sizing: border-box; border: 1.5px solid var(--muted); }
.champion_tag.correct{ color: var(--ink); background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); padding: 1px 8px 1px 9px; border-radius: 3px; }
.champion_tag.correct::before{ display: none; }
.champion_tag.pending{ color: var(--ink); font-weight: 700; background-color: var(--panel); box-shadow: inset 0px 0px 0px 1px var(--line), inset 3px 0px 0px var(--muted); padding: 1px 8px 1px 9px; border-radius: 3px; }
.champion_tag.wrong{ color: var(--wrong-text); font-weight: 400; background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px var(--bad); padding: 1px 8px 1px 9px; border-radius: 3px; }
/* no dot on a pick or champion that's out: the chip says it */
.champion_tag.wrong::before{ display: none; }
/* basketball standings: correct picks per round */
.standings_table .round_col{ text-align: center; width: 1%; padding-left: 14px; padding-right: 6px; }   /* as narrow as the numbers allow; the left side holds the sort arrow */
/* 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.5; white-space: normal; }
/* "Root for (8) Ohio St to win it all, (5) Wisconsin runner-up" (the whole path on pointing at it), then
   how many of the ways left end in that finish, and the link to Root For */
.scenario_root_line{ display: block; cursor: help; }
.scenario_ways{ display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.scenario_ways a.scenario_root_for_link{ margin-left: 0px; }
.scenario_range{ display: inline-block; color: var(--ink); font-style: italic; }
.scenario_doesnt_matter{ color: var(--muted); }
.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.earned{ background-color: var(--meter-earned); }
.standings_key i.playoff{ background-color: var(--meter-playoff); }
.standings_key i.possible{ background-color: var(--meter-possible); }
.standings_key i.lost{ background-color: var(--meter-lost); }

.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);
}
/* Standings' Compare Picks bar (include/standings_table.php): pinned to the bottom of the screen while the table
   scrolls past, with a shadow and without the progress bar key while it's pinned; on a phone only once a player is ticked */
.standings_actions.compare_bar{ position: -webkit-sticky; position: sticky; bottom: 0px; z-index: 5; background-color: var(--panel); }
.standings_actions.compare_bar.stuck{ box-shadow: 0px -8px 18px rgba(0,0,0,.12); }
.standings_actions.compare_bar.stuck .standings_key{ display: none; }
.standings_actions.compare_bar input[disabled]{ opacity: .55; cursor: default; }
#standings_compare_clear{ font-weight: 600; }
@media (max-width: 640px){
	.standings_actions.compare_bar:not(.has_selection){ position: static; }
	.standings_actions.compare_bar.has_selection{ padding: 8px 12px; }
}
@media print{ .standings_actions.compare_bar{ position: static; box-shadow: none; } }
.standings_actions.compare_bar.compare_unpinned{ position: static; }   /* the Simple view: under the table, not pinned */

/* the Simple view (include/look.php): its note at the bottom of the players' pages (include/site_header.php) */
.simple_view_note{ margin: 8px auto 28px auto; padding: 0px 16px; text-align: center; font-size: 13px; color: var(--muted); }
.simple_view_note a{ font-weight: 600; }
@media print{ .simple_view_note{ display: none; } }

/* pinned confidence value tracker on the bowl_playoff entry forms */
.confidence_tracker{
	position: -webkit-sticky;    /* older iPhones */
	position: sticky;
	top: var(--section-nav-pin, 0px);   /* under the pool menu while it's pinned (section_nav.js) */
	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; }
/* each card sits in a wrapper that takes the card's place in the row, so a player can be dropped with the × in
   its corner (include/compare_picks.php compareCardEndHtml), and the "Add a player" box ends the row */
.compare_score_wrap{ position: relative; display: flex; flex: 1 1 150px; max-width: 230px; min-width: 0px; }
.compare_score_wrap > .compare_score{ flex: 1 1 auto; max-width: none; }
.compare_score_wrap.removable .compare_score_name{ padding-right: 20px; }
.compare_remove{ position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: 18px; line-height: 1; text-decoration: none; }
.compare_remove:hover{ background-color: var(--zebra); color: var(--bad); text-decoration: none; }
.compare_remove:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.compare_add{ flex: 1 1 150px; max-width: 230px; min-width: 0px; display: flex; flex-direction: column; justify-content: center; gap: 6px; margin: 0px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: left; }
.compare_add label{ font-size: 13px; font-weight: 600; color: var(--muted); }
.compare_add select{ width: 100%; min-width: 0px; }
.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:not(.compare_h2h), .compare_score.leader .compare_score_note:has(+ .compare_h2h){ color: var(--ink); font-weight: 600; }
/* two players: the record on the finished games they picked differently (include/compare_picks.php compareHeadToHeadHtml) */
.compare_score .compare_h2h{ margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); 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; }
/* computers, three players or fewer (.compare_fit.compare_few, around the key and the table): each player's
   column about 190px, so a pick sits near its points, and the key and the table only as wide as the columns
   need, centred, instead of stretching each column across the page.  Four or five already fill the width. */
@media (min-width: 641px){
	.compare_fit.compare_few{ width: fit-content; min-width: min(560px, 100%); max-width: min(1120px, 100%); margin: 0px auto; }
	.compare_fit.compare_few > .compare_key_bar, .compare_fit.compare_few > .standings_panel.compare_panel{ width: auto; max-width: none; }
	.compare_fit.compare_few table.standings_table.compare_table{ width: auto; }
	.compare_fit.compare_few .compare_table th.compare_player, .compare_fit.compare_few .compare_table td.compare_pick{ width: 190px; }
}
.compare_table th.compare_player a{ color: var(--on-band); text-decoration: none; }
.compare_table th.compare_player a:hover{ text-decoration: underline; }
/* a player's heading: the whole name, or on a phone the first name (and a last initial when two share it) */
.compare_initial{ display: none; }
/* under a game not played yet: what its winner means between the players (include/compare_picks.php compareStakeHtml) */
.compare_stake{ margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.compare_stake b{ color: var(--brand); font-weight: 700; white-space: nowrap; }
.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; }
/* as on Player Picks: plain cells, the team in a chip (right = green edge, wrong = grey text with a
   red edge, not played = an outlined box), the points green when won and grey when lost */
.compare_pick_inner{ align-items: center; }
.compare_team{ display: inline-flex; align-items: center; gap: 5px; min-width: 0px; padding: 1px 8px 1px 9px; border-radius: 3px; font-size: 14px; }
.compare_pick.correct .compare_team{ color: var(--ink); font-weight: 600; background-color: var(--correct-wash); box-shadow: inset 3px 0px 0px var(--good); }
.compare_pick.correct .compare_points{ color: var(--good); }
.compare_pick.pending .compare_team{ color: var(--ink); font-weight: 700; background-color: var(--panel); box-shadow: inset 0px 0px 0px 1px var(--line), inset 3px 0px 0px var(--muted); }
.compare_pick.pending .compare_team::before{ content: "\25CB"; font-size: 10px; color: var(--muted); }
.compare_pick.wrong .compare_team{ color: var(--wrong-text); background-color: var(--wrong-wash); box-shadow: inset 3px 0px 0px var(--bad); }
.compare_pick.wrong .compare_points{ color: var(--muted); font-weight: 600; }
/* the heading, with the switch for showing only the games the players picked differently (include/compare_picks.js) */
.compare_panel .picks_panel_head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.compare_split_switch{ display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.compare_split_switch small{ font-weight: 400; color: var(--muted); }
.compare_split_switch.disabled{ color: var(--muted); cursor: default; }
table.compare_table tbody tr.picks_hidden{ display: none; }
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); }
/* computers: each player's card in a row at the top of the table, over their own column and as wide as it,
   with Add a player and Sort by points over the games; the row scrolls away, the names under it stay in
   view.  Phones show the cards above the table instead (compare_scoreboard_phone) */
.compare_scoreboard_phone{ display: none; }
.compare_table thead tr.compare_cards_row td{ height: 1px; padding: 10px 6px 8px 6px; vertical-align: top; white-space: normal; background-color: var(--panel); border-bottom: 0px; }
.compare_table thead tr.compare_cards_row td.compare_cards_corner{ padding-left: 0px; z-index: 2; }
.compare_cards_row .compare_score_wrap{ max-width: none; height: 100%; }
.compare_cards_row .compare_add{ max-width: none; }
.compare_cards_corner .compare_sort{ display: inline-block; margin: 8px 0px 0px 12px; }
/* ‹ › in a card's bottom corner: move the player (and their column) one place left or right */
.compare_score_wrap.movable > .compare_score{ padding-bottom: 28px; }
.compare_move{ position: absolute; right: 6px; bottom: 5px; display: flex; gap: 2px; }
.compare_move a, .compare_move_none{ display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; border-radius: 4px; font-size: 20px; line-height: 1; text-decoration: none; }
.compare_move a{ color: var(--muted); }
.compare_move a:hover{ background-color: var(--zebra); color: var(--brand); text-decoration: none; }
.compare_move a:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.compare_move_none{ visibility: hidden; }
.compare_sort, .compare_table .compare_cards_corner a.compare_sort{ font-size: 13px; font-weight: 600; color: var(--brand); }
.compare_sort_line{ flex: 1 1 100%; text-align: right; }
/* each player's points beside their name in the pinned heading (include/compare_picks.php compareHeadingPointsHtml) */
.compare_head_points{ margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .8; }
.compare_head_points::before{ content: "\B7\A0"; }
.compare_head_points.leader{ color: var(--gold); opacity: 1; }
@media print{ .compare_move, .compare_remove, .compare_add, .compare_sort{ display: none; } }

/* 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_stake{ font-size: 11px; }
	.compare_table th.compare_player{ min-width: 92px; white-space: normal; }
	.compare_last{ display: none; }
	.compare_initial{ display: inline; }
	.compare_table td.compare_pick{ white-space: normal; min-width: 92px; }
	.compare_pick_inner{ gap: 4px; }
	.compare_team{ padding: 1px 5px 1px 7px; font-size: 13px; }   /* three or four players still fit */
	.compare_table .compare_total_label{ font-size: 12px; }
	.compare_score{ padding: 7px 10px; }
	.compare_score_wrap, .compare_add{ flex: 1 1 calc(50% - 4px); max-width: none; }
	.compare_scoreboard_phone{ display: flex; }
	.compare_table thead tr.compare_cards_row{ display: none; }
	.compare_score_points b{ font-size: 22px; }
}

@media (max-width: 640px){
	a.site_wordmark, a.site_wordmark:hover{ font-size: 24px; }   /* :hover too: a tap is a hover on a phone, and the 28px hover size would win for a moment */
	.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, .page_title tr.title_wordmark_row + tr 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; }
}

/* ---- Hall of Fame (hall_of_fame.php) -------------------------------------- */
.hof_intro{ max-width: 1120px; margin: 0px auto 14px auto; padding: 0px 16px; box-sizing: border-box; text-align: center; }
.hof_back{ max-width: 1120px; margin: 0px auto 10px auto; padding: 0px 16px; box-sizing: border-box; font-size: 14px; }
/* the kinds of pools: a row of choices, the current one filled */
.hof_kinds{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1120px; margin: 0px auto 16px auto; padding: 0px 16px; box-sizing: border-box; }
.hof_kinds a, .hof_kinds span{ padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--panel); color: var(--ink); font: 600 14px/1.2 var(--body); text-decoration: none; }
.hof_kinds a:hover{ border-color: var(--brand); color: var(--brand); }
.hof_kinds span.current{ border-color: var(--button); background-color: var(--button); color: var(--on-button); }
.standings_summary.hof_summary{ justify-content: center; }
table.hof_table th{ text-align: left; }
table.hof_table th.num{ text-align: right; }
/* the lists: two across on computers (the wide ones across both), one under another on phones */
.hof_grid{ display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 18px; max-width: 1120px; margin: 0px auto; padding: 0px 12px; box-sizing: border-box; }
.hof_grid > .standings_panel.picks_panel{ max-width: none; margin: 0px; }
.hof_grid > .hof_wide{ grid-column: 1 / -1; }
@media (max-width: 760px){
	.hof_grid{ grid-template-columns: minmax(0px, 1fr); padding: 0px; }
}
.hof_player{ font-weight: 600; }
table.hof_table td.standings_place{ width: 32px; font-size: 18px; }
table.hof_table td.hof_won_list{ white-space: normal; min-width: 220px; }
.hof_pool_chip{ display: inline-block; margin: 2px 4px 2px 0px; padding: 1px 8px; border-radius: 10px; background-color: var(--correct-wash); color: var(--good); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Pick popularity (include/pick_popularity.php): each pick's share of the pool.  The bracket's
   Pool % switch (include/pick_popularity.js) puts pick_share_on on the page, which swaps the
   points for the share.  Player Picks leaves the seeds off the bracket's picks in both modes
   (the 1st Round column shows them), so nothing shifts and the share has room */
.tourney_entry_bracket .pick_seed{ display: none; }
.pick_share{ display: none; }
html:not(.pick_share_on) .pick_share_switch .pick_share_key{ visibility: hidden; }   /* keeps its room, so the bar doesn't change size */
html.pick_share_on .tourney_entry_bracket .pick_share, html.pick_share_on .tourney_opening .pick_share, html.pick_share_on .pbracket .pick_share{ display: inline; }
html.pick_share_on .pbracket .pick_score{ display: none; }
.pbracket_pick_extra{ float: right; margin-left: 8px; font-variant-numeric: tabular-nums; }
.pbracket .bracket_slot.picked.correct .pick_score{ color: var(--good); }
.pbracket .bracket_slot.picked.correct .pick_share{ color: var(--good); }
html.pick_share_on .tourney_entry_bracket .pick_score, html.pick_share_on .tourney_opening .picked .pick_score, html.pick_share_on .tourney_champion small{ display: none; }
html.pick_share_on .tourney_entry_bracket .pick.slot.correct, html.pick_share_on .tourney_entry_bracket .pick.slot.wrong, html.pick_share_on .tourney_entry_bracket .pick.slot.pending{ gap: 4px; }
/* the champion's share keeps its line in Points mode too, so the box stays the same size */
.pick_share_champion{ display: block; visibility: hidden; margin-top: 2px; font: 600 12px/1.2 var(--body); letter-spacing: 0px; text-transform: none; color: var(--muted); }
html.pick_share_on .pick_share_champion{ visibility: visible; }
.pick_share{ font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.pick.slot.correct .pick_share, .tourney_opening .correct .pick_share{ font-weight: 700; color: var(--good); }
.pick_share.pick_share_bold, .pick.slot.correct .pick_share.pick_share_bold, .pick_share.pick_share_lone{ color: var(--gold); }
.pick_share.pick_share_lone{ font-size: 13px; line-height: 1; }
.tourney_opening .pick_share{ margin-left: 6px; }
a.pick.slot{ color: inherit; text-decoration: none; cursor: pointer; }
a.pick.slot:hover, a.pick.slot:focus-visible, a.tourney_champion:hover, a.tourney_champion:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
a.tourney_champion{ display: block; text-decoration: none; cursor: pointer; }
.pick_share_switch .pick_share_key{ margin-left: 12px; font-size: 13px; font-weight: 600; color: var(--ink); background-color: var(--gold-soft); box-shadow: inset 3px 0px 0px var(--gold); padding: 1px 8px 1px 9px; border-radius: 3px; }
.pick_share_switch{ justify-content: flex-start; margin: 0px; font-size: 13px; }
.pick_share_switch button{ padding: 3px 10px; font-size: 13px; }
.pick_share_champion_line{ margin-top: 3px; font-size: 12px; text-align: right; color: var(--muted); }
.hof_facts.pick_popularity_facts{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); padding: 0px; }
.picks_bar.standings_width + .hof_facts.pick_popularity_facts{ max-width: 980px; }
.pick_share_meter{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pick_share_meter i{ display: block; width: 90px; height: 8px; border-radius: 4px; background-color: var(--line); overflow: hidden; }
.pick_share_meter i b{ display: block; height: 100%; background-color: var(--brand); }
.pick_share_meter i b.pick_share_bold{ background-color: var(--gold); }
.pick_share_only{ display: inline-block; padding: 0px 7px; border-radius: 8px; background-color: var(--gold); color: var(--on-gold); font: 700 11px/18px var(--body); letter-spacing: .03em; white-space: nowrap; }
.standings_summary_status .pick_champion_share{ display: block; margin-top: 4px; font: 400 14px/1.4 var(--body); letter-spacing: 0px; text-transform: none; color: var(--muted); }
.pick_surprises{ margin-top: 18px; margin-bottom: 18px; text-align: left; }
.pick_surprises a.pick_surprise_link{ color: var(--ink); text-decoration: none; }
.pick_surprises a.pick_surprise_link:hover{ color: var(--brand); text-decoration: underline; }
/* the who-picked pop-ups and pages: how the pool split */
.pick_split{ margin: 12px 0px 0px 0px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: var(--radius); background-color: var(--gold-soft); text-align: left; }
.pick_split_label{ margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pick_split_names{ display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pick_split_names span:last-child{ text-align: right; }
.pick_split_bar{ display: flex; height: 14px; border-radius: 7px; overflow: hidden; background-color: var(--line); }
.pick_split_bar i{ display: block; height: 100%; }
.pick_split_bar i.won{ background-color: var(--good); }
.pick_split_bar i.lost{ background-color: var(--bad); }
.pick_split_bar i.side_0{ background-color: var(--brand); }
.pick_split_bar i.side_1{ background-color: var(--muted); }
.pick_split_note{ margin-top: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px){
	.pick_share_meter i{ width: 44px; }
	.pick_share_pool .pick_share_meter i{ display: none; }
	/* the switch stays on one line (the Standings arrows' switch puts its label on its own row) */
	.pick_share_switch span{ flex: none; margin: 0px 10px 0px 0px; text-align: left; }
	.pick_share_switch .pick_share_key{ margin: 0px 0px 0px 10px; }
	.pick_share_champion_line{ text-align: left; }
}
/* Rivals (include/rivals.php): the career page's box, the matchup page, and Closest Rivalries */
.hof_rivals{ max-width: 1120px; margin: 0px auto 18px auto; }
td.hof_record{ font: 700 17px/1 var(--display); letter-spacing: .02em; }
.hof_rival_tag{ display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hof_rival_tag.leads{ background-color: var(--correct-wash); color: var(--good); }
.hof_rival_tag.trails{ background-color: var(--wrong-wash); color: var(--bad); }
.hof_rival_tag.even{ background-color: var(--zebra); color: var(--muted); box-shadow: inset 0px 0px 0px 1px var(--line); }
.hof_last5{ display: inline-flex; gap: 3px; vertical-align: middle; }
.hof_last5 i{ width: 16px; height: 16px; border-radius: 50%; font: 700 9px/16px var(--body); font-style: normal; text-align: center; color: #ffffff; }
.hof_last5 i.w{ background-color: var(--good); }
.hof_last5 i.l{ background-color: var(--bad); }
.hof_last5 i.t{ background-color: var(--muted); }
.hof_versus{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 18px; max-width: 760px; margin: 0px auto 16px auto; padding: 0px 12px; }
.hof_versus_side{ text-align: center; }
.hof_versus_wins{ font: 700 64px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.hof_versus_side.ahead .hof_versus_wins{ color: var(--gold); }
.hof_versus_name{ font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.hof_versus_name a.hof_player{ color: var(--ink); }
.hof_versus_middle{ text-align: center; font-size: 13px; color: var(--muted); }
.hof_versus_middle b{ display: block; font: 700 18px/1.2 var(--display); text-transform: uppercase; color: var(--ink); }
.hof_facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; max-width: 1120px; margin: 0px auto 16px auto; padding: 0px 12px; box-sizing: border-box; text-align: left; }
.hof_fact{ padding: 10px 14px; background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.hof_fact_label{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hof_fact_value{ font-weight: 700; color: var(--ink); }
.hof_fact_detail{ font-size: 13px; color: var(--muted); }
.hof_result{ font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hof_result.w{ color: var(--good); }
.hof_result.l{ color: var(--bad); }
.hof_result.t{ color: var(--muted); }
@media (max-width: 640px){
	.hof_hide_phone{ display: none; }
	.hof_versus_wins{ font-size: 46px; }
	.hof_versus_name{ font-size: 17px; }
}
/* Longest Streaks: a streak that reaches the newest season; Best Scores: the kind headings on All Pools, and the raw points beside the share */
.hof_going{ display: inline-block; margin-left: 6px; padding: 0px 7px; border-radius: 10px; border: 1px solid var(--good); color: var(--good); font-size: 11px; font-weight: 600; vertical-align: 1px; }
table.hof_table tr.hof_group_row th{ padding-top: 10px; background: none; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
small.hof_score_points{ margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
@media (max-width: 640px){
	.hof_going{ display: block; width: fit-content; margin: 3px 0px 0px 0px; }   /* under the name, so the table fits a phone */
	small.hof_score_points{ display: none; }   /* the share alone; the points are in its tooltip */
	table.hof_table td.hof_score_pool{ white-space: normal; }
}
table.hof_champions td{ white-space: normal; vertical-align: top; }
table.hof_champions td.hof_season{ width: 64px; font: 700 18px/1.3 var(--display); color: var(--brand); white-space: nowrap; }
.hof_champion_list{ display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hof_champion_list > span{ white-space: nowrap; }
.hof_champion_list small{ color: var(--muted); }
.hof_find{ width: 200px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--panel); color: var(--ink); font: 14px var(--body); }
table.standings_table tbody tr.hof_won td{ background-color: var(--gold-soft); }
.hof_also{ color: var(--muted); }
/* a player's finishes, one dot per pool */
.hof_chart{ padding: 10px 12px 4px 12px; overflow-x: auto; }
.hof_chart svg{ display: block; width: 100%; min-width: 560px; height: auto; }   /* phones: scrolls sideways rather than shrinking its labels too small to read */
.hof_chart text{ fill: var(--muted); font: 12px var(--body); }
.hof_chart_line{ stroke: var(--line); stroke-width: 1; }
.hof_chart_line.dashed{ stroke-dasharray: 4 4; }
.hof_dot{ fill: var(--brand); fill-opacity: .55; cursor: pointer; }
.hof_dot.won{ fill: var(--gold); fill-opacity: 1; stroke: var(--ink); stroke-width: 1; }
.hof_dot.lit{ fill-opacity: 1; stroke: var(--ink); stroke-width: 2; }
table.standings_table tbody tr.hof_lit td{ background-color: var(--gold-soft); box-shadow: inset 0 -1px 0 var(--brand), inset 0 1px 0 var(--brand); }
table.hof_table tr[data-pool]{ cursor: pointer; }   /* a click keeps the pool lit */
/* a player's chart stays at the top of the window while their pools scroll under it, on screens with room for both */
@media (min-width: 761px) and (min-height: 700px){
	.hof_chart_panel{ position: -webkit-sticky; position: sticky; top: 8px; z-index: 10; box-shadow: 0px -8px 0px var(--surface), 0px 6px 14px rgba(0, 0, 0, .12); }
}

@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 */
	--correct-wash:#173a2a;  /* behind a correct pick: a dark green chip */
	--bad:#f0716a;           /* wrong, errors */
	--wrong-wash:color-mix(in srgb, var(--bad) 14%, var(--panel));   /* behind a wrong pick: a faint dark chip */
	--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 */
	--meter-earned:#5b74e8;  /* the Standings bar's earned part: the bright link blue (the navy band would vanish on dark) */
}

}