/*
 * Bingo Book Board: the offers board for Full House UK, printed as a scorecard, with a compact grid as
 * the second layout. Every rule is scoped under .bbb-board. Colours are read from the theme's --fh-*
 * tokens where they exist, with the same values repeated as fallbacks so the board still looks right if
 * it is dropped into a page on its own.
 *
 * 1. tokens and the hidden text          5. the fold-outs under the card
 * 2. heading, disclosure, filter note     6. show all, and the editors-only notices
 * 3. the scorecard                        7. the grid layout
 * 4. the button and the small print       8. narrower screens, forced colours and paper
 */

/* 1. ------------------------------------------------------------------ tokens --- */
.bbb-board {
	--bbb-ink: var(--fh-ink, #1E1A3C);
	--bbb-ink-soft: var(--fh-ink-2, #585073);
	--bbb-page: var(--fh-page, #F6F4FB);
	--bbb-card: var(--fh-card, #FFFFFF);
	--bbb-page-2: var(--fh-page-2, #EDEAF7);
	--bbb-hall: var(--fh-hall, #231A52);
	--bbb-hall-2: var(--fh-hall-2, #3B2F80);
	--bbb-rule: var(--fh-rule, #DCD7EC);
	--bbb-red: var(--fh-ball-red, #D8334A);
	--bbb-yellow: var(--fh-ball-yellow, #F2B705);
	--bbb-green: var(--fh-ball-green, #197F49);
	--bbb-blue: var(--fh-ball-blue, #2E6FD9);
	--bbb-cta: var(--fh-cta, #C4396E);
	--bbb-cta-over: var(--fh-cta-hover, #A32B59);
	--bbb-good: var(--fh-good, #0F7A50);
	--bbb-bad: var(--fh-bad, #A8341A);
	--bbb-round: var(--fh-radius, 10px);
	--bbb-display: var(--fh-head-face, var(--fh-head-font, Chivo, ui-sans-serif, system-ui, sans-serif));
	--bbb-text: var(--fh-body-face, var(--fh-body-font, "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
	position: relative;
	margin: 0;
	color: var(--bbb-ink);
	font-family: var(--bbb-text);
	font-size: 1rem;
	line-height: 1.55;
}
.bbb-board *,
.bbb-board *::before,
.bbb-board *::after { box-sizing: border-box; }

.bbb-board .bbb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 2. ------------------------------ heading, commission line and the filter note --- */
.bbb-board .bbb-board__heading {
	margin: 0 0 0.75rem;
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 1.55rem;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--bbb-ink);
}
.bbb-board .bbb-disclose {
	margin: 0 0 0.7rem;
	font-size: 0.87rem;
	line-height: 1.5;
	color: var(--bbb-ink-soft);
}
.bbb-board .bbb-hint {
	position: relative;
	margin: 0 0 1.05rem;
	padding: 0.85rem 1.05rem 0.85rem 3rem;
	background: var(--bbb-page-2);
	border: 1px solid var(--bbb-rule);
	border-left: 5px solid var(--bbb-yellow);
	border-radius: var(--bbb-round);
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--bbb-ink);
}
.bbb-board .bbb-hint::before {
	content: "!";
	position: absolute;
	left: 0.95rem;
	top: 0.85rem;
	display: grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: var(--bbb-yellow);
	color: var(--bbb-ink);
	font: 900 0.9rem/1 var(--bbb-display);
}

/* 3. -------------------------------------------------------------- the scorecard ---
   A results board: deep indigo furniture under a yellow rule, the ball colours on the pips, and the
   total as the strongest figure in its row. The card lives in its own scrolling region, so a narrow
   screen moves the marks sideways and never the page. */
.bbb-board--scorecard {
	--bbb-pos-w: 2.9rem;    /* the place column, held in place while the card scrolls */
	--bbb-site-w: 13.5rem;  /* the site column, held in place beside it */
}
/* Only printed where the card actually scrolls, which is 1024 and below */
.bbb-board .bbb-swipe { display: none; }
.bbb-board .bbb-court {
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--bbb-card);
	border: 1px solid var(--bbb-hall);
	border-radius: var(--bbb-round);
}
.bbb-board .bbb-court:focus-visible { outline: 3px solid var(--bbb-blue); outline-offset: 2px; }

.bbb-board .bbb-score {
	width: 100%;
	min-width: 62rem;          /* narrower than this the card scrolls rather than squeezing a term */
	margin: 0;
	border: 0;
	border-collapse: separate; /* separate, so the held columns keep their edges while they stick */
	border-spacing: 0;
	font-size: 0.92rem;
	line-height: 1.45;
}
.bbb-board .bbb-score th,
.bbb-board .bbb-score td {
	padding: 0.7rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--bbb-rule);
	text-align: left;
	vertical-align: top;
}
.bbb-board .bbb-score thead th {
	background: var(--bbb-hall);
	border-bottom: 3px solid var(--bbb-yellow);
	color: #fff;
	font: 700 0.74rem/1.3 var(--bbb-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: bottom;
}
.bbb-board .bbb-score thead th a,
.bbb-board .bbb-score thead th a:visited { color: #fff; text-underline-offset: 0.18em; }
.bbb-board .bbb-score__most {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #CFC9E8;
}
.bbb-board .bbb-score tbody tr > * { background: var(--bbb-card); }
.bbb-board .bbb-score tbody tr:nth-of-type(even) > * { background: var(--bbb-page-2); }
.bbb-board .bbb-score tbody tr:last-child > * { border-bottom: 0; }

/* The place, then the site. Both are held at the left edge; the site sits a pixel over the place so a
   rounding difference between the two never shows a sliver of the marks between them. */
.bbb-board .bbb-score .bbb-score__pos,
.bbb-board .bbb-score .bbb-score__site {
	position: sticky;
	z-index: 2;
}
.bbb-board .bbb-score .bbb-score__pos {
	left: 0;
	width: var(--bbb-pos-w);
	min-width: var(--bbb-pos-w);
	padding-right: 0.3rem;
	padding-left: 0.5rem;
	text-align: center;
}
.bbb-board .bbb-score tbody .bbb-score__pos {
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 1.15rem;
	line-height: 1.3;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--bbb-hall);
}
.bbb-board .bbb-score .bbb-score__site {
	left: calc(var(--bbb-pos-w) - 1px);
	width: var(--bbb-site-w);
	min-width: var(--bbb-site-w);
	border-right: 1px solid var(--bbb-rule);
	vertical-align: middle;
	font-weight: 400;
}
.bbb-board .bbb-score thead .bbb-score__pos,
.bbb-board .bbb-score thead .bbb-score__site { z-index: 3; }
.bbb-board .bbb-score .bbb-score__row--top .bbb-score__pos { box-shadow: inset 4px 0 0 var(--bbb-cta); }

.bbb-board .bbb-site {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}
.bbb-board .bbb-brick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 3rem;
	height: 2.3rem;
	padding: 0.18rem 0.24rem;
	border-radius: 6px;
	background: var(--bbb-tile, var(--bbb-hall));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bbb-board .bbb-brick img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}
/* The fallback when a record carries no logo at all */
.bbb-board .bbb-brick__word {
	font: 700 0.6rem/1.1 var(--bbb-display);
	color: #fff;
	text-align: center;
}
.bbb-board .bbb-score__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.22rem 0.3rem;
	min-width: 0;
}
.bbb-board .bbb-score__name {
	width: 100%;
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 1.02rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--bbb-ink);
	overflow-wrap: break-word;
}
.bbb-board .bbb-score__name a,
.bbb-board .bbb-score__name a:visited { color: inherit; text-decoration: none; }
.bbb-board .bbb-score__name a:hover {
	color: var(--bbb-hall-2);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}
.bbb-board .bbb-flag,
.bbb-board .bbb-mark {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.79rem;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
}
.bbb-board .bbb-flag { background: var(--bbb-yellow); color: var(--bbb-ink); }
.bbb-board .bbb-mark {
	background: transparent;
	border: 1px solid var(--bbb-rule);
	color: var(--bbb-ink-soft);
	font-weight: 600;
}
.bbb-board .bbb-mark--uk { border-color: var(--bbb-good); color: var(--bbb-good); }
.bbb-board .bbb-mark--away { border-color: #E3BCB1; color: var(--bbb-bad); }
.bbb-board .bbb-score__who .bbb-flag,
.bbb-board .bbb-score__who .bbb-mark {
	padding: 0.08rem 0.48rem 0.1rem;
	font-size: 0.7rem;
	line-height: 1.4;
	white-space: normal;
}

/* One cell for each criterion: the term as the operator publishes it, then the mark as pips and as a
   figure. The pips are a second reading of the figure, never the only one. */
.bbb-board .bbb-score .bbb-score__term { width: 11%; min-width: 7.5rem; }
.bbb-board .bbb-score .bbb-score__term--playthrough { min-width: 9.5rem; --bbb-pip-ink: var(--bbb-blue); }
.bbb-board .bbb-score .bbb-score__term--win-cap { --bbb-pip-ink: var(--bbb-green); }
.bbb-board .bbb-score .bbb-score__term--bet-cap { min-width: 7rem; --bbb-pip-ink: var(--bbb-yellow); }
.bbb-board .bbb-score .bbb-score__term--how-long { --bbb-pip-ink: var(--bbb-hall-2); }
.bbb-board .bbb-score .bbb-score__term--paperwork { min-width: 8.5rem; --bbb-pip-ink: var(--bbb-blue); }
.bbb-board .bbb-term {
	display: block;
	margin-bottom: 0.45rem;
	font-weight: 600;
	color: var(--bbb-ink);
	overflow-wrap: anywhere;   /* a licence reference is one long token */
}
.bbb-board .bbb-score__term[data-mark="0"] .bbb-term { font-weight: 400; color: var(--bbb-ink-soft); }
.bbb-board .bbb-pip {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.bbb-board .bbb-pip__dots {
	display: inline-flex;
	gap: 0.2rem;
}
.bbb-board .bbb-pip__dots i {
	display: block;
	width: 0.64rem;
	height: 0.64rem;
	border-radius: 50%;
}
.bbb-board .bbb-pip--on {
	background: var(--bbb-pip-ink, var(--bbb-hall-2));
	box-shadow: inset 0 0 0 1px rgba(30, 26, 60, 0.55);
}
.bbb-board .bbb-pip--off {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--bbb-ink-soft);
}
.bbb-board .bbb-pip__n {
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 0.95rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--bbb-hall);
}

/* The total: the figure the board is ordered on, and the strongest thing in the row */
.bbb-board .bbb-score .bbb-score__sum {
	width: 5.75rem;
	min-width: 5.75rem;
	text-align: center;
	vertical-align: middle;
}
.bbb-board .bbb-score tbody tr > .bbb-score__sum {
	background: #FFF6DE;
	border-left: 1px solid var(--bbb-rule);
	border-right: 1px solid var(--bbb-rule);
}
.bbb-board .bbb-score thead .bbb-score__sum { text-align: center; }
.bbb-board .bbb-sum {
	display: block;
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 2.05rem;
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--bbb-hall);
}
.bbb-board .bbb-sum__of {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bbb-ink-soft);
}

.bbb-board .bbb-score .bbb-score__do {
	width: 9.75rem;
	min-width: 9.75rem;
	vertical-align: middle;
}
.bbb-board .bbb-score .bbb-score__do a.bbb-go {
	width: 100%;
	letter-spacing: 0.04em;
	white-space: normal;
	text-align: center;
}

/* 4. ----------------------------------------- the button and the small print --- */
.bbb-board a.bbb-go,
.bbb-board a.bbb-go:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 3rem;
	padding: 0.7rem 1.15rem;
	border-radius: 999px;
	background: var(--bbb-cta);
	color: #fff;
	font-family: var(--bbb-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.bbb-board a.bbb-go:hover,
.bbb-board a.bbb-go:focus-visible {
	background: var(--bbb-cta-over);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.bbb-board a.bbb-go:focus-visible { outline: 3px solid var(--bbb-blue); outline-offset: 3px; }
.bbb-board a.bbb-go--tight,
.bbb-board a.bbb-go--tight:visited {
	min-height: 2.4rem;
	padding: 0.42rem 0.9rem;
	font-size: 0.8rem;
	white-space: nowrap;
}
.bbb-board a.bbb-go--empty,
.bbb-board a.bbb-go--empty:hover {
	background: transparent;
	color: var(--bbb-bad);
	border: 2px dashed var(--bbb-cta);
	letter-spacing: 0.01em;
	text-transform: none;
}
.bbb-board .bbb-age,
.bbb-board .bbb-only {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
	text-align: center;
	color: var(--bbb-ink-soft);
}
.bbb-board .bbb-age--score,
.bbb-board .bbb-age--grid { margin-top: 0.55rem; text-align: left; }

/* The footnote the page can anchor to: how the score is worked out */
.bbb-board .bbb-scoring {
	margin: 1.1rem 0 0;
	padding: 0.85rem 1.05rem;
	background: var(--bbb-page-2);
	border: 1px solid var(--bbb-rule);
	border-left: 5px solid var(--bbb-hall);
	border-radius: 0 var(--bbb-round) var(--bbb-round) 0;
	font-size: 0.87rem;
	line-height: 1.55;
	color: var(--bbb-ink);
	scroll-margin-top: 1.5rem;
}
.bbb-board .bbb-scoring strong { color: var(--bbb-hall); }
.bbb-board .bbb-scoring:target { border-left-color: var(--bbb-yellow); }

/* 5. --------------------------------------------- the fold-outs under the card ---
   One <details> for each row, in the order of the table: our view, the offer stage by stage, the
   terms, the licence, what is in its favour and what to watch. No script opens them. */
.bbb-board .bbb-notes__title {
	margin: 1.4rem 0 0.65rem;
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--bbb-ink);
}
.bbb-board .bbb-notes {
	display: grid;
	gap: 0.6rem;
}
.bbb-board .bbb-fold {
	margin: 0;
	background: var(--bbb-card);
	border: 1px solid var(--bbb-rule);
	border-radius: var(--bbb-round);
}
.bbb-board .bbb-fold[open] { border-color: var(--bbb-hall); }
.bbb-board .bbb-fold > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0.95rem 0.75rem;
	list-style: none;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--bbb-hall-2);
}
.bbb-board .bbb-fold > summary::-webkit-details-marker { display: none; }
.bbb-board .bbb-fold > summary::marker { content: ""; }
.bbb-board .bbb-fold > summary::before {
	content: "+";
	order: -1;
	display: grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	flex: none;
	border-radius: 50%;
	background: var(--bbb-page-2);
	border: 1px solid var(--bbb-rule);
	color: var(--bbb-hall);
	font: 900 1rem/1 var(--bbb-display);
}
.bbb-board .bbb-fold[open] > summary::before { content: "\2212"; background: var(--bbb-yellow); border-color: var(--bbb-yellow); }
.bbb-board .bbb-fold > summary:hover { color: var(--bbb-hall); }
.bbb-board .bbb-fold > summary:hover .bbb-fold__name { text-decoration: underline; text-underline-offset: 0.18em; }
.bbb-board .bbb-fold > summary:focus-visible { outline: 3px solid var(--bbb-blue); outline-offset: 2px; border-radius: 6px; }
.bbb-board .bbb-fold__no {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--bbb-hall);
	color: #fff;
	font: 900 0.8rem/1 var(--bbb-display);
	font-variant-numeric: tabular-nums;
}
.bbb-board .bbb-fold__name {
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 1.05rem;
	color: var(--bbb-ink);
}
.bbb-board .bbb-fold__rest { font-size: 0.9rem; font-weight: 600; color: var(--bbb-ink-soft); }
.bbb-board .bbb-fold__body {
	padding: 0 0.95rem 1.15rem;
	font-size: 0.97rem;
	line-height: 1.6;
}
.bbb-board .bbb-view {
	margin: 0 0 1.05rem;
	padding: 0.85rem 1.05rem;
	background: var(--bbb-page-2);
	border-left: 4px solid var(--bbb-yellow);
	border-radius: 0 var(--bbb-round) var(--bbb-round) 0;
	color: var(--bbb-ink);
}
.bbb-board .bbb-fold__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1rem 2rem;
}
.bbb-board .bbb-fold h4 {
	margin: 0 0 0.45rem;
	padding: 0;
	font-family: var(--bbb-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--bbb-ink);
}
.bbb-board .bbb-fold h4:not(:first-child) { margin-top: 1rem; }
.bbb-board .bbb-fold .bbb-line {
	margin: 0 0 0.55rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--bbb-ink);
}
.bbb-board .bbb-fold .bbb-line .bbb-mark { margin-left: 0.25rem; padding: 0.02rem 0.45rem; font-size: 0.72rem; }
.bbb-board .bbb-steps,
.bbb-board .bbb-plus,
.bbb-board .bbb-minus {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bbb-board .bbb-steps li,
.bbb-board .bbb-plus li,
.bbb-board .bbb-minus li {
	position: relative;
	margin: 0 0 0.35rem;
	padding-left: 1.7rem;
}
.bbb-board .bbb-steps { counter-reset: bbb-step; }
.bbb-board .bbb-steps li::before {
	counter-increment: bbb-step;
	content: counter(bbb-step);
	position: absolute;
	left: 0;
	top: 0.22rem;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--bbb-hall);
	color: #fff;
	font: 700 0.72rem/1 var(--bbb-text);
	font-variant-numeric: tabular-nums;
}
.bbb-board .bbb-plus li::before,
.bbb-board .bbb-minus li::before {
	position: absolute;
	top: 0.18rem;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	font: 700 0.78rem/1 var(--bbb-text);
}
.bbb-board .bbb-plus li::before { content: "\2713"; left: 0; background: #DCEFE4; color: var(--bbb-good); }
.bbb-board .bbb-minus li::before { content: "!"; left: 0; background: #FBE7EB; color: var(--bbb-bad); }
.bbb-board .bbb-small { margin: 0 0 0.7rem; }
.bbb-board .bbb-small > div {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: 0.8rem;
	padding: 0.38rem 0;
	border-bottom: 1px solid var(--bbb-rule);
}
.bbb-board .bbb-small dt { margin: 0; font-weight: 600; color: var(--bbb-ink-soft); }
.bbb-board .bbb-small dd { margin: 0; }
.bbb-board .bbb-smallprint {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--bbb-ink-soft);
}
.bbb-board .bbb-lic { margin: 0; }
.bbb-board .bbb-lic--away { color: #5F2112; }

/* 6. ------------------------------- show all, and the notices only editors see ---
   The button toggles one class on the wrapper, and the rows it holds back take their fold-outs with
   them, so the card and the notes under it always carry the same entries. */
.bbb-board .bbb-stack--folded:not(.bbb-stack--all) .bbb-held { display: none; }
.bbb-board .bbb-rest { margin: 1rem 0 0; text-align: center; }
.bbb-board .bbb-rest__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.55rem 1.3rem;
	border: 1px solid var(--bbb-hall);
	border-radius: 999px;
	background: var(--bbb-card);
	color: var(--bbb-hall);
	font: 700 0.95rem/1.2 var(--bbb-text);
	cursor: pointer;
}
.bbb-board .bbb-rest__btn:hover,
.bbb-board .bbb-rest__btn:focus { background: var(--bbb-page-2); color: var(--bbb-hall); }
.bbb-board .bbb-rest__btn:focus-visible { outline: 3px solid var(--bbb-blue); outline-offset: 2px; }

/* Editors only: nothing is on the board */
.bbb-blank {
	padding: 0.9rem 1.1rem;
	border: 2px dashed #C4396E;
	border-radius: 10px;
	background: #FFFFFF;
	color: #1E1A3C;
}

/* 7. ----------------------------------------------------------- the grid layout --- */
.bbb-board .bbb-slide {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--bbb-card);
	border: 1px solid var(--bbb-rule);
	border-radius: var(--bbb-round);
}
.bbb-board .bbb-slide:focus-visible { outline: 3px solid var(--bbb-blue); outline-offset: 2px; }
.bbb-board .bbb-grid {
	width: 100%;
	min-width: 72rem;
	margin: 0;
	border-collapse: collapse;
	border: 0;
	font-size: 0.9rem;
	line-height: 1.45;
}
/* Column widths, so the offer gets room and no term is squeezed into one word a line */
.bbb-board .bbb-grid .bbb-grid__offer { width: 21%; min-width: 15rem; }
.bbb-board .bbb-grid .bbb-grid__who { width: 10%; min-width: 7rem; }
.bbb-board .bbb-grid .bbb-grid__term { width: 11%; min-width: 7.5rem; }
.bbb-board .bbb-grid th,
.bbb-board .bbb-grid td {
	padding: 0.7rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--bbb-rule);
	text-align: left;
	vertical-align: top;
}
.bbb-board .bbb-grid thead th {
	background: var(--bbb-hall);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.bbb-board .bbb-grid tbody tr:nth-child(even) { background: var(--bbb-page-2); }
.bbb-board .bbb-grid tbody tr:last-child > * { border-bottom: 0; }
.bbb-board .bbb-grid tbody th {
	font-family: var(--bbb-display);
	font-weight: 900;
	font-size: 1rem;
}
.bbb-board .bbb-grid tbody th a { color: var(--bbb-ink); text-decoration: none; }
.bbb-board .bbb-grid tbody th a:hover { color: var(--bbb-hall-2); text-decoration: underline; }
.bbb-board .bbb-grid .bbb-digit {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.bbb-board .bbb-grid .bbb-grid__first td:first-child {
	box-shadow: inset 4px 0 0 var(--bbb-cta);
	font-weight: 700;
}
.bbb-board .bbb-grid .bbb-away { color: var(--bbb-bad); }
.bbb-board .bbb-grid .bbb-mark { margin-left: 0.25rem; padding: 0.02rem 0.45rem; font-size: 0.72rem; }

/* 8. ------------------------------------------------------- narrower screens --- */

/* 1024 and below: the card scrolls sideways inside its own region, the place and the site stay where
   they are so every row keeps its name, and the page itself never scrolls sideways. */
@media (max-width: 1024px) {
	.bbb-board--scorecard { --bbb-site-w: 12rem; }
	.bbb-board .bbb-swipe {
		display: block;
		margin: 0 0 0.45rem;
		font-size: 0.82rem;
		line-height: 1.45;
		color: var(--bbb-ink-soft);
	}
	.bbb-board .bbb-swipe::before {
		content: "\2194";
		margin-right: 0.35rem;
		font-weight: 700;
		color: var(--bbb-hall);
	}
	.bbb-board .bbb-score { font-size: 0.89rem; }
	.bbb-board .bbb-score th,
	.bbb-board .bbb-score td { padding: 0.6rem; }
	.bbb-board .bbb-score .bbb-score__site { box-shadow: 7px 0 11px -8px rgba(35, 26, 82, 0.5); }
	.bbb-board .bbb-brick { width: 2.7rem; height: 2.1rem; }
	.bbb-board .bbb-sum { font-size: 1.85rem; }
}

@media (max-width: 760px) {
	.bbb-board .bbb-fold__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.bbb-board--scorecard { --bbb-pos-w: 2.2rem; --bbb-site-w: 9.75rem; }
	.bbb-board .bbb-score { font-size: 0.86rem; min-width: 52rem; }
	.bbb-board .bbb-score th,
	.bbb-board .bbb-score td { padding: 0.55rem 0.5rem; }
	.bbb-board .bbb-score .bbb-score__pos { padding-left: 0.25rem; padding-right: 0.2rem; }
	.bbb-board .bbb-score tbody .bbb-score__pos { font-size: 1.05rem; }
	.bbb-board .bbb-score .bbb-score__term { min-width: 6.75rem; }
	.bbb-board .bbb-score .bbb-score__term--playthrough { min-width: 8rem; }
	.bbb-board .bbb-score .bbb-score__do { width: 8.5rem; min-width: 8.5rem; }
	.bbb-board .bbb-site { gap: 0.4rem; }
	.bbb-board .bbb-brick { width: 2.1rem; height: 1.75rem; padding: 0.12rem; }
	.bbb-board .bbb-score__name { font-size: 0.93rem; }
	.bbb-board .bbb-score__who .bbb-flag,
	.bbb-board .bbb-score__who .bbb-mark { font-size: 0.66rem; padding: 0.06rem 0.4rem 0.08rem; }
	.bbb-board .bbb-sum { font-size: 1.6rem; }
	.bbb-board .bbb-fold__rest { width: 100%; }
	.bbb-board .bbb-small > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

@media (max-width: 380px) {
	.bbb-board--scorecard { --bbb-site-w: 9rem; }
	.bbb-board .bbb-score__name { font-size: 0.89rem; }
	.bbb-board .bbb-fold__name { font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bbb-board a.bbb-go { transition: none; }
	.bbb-board a.bbb-go:hover { transform: none; }
}

@media (forced-colors: active) {
	.bbb-board a.bbb-go { border: 2px solid ButtonText; }
	.bbb-board .bbb-pip--on { background: CanvasText; }
	.bbb-board .bbb-pip--off { background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
	.bbb-board .bbb-score .bbb-score__site { border-right: 1px solid CanvasText; }
}

@media print {
	.bbb-board .bbb-court { overflow: visible; border: 0; }
	.bbb-board .bbb-score { min-width: 0; font-size: 0.74rem; }
	.bbb-board .bbb-score .bbb-score__pos,
	.bbb-board .bbb-score .bbb-score__site { position: static; }
	.bbb-board .bbb-rest,
	.bbb-board .bbb-score__do { display: none; }
	.bbb-board .bbb-fold { break-inside: avoid; }
	.bbb-board .bbb-stack--folded tr.bbb-held { display: table-row; }
	.bbb-board .bbb-stack--folded details.bbb-held { display: block; }
}