/* CFP Rankings Hub v0.1.0 */
.cfprh,
.cfprh-summary,
.cfprh-updated,
.cfprh-crumbs,
.cfprh-pager,
.cfprh-notice {
	--cfprh-ink: #14213d;
	--cfprh-turf: #1f6b43;
	--cfprh-flag: #b42318;
	--cfprh-gold: #b7862c;
	--cfprh-line: #d9dee6;
	--cfprh-wash: #f3f5f8;
	--cfprh-muted: #5a6676;
	--cfprh-cond: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
}

.cfprh { margin: 0 0 1.75em; color: var(--cfprh-ink); }
.cfprh *,
.cfprh *::before,
.cfprh *::after { box-sizing: border-box; }
.cfprh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Summary answer block */
.cfprh-summary {
	font-size: 1.08em;
	line-height: 1.6;
	max-width: 70ch;
	padding-left: 14px;
	border-left: 4px solid var(--cfprh-turf);
	margin: 0 0 1.5em;
}
.cfprh-updated { color: var(--cfprh-muted); font-size: .9em; margin: 0 0 1em; }
.cfprh-notice { background: #fff7e6; border: 1px solid #f0d9a8; padding: 10px 14px; border-radius: 4px; }

/* Board heading */
.cfprh-board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 8px; }
.cfprh-board-title {
	font-family: var(--cfprh-cond);
	font-weight: 700;
	font-size: 1.35em;
	line-height: 1.2;
	margin: 0 0 8px;
}
.cfprh-board-head .cfprh-board-title { margin: 0; }
.cfprh-board-meta { margin: 0; color: var(--cfprh-muted); font-size: .88em; }

/* Tables */
.cfprh-table { width: 100%; border-collapse: collapse; margin: 0; font-size: .97em; background: #fff; }
.cfprh-table th,
.cfprh-table td { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--cfprh-line); text-align: left; vertical-align: middle; }
.cfprh-table thead th {
	font-family: var(--cfprh-cond);
	font-weight: 600;
	font-size: .95em;
	letter-spacing: .02em;
	color: #fff;
	background: var(--cfprh-ink);
	border-bottom: 0;
	white-space: nowrap;
}
.cfprh-table tbody th { font-weight: 600; }

