/**
 * Front end styles.
 *
 * Colours are inherited from the active theme wherever possible, so the tables
 * read correctly on the Dreamcloud dark bands as well as on a light page.
 */

.fbb {
	margin-block: 1.5rem;
}

.fbb__title {
	margin-block: 0 0.75rem;
}

.fbb__summary,
.fbb__hint {
	margin-block: 0 1rem;
}

.fbb__hint {
	opacity: 0.75;
	font-size: 0.875rem;
}

.fbb__empty {
	margin: 0;
	padding: 1rem;
	border: 1px dashed currentColor;
	border-radius: 8px;
	opacity: 0.7;
}

/* The table scrolls inside its own box rather than widening the page. */
.fbb__table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	white-space: nowrap;
}

.fbb__table th,
.fbb__table td {
	padding: 0.6rem 0.75rem;
	border-block-end: 1px solid rgba(128, 128, 128, 0.25);
	text-align: start;
	font-weight: 400;
}

.fbb__table thead th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.fbb__table tbody th {
	font-weight: 600;
}

.fbb--num {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.fbb--strong {
	font-weight: 700;
}

.fbb__free {
	opacity: 0.6;
}

.fbb__notice {
	margin-block: 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	border-inline-start: 4px solid currentColor;
	background-color: rgba(128, 128, 128, 0.12);
}

.fbb__notice--error {
	color: #c8191e;
}

.fbb__form p,
.fbb__search {
	margin-block: 0 1rem;
}

.fbb__form label {
	display: block;
	margin-block-end: 0.35rem;
	font-weight: 600;
}

.fbb__form input[type="text"] {
	width: 100%;
	max-width: 24rem;
}

.fbb__search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fbb__search input[type="search"] {
	flex: 1 1 14rem;
	min-width: 0;
}

.fbb__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.fbb__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 1.25rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.fbb__button:hover,
.fbb__button:focus-visible {
	background-color: currentColor;
}

/* The label flips to the page background so it stays legible when filled. */
.fbb__button:hover > *,
.fbb__button:focus-visible {
	mix-blend-mode: difference;
}

/* Week picker
   ------------------------------------------------------------------------- */

.fbb__weeks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-block: 0 1.25rem;
}

.fbb__week {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding-inline: 0.4rem;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 6px;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: inherit;
}

.fbb__week.is-current {
	border-color: currentColor;
	font-weight: 700;
	background-color: rgba(128, 128, 128, 0.18);
}

/* Matchup and bracket cards
   ------------------------------------------------------------------------- */

.fbb__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbb__card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 10px;
}

.fbb__side {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

/* The winner is bolded rather than coloured: colour alone would not survive
   a dark theme or read for anyone with a colour vision deficiency. */
.fbb__side.is-winner {
	font-weight: 700;
}

.fbb__side.is-winner .fbb__cardteam::after {
	content: " \25B8";
}

.fbb__cardteam {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.fbb__cardscore {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.fbb__seed {
	flex: 0 0 1.4rem;
	font-size: 0.75rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

.fbb__cardround,
.fbb__cardnote {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.6;
}

.fbb__card--bye {
	opacity: 0.6;
}

.fbb__rounds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	align-items: start;
}

.fbb__round {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.fbb__roundtitle {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.fbb__champion {
	margin-block: 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid currentColor;
	border-radius: 8px;
}

/* Pagination
   ------------------------------------------------------------------------- */

.fbb__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-block-start: 1rem;
}

.fbb__pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding-inline: 0.5rem;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}

.fbb__pager .page-numbers.current {
	border-color: currentColor;
	font-weight: 700;
	background-color: rgba(128, 128, 128, 0.18);
}

/* --------------------------------------------------------------------------
 * Category leagues, the waiver wire and the transaction feed (1.2)
 * ----------------------------------------------------------------------- */

.fbb__subtitle {
	margin-block: 2rem 0.75rem;
}

.fbb__notice--success {
	border-inline-start: 3px solid #00a32a;
}

/* A form sitting inside a table cell must not add a block of its own. */
.fbb__inline {
	display: inline;
	margin: 0;
}

.fbb__button--small {
	padding-block: 0.25rem;
	padding-inline: 0.6rem;
	font-size: 0.8125rem;
}

.fbb__button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* The raw total a roto rank point was earned on, under the rank point. */
.fbb__sub {
	display: block;
	opacity: 0.6;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

/* A team's own category totals: one row, so it reads as a summary strip. */
.fbb__table--totals {
	margin-block-end: 1.5rem;
}

/*
 * The nine-column breakdown under a matchup card. Small and dense on purpose:
 * it is the detail behind the score, not the score itself.
 */
.fbb__cats {
	width: 100%;
	margin-block-start: 0.75rem;
	border-collapse: collapse;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.fbb__cats th,
.fbb__cats td {
	padding: 0.2rem 0.3rem;
	border-block-start: 1px solid rgba(128, 128, 128, 0.2);
	text-align: center;
	font-weight: 400;
}

.fbb__cats thead th {
	border-block-start: 0;
	opacity: 0.6;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fbb__cats tbody th {
	width: 1.5rem;
	opacity: 0.6;
}

.fbb__cats td.is-winner {
	font-weight: 700;
	/* Weight carries the meaning; colour only reinforces it. */
	color: #0a7d32;
}

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

.fbb__feeditem {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding-block: 0.5rem;
	border-block-end: 1px solid rgba(128, 128, 128, 0.25);
}

.fbb__feedwhen {
	flex: 0 0 auto;
	min-width: 6rem;
	opacity: 0.65;
	font-size: 0.8125rem;
}