/* Top 25 rows */
.cfprh-board tbody tr > td:first-child { border-left: 4px solid transparent; }
.cfprh-board tbody tr.is-in > td:first-child { border-left-color: var(--cfprh-turf); }
.cfprh-board tbody tr.is-bye > td:first-child { border-left-color: var(--cfprh-gold); }
.cfprh-board tbody tr.is-bye { background: #fbf7ee; }
.cfprh-board tbody tr.is-out { color: #3d4757; }
.cfprh-board .c-rank { width: 92px; white-space: nowrap; }
.cfprh-rank {
	display: inline-block;
	min-width: 1.6em;
	font-family: var(--cfprh-cond);
	font-weight: 700;
	font-size: 1.55em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.cfprh-team { display: block; font-weight: 700; }
.cfprh-conf { display: block; font-weight: 400; font-size: .82em; color: var(--cfprh-muted); }
.cfprh-board .c-rec,
.cfprh-board .c-prev { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfprh-board .c-status { white-space: nowrap; font-size: .9em; }
.cfprh-board tr.is-out .c-status { color: var(--cfprh-muted); }

.cfprh-move { display: inline-block; margin-left: 4px; font-size: .78em; font-weight: 700; vertical-align: middle; font-variant-numeric: tabular-nums; }
.cfprh-move.is-up { color: var(--cfprh-turf); }
.cfprh-move.is-down { color: var(--cfprh-flag); }
.cfprh-move.is-same { color: #9aa3b0; }
.cfprh-move.is-new { color: #fff; background: var(--cfprh-ink); padding: 1px 5px; border-radius: 3px; font-size: .7em; }
.cfprh-move span[aria-hidden] { font-size: .8em; margin-right: 1px; }

/* The playoff line: a yard line drawn across the board */
.cfprh-cut td {
	padding: 0 !important;
	border: 0 !important;
	height: 30px;
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 2px, transparent 2px 22px) 0 0 / 100% 7px no-repeat,
		repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 2px, transparent 2px 22px) 0 100% / 100% 7px no-repeat,
		var(--cfprh-turf);
	text-align: center;
}
.cfprh-cut span {
	display: inline-block;
	padding: 0 10px;
	line-height: 30px;
	color: #fff;
	font-family: var(--cfprh-cond);
	font-weight: 600;
	font-size: .9em;
	letter-spacing: .02em;
}

.cfprh-dropped,
.cfprh-note,
.cfprh-legend { font-size: .9em; color: var(--cfprh-muted); margin: 10px 0 0; max-width: 80ch; }
.cfprh-dropped strong { color: var(--cfprh-ink); }
.cfprh-legend span { display: inline-flex; align-items: center; margin-right: 16px; }
.cfprh-legend span::before { content: ""; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; }
.cfprh-legend .k-bye::before { background: var(--cfprh-gold); }
.cfprh-legend .k-in::before { background: var(--cfprh-turf); }
.cfprh-legend .k-auto::before { display: none; }

/* Schedule */
.cfprh-sched tr.is-next { background: #eef6f1; }
.cfprh-sched tr.is-next th { box-shadow: inset 4px 0 0 var(--cfprh-turf); }
.cfprh-sched a { font-weight: 700; }

/* Next release */
.cfprh-next { border: 2px solid var(--cfprh-ink); padding: 14px 18px; border-radius: 6px; background: #fff; }
.cfprh-next p { margin: 0; }
.cfprh-next-what { font-family: var(--cfprh-cond); font-weight: 600; font-size: 1.05em; color: var(--cfprh-muted); }
.cfprh-next-when { font-family: var(--cfprh-cond); font-weight: 700; font-size: 1.5em; line-height: 1.25; }

/* Movers */
.cfprh-movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cfprh-mcol { border-top: 4px solid var(--cfprh-turf); background: var(--cfprh-wash); padding: 12px 14px; }
.cfprh-mcol.is-down { border-top-color: var(--cfprh-flag); }
.cfprh-mhead { font-family: var(--cfprh-cond); font-weight: 700; font-size: 1.15em; margin: 0 0 6px; }
.cfprh-mcol ul { list-style: none; margin: 0; padding: 0; }
.cfprh-mcol li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cfprh-line); margin: 0; }
.cfprh-mcol li:last-child { border-bottom: 0; }
.cfprh-mcol li span { font-weight: 700; }
.cfprh-mcol li em { font-style: normal; color: var(--cfprh-muted); white-space: nowrap; }

/* Bracket */
.cfprh-bracket { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 14px; min-width: 760px; padding: 4px 0 8px; }
.cfprh-round { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.cfprh-round-name { font-family: var(--cfprh-cond); font-weight: 700; font-size: 1.05em; margin: 0 0 2px; padding-bottom: 4px; border-bottom: 2px solid var(--cfprh-ink); }
.cfprh-round-name span { font-weight: 600; color: var(--cfprh-muted); font-size: .85em; margin-left: 4px; }
.cfprh-game { border: 1px solid var(--cfprh-line); border-radius: 6px; background: #fff; overflow: hidden; }
.cfprh-slot { display: flex; align-items: center; gap: 8px; padding: 7px 10px; min-height: 38px; font-size: .92em; }
.cfprh-slot + .cfprh-slot { border-top: 1px solid var(--cfprh-line); }
.cfprh-slot.is-bye { background: #fbf7ee; box-shadow: inset 3px 0 0 var(--cfprh-gold); }
.cfprh-slot.is-tbd { color: var(--cfprh-muted); font-style: italic; }
.cfprh-seed { flex: 0 0 22px; font-family: var(--cfprh-cond); font-weight: 700; font-size: 1.15em; text-align: center; }
.cfprh-name { flex: 1 1 auto; font-weight: 600; }
.cfprh-slot.is-tbd .cfprh-name { font-weight: 400; }
.cfprh-rk { flex: 0 0 auto; color: var(--cfprh-muted); font-size: .82em; white-space: nowrap; }
.cfprh-a { text-decoration: none; border: 0; font-size: .72em; font-weight: 700; color: #fff; background: var(--cfprh-turf); padding: 0 4px; border-radius: 3px; vertical-align: 1px; cursor: help; }
.cfprh-round.is-final .cfprh-game { border: 2px solid var(--cfprh-gold); }

/* Archive list */
.cfprh-archive { list-style: none; margin: 0 0 1.75em; padding: 0; border-top: 1px solid var(--cfprh-line); }
.cfprh-archive li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--cfprh-line); margin: 0; }
.cfprh-archive a { font-weight: 700; }
.cfprh-archive span { color: var(--cfprh-muted); }

/* Virtual page chrome */
.cfprh-crumbs { font-size: .88em; color: var(--cfprh-muted); margin-bottom: 10px; }
.cfprh-crumbs .sep { margin: 0 6px; }
.cfprh-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 2em 0 0; padding-top: 14px; border-top: 1px solid var(--cfprh-line); }
.cfprh-pager a { font-weight: 700; }
.cfprh-empty { color: var(--cfprh-muted); }

.cfprh a:focus-visible,
.cfprh-pager a:focus-visible,
.cfprh-crumbs a:focus-visible { outline: 2px solid var(--cfprh-ink); outline-offset: 2px; }

@media (max-width: 640px) {
	.cfprh-board .c-prev { display: none; }
	.cfprh-table th,
	.cfprh-table td { padding: 8px 6px; }
	.cfprh-board .c-rank { width: 70px; }
	.cfprh-rank { font-size: 1.35em; }
	.cfprh-board .c-status { white-space: normal; font-size: .82em; }
	.cfprh-movers { grid-template-columns: 1fr; }
	.cfprh-cut span { font-size: .78em; }
}

@media print {
	.cfprh-cut td { background: none; border-top: 2px dashed #000 !important; }
	.cfprh-cut span { color: #000; }
	.cfprh-table thead th { background: none; color: #000; border-bottom: 2px solid #000; }
}
.cfprh-seasons { font-size: .95em; margin: -1em 0 1.75em; }

/* v0.2: games from the API */
.cfprh-games { display: block; margin-top: 2px; }
.cfprh-g { display: block; font-size: .78em; color: var(--cfprh-muted); font-weight: 400; }
.cfprh-g.is-live { color: var(--cfprh-flag); font-weight: 700; }
.cfprh-games-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cfprh-line); }
.cfprh-games-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 2px; margin: 0; border-bottom: 1px solid var(--cfprh-line); }
.cfprh-games-list li.is-big { background: #fbf7ee; box-shadow: inset 3px 0 0 var(--cfprh-gold); padding-left: 10px; }
.cfprh-games-list li.is-live .cfprh-when { color: var(--cfprh-flag); font-weight: 700; }
.cfprh-m { font-weight: 600; }
.cfprh-m em { font-style: normal; color: var(--cfprh-muted); font-weight: 400; margin: 0 4px; }
.cfprh-r { display: inline-block; min-width: 1.5em; padding: 0 4px; border-radius: 3px; background: var(--cfprh-ink); color: #fff; font-family: var(--cfprh-cond); font-size: .85em; text-align: center; }
.cfprh-when { color: var(--cfprh-muted); font-size: .92em; white-space: nowrap; }
.cfprh-results .is-win { font-weight: 800; }
.cfprh-results .cfprh-m > span:not(.is-win) { font-weight: 400; }