/* ==========================================================================
 * Full House Bingo Guides: the guide pages
 *
 * An evening in a bingo hall: deep indigo furniture, a cool near-white page, the colours of the balls for
 * accents, and the 9x3 ticket grid as the motif that keeps coming back. Everything here hangs off .fh-page,
 * so nothing reaches a page this plugin did not write. The charts carry their own validated palette inside
 * the picture, drawn on white, so the figure cards are white too and stay out of their way.
 *
 * 1. tokens and the hall          7. tables
 * 2. the trail and the head       8. calls, notices and worked sums
 * 3. the offers board             9. charts
 * 4. body sections and prose     10. the calculators
 * 5. the tote and the call sheet  11. questions, onward cards, the care line
 * 6. quick answers               12. narrow screens and paper
 * ======================================================================= */

/* 1. ----------------------------------------------------------- tokens --- */

.fh-page {
	--fh-page: #F6F4FB;
	--fh-card: #FFFFFF;
	--fh-page-2: #EDEAF7;
	--fh-hall: #231A52;
	--fh-hall-2: #3B2F80;
	--fh-ink: #1E1A3C;
	--fh-ink-2: #585073;
	--fh-rule: #DCD7EC;
	--fh-ball-red: #D8334A;
	--fh-ball-yellow: #F2B705;
	--fh-ball-green: #197F49;
	--fh-ball-blue: #2E6FD9;
	--fh-cta: #C4396E;
	--fh-cta-hover: #A32B59;
	--fh-good: #0F7A50;
	--fh-bad: #A8341A;
	--fh-radius: 10px;
	--fh-pill: 999px;

	/* tints of the two verdict colours, light enough to keep their own text above 4.5:1 */
	--fh-win-wash: #E8F4EE;
	--fh-miss-wash: #FBECE6;

	--fh-head-font: "Chivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--fh-body-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fh-hall-width: 56rem;   /* the column a page with no call sheet rail keeps to */
	--fh-rail: 21rem;         /* the call sheet rail beside the text on wide screens */
	--fh-rail-gap: 3.4rem;    /* space between the reading column and that rail */
	--fh-gap: 1.6rem;

	background: var(--fh-page);
	color: var(--fh-ink);
	font-family: var(--fh-body-font);
	font-size: 17px;
	line-height: 1.62;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.fh-page *,
.fh-page *::before,
.fh-page *::after {
	box-sizing: border-box;
}

/* One width for everything. The crumbs, the heading, the board, the paragraphs, the tables and
   the charts share the hall's left and right edge, so no block is a step wider than the one
   above it. */
.fh-hall {
	max-width: var(--fh-hall-width);
	margin-inline: auto;
	padding-block: clamp(1rem, 3vw, 2.2rem);
}

/* Wide screens: the guide takes the theme's full column and the call sheet moves into a rail
   that stays with the reader, so the text reaches the same left edge as the site logo and the
   space on the right carries the contents instead of standing empty. */
@media screen and (min-width: 1100px) {
	.fh-hall--rail {
		display: grid;
		grid-auto-flow: row dense;
		grid-template-columns: minmax(0, 1fr) var(--fh-rail);
		column-gap: var(--fh-rail-gap);
		align-items: start;
		max-width: none;
	}

	.fh-hall--rail > .fh-crumbs,
	.fh-hall--rail > .fh-head,
	.fh-hall--rail > .fh-board {
		grid-column: 1 / -1;
	}

	.fh-hall--rail > .fh-main {
		grid-column: 1;
		min-width: 0;
	}

	/* The standfirst stands above the board, where the call sheet has not started yet, so a reading
	   column here left a strip of nothing beside it and finished on a line nothing else used. It
	   takes the hall, like the crumbs, the heading and the board around it. */

	/* One width inside the reading column: the sentences, the tables, the drawings and the closing
	   row of stubs all start and finish on the same two lines, so nothing is a step wider than the
	   paragraph above it. A table too wide for the column scrolls inside its own wrapper, so the
	   page itself never moves sideways. */

	.fh-hall--rail > .fh-rail {
		grid-column: 2;
		align-self: start;
		position: sticky;
		top: 1.6rem;
		max-height: calc(100vh - 3.2rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.fh-rail .fh-callsheet {
		margin-block: 0;
	}
}

/* --- headings ------------------------------------------------------------ */

.fh-page h1,
.fh-page h2,
.fh-page h3 {
	font-family: var(--fh-head-font);
	color: var(--fh-ink);
	line-height: 1.17;
	letter-spacing: -0.012em;
	text-wrap: balance;
	overflow-wrap: break-word;
	margin: 0;
}

.fh-page h1 {
	font-size: 40px;
	font-weight: 900;
	margin-block: 0.1em 0.5em;
}

.fh-page h2 {
	font-size: 29px;
	font-weight: 700;
	margin-block: 0 0.7em;
	padding-top: 0.1em;
}

/* Every called section carries its ball, and these are the same numbers the call sheet in the rail hands
 * out: ball 7 in the margin is call 7 on the sheet. The heading is laid out as two tracks rather than given
 * a hanging indent, so a long one wraps beside its ball instead of under it. The closing "next on your card"
 * heading is the one the call sheet never lists, and it is left without a ball. */
.fh-page {
	counter-reset: fh-ball;
}

.fh-body > h2 {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 0.52em;
}

.fh-body > h2::before {
	counter-increment: fh-ball;
	content: counter(fh-ball);
	display: grid;
	place-items: center;
	width: 2.3em;
	height: 2.3em;
	border-radius: 50%;
	background: var(--fh-hall);
	box-shadow: inset 0 0 0 0.16em rgba(255, 255, 255, 0.26);
	color: var(--fh-card);
	font-size: 0.5em;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	line-height: 1;
	margin-top: 0.3em;
}

.fh-body:has(> .fh-onward) > h2 {
	display: block;
}

.fh-body:has(> .fh-onward) > h2::before {
	content: none;
}

/* the call sheet and the headings both jump here, so a target is not left flush against the window */
.fh-page h2[id],
.fh-page h3[id] {
	scroll-margin-top: 1.4rem;
}

.fh-page h3 {
	font-size: 21px;
	font-weight: 700;
	margin-block: 1.8em 0.5em;
}

/* --- links, inline bits -------------------------------------------------- */

.fh-page a {
	color: var(--fh-hall-2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.fh-page a:hover,
.fh-page a:focus-visible {
	color: var(--fh-cta-hover);
	text-decoration-thickness: 2px;
}

.fh-page a:focus-visible,
.fh-page summary:focus-visible,
.fh-page input:focus-visible,
.fh-page select:focus-visible {
	outline: 3px solid var(--fh-ball-yellow);
	outline-offset: 2px;
	border-radius: 2px;
}

.fh-page strong,
.fh-page b {
	font-weight: 700;
}

.fh-page code {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--fh-page-2);
	border: 1px solid var(--fh-rule);
	border-radius: 4px;
	padding: 0.08em 0.36em;
	overflow-wrap: break-word;
}

.fh-page sup {
	font-size: 0.72em;
	line-height: 0;
}

/* 2. ------------------------------------------------- trail and the head --- */

.fh-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5em;
	font-size: 0.82rem;
	color: var(--fh-ink-2);
	margin-bottom: 1.4rem;
}

/* A theme that underlines every link in the content does so at two classes and a type, so the rules here
 * that quieten or drop an underline carry an [href] to sit one step above it without reaching for
 * !important. The plain prose links are left to the theme and this file agreeing on an underline. */
.fh-page .fh-crumbs a[href] {
	color: var(--fh-ink-2);
	text-decoration-color: var(--fh-rule);
}

.fh-page .fh-crumbs a[href]:hover,
.fh-page .fh-crumbs a[href]:focus-visible {
	color: var(--fh-cta-hover);
	text-decoration-color: currentColor;
}

.fh-crumbs span[aria-hidden] {
	color: var(--fh-ball-yellow);
	font-weight: 700;
}

.fh-crumbs [aria-current="page"] {
	color: var(--fh-ink);
	font-weight: 600;
}

.fh-head {
	position: relative;
	padding-bottom: 1.6rem;
	margin-bottom: 1.8rem;
}

/* the hairline under the head is a row of small balls */
.fh-head::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 7px;
	background-image: radial-gradient(circle at 3.5px 3.5px, var(--fh-rule) 0 3.4px, transparent 3.5px);
	background-size: 16px 7px;
	background-repeat: repeat-x;
}

/* the "last called" date, as a mustard ball pill */
.fh-called {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.2em 0.9em 0.2em 0.55em;
	border-radius: var(--fh-pill);
	background: var(--fh-ball-yellow);
	color: var(--fh-ink);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.fh-called::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	border-radius: 50%;
	background: var(--fh-card);
	box-shadow: inset 0 0 0 2px var(--fh-ink);
	flex: none;
}

.fh-intro {
	font-size: 1.13rem;
	line-height: 1.58;
	color: var(--fh-ink);
	margin-block: 0 1.2rem;
}

/* three short facts, each a daubed square off a ticket */
.fh-marks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fh-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0.3em 0.75em;
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: 4px;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--fh-ink);
}

.fh-mark::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	border-radius: 2px;
	background: var(--fh-hall-2);
	box-shadow: 0 0 0 2px var(--fh-page-2);
	flex: none;
}

.fh-mark:nth-child(2)::before {
	background: var(--fh-ball-green);
}

.fh-mark--age {
	background: var(--fh-hall);
	border-color: var(--fh-hall);
	color: var(--fh-card);
	border-radius: var(--fh-pill);
	font-family: var(--fh-head-font);
	font-weight: 900;
	letter-spacing: 0.04em;
}

.fh-mark--age::before,
.fh-mark.fh-mark--age:nth-child(2)::before {
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--fh-ball-yellow);
	box-shadow: none;
}

/* 3. --------------------------------------------------- the offers board --- */

.fh-hall > .fh-board {
	max-width: none;
	margin-block: 0 2.4rem;
	overflow-wrap: break-word;
}

/* 4. ------------------------------------------ body sections and prose --- */

.fh-body {
	margin-block: 0 2.6rem;
}

.fh-body > * + * {
	margin-top: 1.05em;
}

.fh-page .fh-body p,
.fh-page .fh-body li {
	overflow-wrap: break-word;
}

.fh-body p {
	margin: 0;
}

/* Clearing the theme's paragraph margins just above also clears the one the sibling rule hands out, because
   a paragraph is named more precisely there than "any child after any child" is. So the prose is given its
   rhythm back here, at a weight that holds, and a paragraph that opens a section still sits up against its
   heading. Where the block above already leaves more room than this, that larger gap is the one that shows. */
.fh-page .fh-body > * + p {
	margin-top: 1.05em;
}

.fh-page .fh-body > h2 + p,
.fh-page .fh-body > h3 + p {
	margin-top: 0;
}

.fh-body > ul,
.fh-body > ol {
	margin: 1.05em 0 0;
	padding-left: 1.3em;
}

.fh-body > ul > li + li,
.fh-body > ol > li + li {
	margin-top: 0.45em;
}

.fh-body > h2 + *,
.fh-body > h3 + * {
	margin-top: 0;
}

/* the opening section runs straight on from the board */
.fh-first {
	margin-top: 0;
}

/* 5. --------------------------------------- the tote and the call sheet --- */

/* Numbers on the board, as the hall's scoreboard: a boxed card with its heading filled in indigo and the
 * figures standing under it, never a strip of text between two rules. */
.fh-tote {
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: var(--fh-radius);
	overflow: hidden;
	margin-block: 1.6rem;
}

.fh-page .fh-tote__title {
	margin: 0;
	padding: 0.6em 1em;
	background: var(--fh-hall);
	color: var(--fh-card);
	font-family: var(--fh-head-font);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* the same mustard daub the call sheet's head carries */
.fh-tote__title::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.6em;
	border-radius: 50%;
	background: var(--fh-ball-yellow);
	vertical-align: 0.04em;
}

.fh-tote ul {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fh-tote li {
	margin: 0;
	padding: 0.85em 1.1em;
	font-size: 0.97rem;
	color: var(--fh-ink-2);
}

.fh-tote li + li {
	border-top: 1px dashed var(--fh-rule);
}

.fh-tote li strong {
	display: block;
	font-family: var(--fh-head-font);
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fh-hall);
	font-variant-numeric: tabular-nums;
}

/* The call sheet the hall works down: a board under an indigo head, the calls laid out on the squares of a
 * ticket, each one on its own ball. The balls are the ones the headings carry, so a reader who has found
 * ball 7 beside a heading can look up call 7 here and the other way about. It keeps the right-hand rail
 * from 1100px up and falls into the flow under the heading below that. */
.fh-callsheet {
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: var(--fh-radius);
	overflow: hidden;
	margin-block: 1.6rem;
}

/* the theme gives every paragraph in the content a bottom margin, and this one is a filled bar that has to
   sit flush on the calls under it, so it is claimed back at a weight that beats it */
.fh-page .fh-callsheet__title {
	margin: 0;
	padding: 0.62em 1em;
	background: var(--fh-hall);
	color: var(--fh-card);
	font-family: var(--fh-head-font);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* the mustard daub the hall marks a called number with */
.fh-callsheet__title::before {
	content: "";
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	margin-right: 0.6em;
	border-radius: 50%;
	background: var(--fh-ball-yellow);
	vertical-align: 0.04em;
}

.fh-callsheet ol {
	counter-reset: fh-call;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1px;
	background: var(--fh-rule);
	border-top: 1px solid var(--fh-rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fh-callsheet li {
	counter-increment: fh-call;
	display: flex;
	align-items: start;
	gap: 0.62em;
	margin: 0;
	padding: 0.5em 0.8em 0.55em;
	background: var(--fh-card);
	font-size: 0.92rem;
	line-height: 1.42;
}

.fh-callsheet li::before {
	content: counter(fh-call);
	flex: none;
	display: grid;
	place-items: center;
	width: 1.78em;
	height: 1.78em;
	border-radius: 50%;
	background: var(--fh-hall);
	box-shadow: inset 0 0 0 0.13em rgba(255, 255, 255, 0.26);
	color: var(--fh-card);
	font-family: var(--fh-head-font);
	font-size: 0.76rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin-top: 0.22em;
}

/* the ball the reader is reaching for is the one being called */
.fh-callsheet li:hover::before,
.fh-callsheet li:focus-within::before {
	background: var(--fh-ball-yellow);
	color: var(--fh-ink);
	box-shadow: none;
}

.fh-page .fh-callsheet a[href] {
	color: var(--fh-ink);
	text-decoration-color: var(--fh-rule);
}

.fh-page .fh-callsheet a[href]:hover,
.fh-page .fh-callsheet a[href]:focus-visible {
	color: var(--fh-cta-hover);
	text-decoration-color: currentColor;
}

/* 6. --------------------------------------------------- quick answers --- */

/* the short version: each point marked with a daubed ball */
.fh-daubs {
	list-style: none;
	margin: 1.05em 0 0;
	padding: 0;
}

.fh-daubs li {
	position: relative;
	margin: 0;
	padding-left: 2.1rem;
}

.fh-daubs li + li {
	margin-top: 0.7em;
}

.fh-daubs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--fh-hall-2);
	box-shadow: inset 0 0 0 3px var(--fh-card), 0 0 0 1px var(--fh-rule);
}

.fh-daubs li:nth-child(4n + 2)::before { background: var(--fh-ball-red); }
.fh-daubs li:nth-child(4n + 3)::before { background: var(--fh-ball-green); }
.fh-daubs li:nth-child(4n + 4)::before { background: var(--fh-ball-blue); }

.fh-daubs li strong {
	color: var(--fh-hall);
}

/* 7. --------------------------------------------------------- tables --- */

.fh-wrap {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: var(--fh-radius);
	margin-block: 1.5rem;
	/* the page files leave a newline after </table>; without this it draws an empty line under the table */
	font-size: 0;
	line-height: 0;
}

.fh-table {
	width: 100%;
	min-width: 32rem;
	/* a theme's own bottom margin on table cannot collapse out of a scroll wrapper, so it is cleared here */
	margin: 0;
	border-collapse: collapse;
	font-size: 0.94rem;
	line-height: 1.5;
	background: var(--fh-card);
}

.fh-table caption {
	caption-side: top;
	padding: 0.7em 0.9em;
	color: var(--fh-ink-2);
	font-size: 0.86rem;
	text-align: left;
}

.fh-table thead th {
	background: var(--fh-hall);
	color: var(--fh-card);
	font-family: var(--fh-head-font);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: left;
	vertical-align: bottom;
	padding: 0.65em 0.85em;
	border: 0;
}

.fh-table tbody th {
	text-align: left;
	font-weight: 700;
	color: var(--fh-ink);
}

.fh-table th,
.fh-table td {
	padding: 0.6em 0.85em;
	border-top: 1px solid var(--fh-rule);
	vertical-align: top;
}

.fh-table thead th:first-child,
.fh-table tbody tr > *:first-child {
	padding-left: 1.05em;
}

.fh-table thead th:last-child,
.fh-table tbody tr > *:last-child {
	padding-right: 1.05em;
}

.fh-table tbody tr:nth-child(odd) {
	background: var(--fh-page-2);
}

.fh-table tbody tr:first-child > * {
	border-top: 0;
}

/* a cell holding a figure: right-aligned, lined up digit under digit, kept on one line */
.fh-page .fh-fig {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.fh-table thead th.fh-fig {
	text-align: right;
}

/* a good outcome and a bad one, washed and edged in their own colour */
.fh-page .fh-win,
.fh-page .fh-miss {
	box-shadow: inset 3px 0 0 currentColor;
}

.fh-page .fh-win {
	background: var(--fh-win-wash);
	color: var(--fh-good);
}

.fh-page .fh-miss {
	background: var(--fh-miss-wash);
	color: var(--fh-bad);
}

.fh-page .fh-win strong,
.fh-page .fh-miss strong {
	color: inherit;
}

.fh-table tbody tr:nth-child(odd) .fh-win,
.fh-table tbody tr:nth-child(odd) .fh-miss {
	background-blend-mode: normal;
}

/* 8. -------------------------------- calls, notices and worked sums --- */

/* a walkthrough, numbered the way a caller works down the board */
.fh-calls {
	counter-reset: fh-step;
	list-style: none;
	margin: 1.05em 0 0;
	padding: 0;
}

.fh-calls li {
	counter-increment: fh-step;
	position: relative;
	margin: 0;
	padding: 0 0 0 3.1rem;
	min-height: 2.2rem;
}

.fh-calls li + li {
	margin-top: 0.9em;
}

.fh-calls li::before {
	content: counter(fh-step);
	position: absolute;
	left: 0;
	top: 0.05em;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--fh-hall);
	color: var(--fh-card);
	font-family: var(--fh-head-font);
	font-size: 0.95rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 3px var(--fh-page), 0 0 0 4px var(--fh-rule);
}

.fh-calls li:first-child::before {
	background: var(--fh-cta);
}

.fh-calls li strong {
	color: var(--fh-hall);
}

/* a notice pinned up on the hall wall */
.fh-note {
	position: relative;
	background: var(--fh-page-2);
	border: 1px solid var(--fh-rule);
	border-left: 4px solid var(--fh-ball-yellow);
	border-radius: 0 var(--fh-radius) var(--fh-radius) 0;
	padding: 1rem 1.15rem 1rem 1.3rem;
	margin-block: 1.5rem;
}

.fh-note::before {
	content: "";
	position: absolute;
	top: 0.85rem;
	right: 0.95rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--fh-ball-red);
	box-shadow: 0 0 0 3px var(--fh-card);
}

.fh-note p {
	margin: 0;
	padding-right: 1.2rem;
	font-size: 0.97rem;
	color: var(--fh-ink);
}

.fh-note p + p {
	margin-top: 0.7em;
}

/* a sum written out so it can be done again on paper */
.fh-page p.fh-maths {
	margin-block: 1.4rem;
	padding: 0.85em 1em;
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-top: 3px double var(--fh-rule);
	border-bottom: 3px double var(--fh-rule);
	border-radius: 4px;
	color: var(--fh-hall);
	font-family: var(--fh-head-font);
	font-size: 1.02rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	overflow-x: auto;
}

/* 9. --------------------------------------------------------- charts --- */

/* The drawing is already on white with its own checked palette, so the card around it stays white and
 * nothing here tints or frames the picture itself. The hall's treatment goes on the foot instead: the
 * caption sits below the drawing it is describing, on the lilac surface, cut off by a dotted indigo rule
 * of the same kind the drawings carry across their own heads, and opening with a mustard daub. A drawing
 * marked on top and read underneath, which is the way round the rest of this hall works. */
.fh-chart {
	margin: 1.6rem 0;
	padding: 0;
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: var(--fh-radius);
	overflow: hidden;
}

.fh-chart picture,
.fh-chart img {
	display: block;
	width: 100%;
	height: auto;
}

.fh-chart figcaption {
	padding: 0.8em 1.1em 0.9em;
	border-top: 2px dotted var(--fh-hall-2);
	background: var(--fh-page-2);
	color: var(--fh-ink-2);
	font-size: 0.87rem;
	line-height: 1.5;
}

.fh-chart figcaption::before {
	content: "";
	display: inline-block;
	width: 0.54em;
	height: 0.54em;
	margin-right: 0.52em;
	border-radius: 50%;
	background: var(--fh-ball-yellow);
	vertical-align: 0.06em;
}

/* 10. -------------------------------------------------- calculators --- */

.fh-calc {
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: var(--fh-radius);
	overflow: hidden;
	margin-block: 1.7rem;
}

/* while the script has not run yet there is nothing to show */
.fh-calc:not([data-ready]) {
	display: none;
}

.fh-calc__board {
	padding: 0.8rem 1.1rem;
	background: var(--fh-hall);
	color: var(--fh-card);
}

.fh-calc__game {
	margin: 0;
	font-family: var(--fh-head-font);
	font-size: 1.02rem;
	font-weight: 900;
	letter-spacing: 0.01em;
}

.fh-calc__aside {
	margin: 0.15em 0 0;
	font-size: 0.82rem;
	color: #D4CFEA;
}

/* The slip: the terms of the offer, two or three to a row. The hairlines are drawn on the cells rather than
 * as grid gaps, so a row that does not fill up carries on in the same colour instead of leaving a hole. */
.fh-calc__slip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0;
	background: var(--fh-page-2);
}

.fh-calc__entry {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.7rem 0.9rem 0.8rem;
	background: var(--fh-page-2);
	box-shadow: inset -1px -1px 0 0 var(--fh-rule);
}

.fh-calc__term {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fh-ink);
}

.fh-calc__term small {
	display: block;
	font-weight: 400;
	font-size: 0.93em;
	color: var(--fh-ink-2);
}

.fh-calc__input {
	display: flex;
	align-items: stretch;
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: 6px;
	overflow: hidden;
}

.fh-calc__input:focus-within {
	border-color: var(--fh-hall-2);
	box-shadow: 0 0 0 2px rgba(59, 47, 128, 0.18);
}

.fh-calc__input input,
.fh-calc__input select {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0.4em 0.5em;
	background: var(--fh-card);
	border: 0;
	border-radius: 0;
	color: var(--fh-ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.fh-calc__input input:focus,
.fh-calc__input select:focus {
	outline: 0;
}

.fh-calc__input select {
	font-weight: 600;
	font-size: 0.92rem;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--fh-ink-2) 50%), linear-gradient(135deg, var(--fh-ink-2) 50%, transparent 50%);
	background-position: right 0.95em top 52%, right 0.6em top 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 1.8em;
}

.fh-calc__mark {
	flex: none;
	display: grid;
	place-items: center;
	padding-inline: 0.55em;
	background: var(--fh-page-2);
	color: var(--fh-ink-2);
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
}

.fh-calc__mark:empty {
	display: none;
}

.fh-calc__input--pick .fh-calc__mark {
	display: none;
}

/* the board: what it all comes to, called first, with the working under it */
.fh-calc__tally {
	padding: 1rem 1.1rem 1.1rem;
}

.fh-calc__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.6em;
	margin: 0 0 0.9rem;
	padding: 0.7em 0.95em;
	border-radius: 8px;
	background: var(--fh-page-2);
	border-left: 5px solid var(--fh-ink-2);
}

.fh-calc__total--up {
	background: var(--fh-win-wash);
	border-left-color: var(--fh-good);
}

.fh-calc__total--down {
	background: var(--fh-miss-wash);
	border-left-color: var(--fh-bad);
}

.fh-calc__total-term {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--fh-ink);
}

.fh-calc__total-fig {
	font-family: var(--fh-head-font);
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--fh-ink);
}

.fh-calc__total--up .fh-calc__total-fig {
	color: var(--fh-good);
}

.fh-calc__total--down .fh-calc__total-fig {
	color: var(--fh-bad);
}

.fh-calc__total-extra {
	flex: 1 0 100%;
	font-size: 0.82rem;
	color: var(--fh-ink-2);
}

.fh-calc__runs {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fh-rule);
}

.fh-calc__runs li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0 1em;
	margin: 0;
	padding: 0.45em 0;
	border-bottom: 1px dashed var(--fh-rule);
	font-size: 0.93rem;
	color: var(--fh-ink-2);
}

.fh-calc__runs li b {
	color: var(--fh-hall);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.fh-calc__small {
	margin: 0.9rem 0 0;
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--fh-ink-2);
}

/* 11. ------------------- questions, onward cards, the care line --- */

.fh-faq {
	border: 1px solid var(--fh-rule);
	border-radius: var(--fh-radius);
	background: var(--fh-card);
	overflow: hidden;
	margin-top: 1.05em;
}

.fh-qa {
	border-top: 1px solid var(--fh-rule);
}

.fh-qa:first-child {
	border-top: 0;
}

.fh-qa > summary {
	display: flex;
	align-items: flex-start;
	gap: 0.8em;
	padding: 0.85em 1.05em;
	cursor: pointer;
	font-family: var(--fh-head-font);
	font-size: 1rem;
	font-weight: 700;
	color: var(--fh-ink);
	list-style: none;
}

.fh-qa > summary::-webkit-details-marker {
	display: none;
}

.fh-qa > summary::after {
	content: "+";
	order: 2;
	margin-left: auto;
	flex: none;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--fh-page-2);
	color: var(--fh-hall-2);
	font-size: 1.1rem;
	font-weight: 900;
	line-height: 1;
}

.fh-qa[open] > summary::after {
	content: "\2212";
	background: var(--fh-ball-yellow);
	color: var(--fh-ink);
}

.fh-qa > summary:hover {
	background: var(--fh-page-2);
}

.fh-qa > *:not(summary) {
	margin: 0;
	padding: 0 1.05em 1em;
	font-size: 0.97rem;
	color: var(--fh-ink);
}

.fh-qa > summary + * {
	padding-top: 0.1em;
}

/* where to go next: a row of ticket stubs */
.fh-onward {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.85rem;
	list-style: none;
	margin: 1.05em 0 0;
	padding: 0;
}

.fh-onward li {
	margin: 0;
}

.fh-page .fh-onward a[href] {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	height: 100%;
	padding: 0.9rem 1rem 0.95rem 1.5rem;
	background: var(--fh-card);
	border: 1px solid var(--fh-rule);
	border-radius: var(--fh-radius);
	color: var(--fh-ink);
	text-decoration: none;
}

/* the perforation down the side of a stub (same weight as the rule above, so it is read after it) */
.fh-page .fh-tickets a[href] {
	background-image: radial-gradient(circle at 0.62rem 50%, var(--fh-page) 0 2.6px, transparent 2.7px);
	background-size: 100% 9px;
	background-repeat: repeat-y;
}

.fh-page .fh-onward a[href]:hover,
.fh-page .fh-onward a[href]:focus-visible {
	border-color: var(--fh-hall-2);
	box-shadow: 0 2px 0 0 var(--fh-rule);
	text-decoration: none;
}

.fh-onward a strong {
	font-family: var(--fh-head-font);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--fh-hall-2);
}

.fh-onward a:hover strong,
.fh-onward a:focus-visible strong {
	color: var(--fh-cta-hover);
}

.fh-onward a span {
	font-size: 0.89rem;
	line-height: 1.45;
	color: var(--fh-ink-2);
}

/* the care line at the foot of the guide */
.fh-care {
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--fh-rule);
}

.fh-page p.fh-fine {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--fh-ink-2);
}

.fh-page p.fh-fine + p.fh-fine {
	margin-top: 0.5em;
}

.fh-care a {
	color: var(--fh-ink-2);
}

.fh-care a:hover,
.fh-care a:focus-visible {
	color: var(--fh-cta-hover);
}

/* 12. ------------------------------------- narrow screens and paper --- */

@media (max-width: 1024px) {
	.fh-page h1 { font-size: 33px; }
	.fh-page h2 { font-size: 26px; }
	.fh-page h3 { font-size: 20px; }
}

@media (max-width: 600px) {
	.fh-page {
		--fh-gap: 1.1rem;
	}

	.fh-page h1 { font-size: 29px; }
	.fh-page h2 { font-size: 23px; }
	.fh-page h3 { font-size: 19px; }

	.fh-hall {
		padding-block: 0.9rem 1.4rem;
	}

	.fh-intro {
		font-size: 1.06rem;
	}

	.fh-crumbs {
		font-size: 0.78rem;
		margin-bottom: 1rem;
	}

	.fh-tote li strong,
	.fh-calc__total-fig {
		font-size: 1.45rem;
	}

	.fh-callsheet ol {
		grid-template-columns: 1fr;
	}

	.fh-callsheet li {
		padding-inline: 0.7em;
	}

	.fh-daubs li {
		padding-left: 1.8rem;
	}

	.fh-daubs li::before {
		width: 1rem;
		height: 1rem;
	}

	.fh-calls li {
		padding-left: 2.6rem;
	}

	.fh-calls li::before {
		width: 1.9rem;
		height: 1.9rem;
		font-size: 0.86rem;
	}

	.fh-note {
		padding: 0.85rem 0.95rem 0.85rem 1.05rem;
	}

	.fh-table {
		font-size: 0.89rem;
		min-width: 28rem;
	}

	.fh-table th,
	.fh-table td {
		padding: 0.5em 0.6em;
	}

	.fh-table thead th:first-child,
	.fh-table tbody tr > *:first-child {
		padding-left: 0.7em;
	}

	.fh-table thead th:last-child,
	.fh-table tbody tr > *:last-child {
		padding-right: 0.7em;
	}

	.fh-calc__slip {
		grid-template-columns: 1fr;
	}

	.fh-calc__board,
	.fh-calc__tally {
		padding-inline: 0.85rem;
	}

	.fh-calc__runs li {
		font-size: 0.89rem;
	}

	.fh-qa > summary,
	.fh-qa > *:not(summary) {
		padding-inline: 0.85em;
	}

	.fh-onward {
		grid-template-columns: 1fr;
	}
}

/* 360px: the narrowest phone we hold to. Nothing may push the page sideways. */
@media (max-width: 380px) {
	.fh-page {
		font-size: 16.5px;
	}

	.fh-page h1 { font-size: 27px; }

	.fh-marks {
		gap: 0.35rem;
	}

	.fh-mark {
		font-size: 0.79rem;
		padding: 0.25em 0.6em;
	}

	.fh-called {
		font-size: 0.74rem;
	}

	.fh-table {
		min-width: 24rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fh-page * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.fh-page {
		--fh-page: #FFFFFF;
		--fh-page-2: #FFFFFF;
		--fh-win-wash: #FFFFFF;
		--fh-miss-wash: #FFFFFF;
		background: #FFFFFF;
		font-size: 11pt;
		line-height: 1.5;
	}

	.fh-hall,
	.fh-hall > * {
		max-width: none;
		padding-block: 0;
	}

	.fh-page h1 { font-size: 22pt; }
	.fh-page h2 { font-size: 15pt; }
	.fh-page h3 { font-size: 12.5pt; }

	.fh-page h2,
	.fh-page h3 {
		break-after: avoid;
	}

	.fh-page a {
		color: var(--fh-ink);
		text-decoration: none;
	}

	.fh-called {
		background: none;
		border: 1pt solid var(--fh-ink);
		color: var(--fh-ink);
	}

	.fh-called::before,
	.fh-note::before,
	.fh-head::after,
	.fh-chart figcaption::before,
	.fh-tote__title::before,
	.fh-callsheet__title::before {
		display: none;
	}

	/* the balls print as outlines, the way the walkthrough's numbers already do */
	.fh-body > h2::before,
	.fh-callsheet li::before {
		background: #FFFFFF;
		color: var(--fh-ink);
		box-shadow: 0 0 0 1pt var(--fh-ink);
	}

	.fh-chart figcaption {
		background: #FFFFFF;
		border-top-color: var(--fh-ink);
	}

	.fh-callsheet__title {
		background: #FFFFFF !important;
		color: var(--fh-ink) !important;
		border-bottom: 1pt solid var(--fh-ink);
	}

	.fh-mark--age {
		background: none;
		border: 1pt solid var(--fh-ink);
		color: var(--fh-ink);
	}

	.fh-tote__title,
	.fh-calc__board,
	.fh-table thead th {
		background: #FFFFFF !important;
		color: var(--fh-ink) !important;
		border-bottom: 1pt solid var(--fh-ink);
	}

	.fh-calc__aside {
		color: var(--fh-ink-2);
	}

	.fh-calls li::before {
		background: #FFFFFF;
		color: var(--fh-ink);
		box-shadow: 0 0 0 1pt var(--fh-ink);
	}

	.fh-wrap {
		overflow: visible;
	}

	.fh-table {
		min-width: 0;
		font-size: 9.5pt;
	}

	.fh-chart,
	.fh-wrap,
	.fh-tote,
	.fh-note,
	.fh-calc,
	.fh-callsheet,
	.fh-qa,
	.fh-onward li {
		break-inside: avoid;
	}

	.fh-chart img {
		max-height: 11cm;
		width: auto;
		max-width: 100%;
	}

	/* the questions are part of the page, so they go on paper open */
	.fh-qa > *:not(summary) {
		display: block;
	}

	.fh-qa::details-content {
		content-visibility: visible;
		block-size: auto;
	}

	.fh-qa > summary::after {
		display: none;
	}

	.fh-calc__slip {
		grid-template-columns: repeat(2, 1fr);
	}

	.fh-calc__input input,
	.fh-calc__input select {
		-webkit-appearance: none;
		appearance: none;
	}

	.fh-onward {
		grid-template-columns: repeat(2, 1fr);
	}

	.fh-tickets a {
		background-image: none;
	}

	.fh-onward a {
		padding-left: 1rem;
	}
}

/* The theme indents every list inside the content by 20px so bullets have somewhere to sit. Our own
   lists either carry no marker at all, or draw one inside the item's own left padding, so that extra
   indent only pushes them off the edge the prose beside them sits on. Markers hang on the rule. */
.fh-hall ul[class],
.fh-hall ol[class] { padding-left: 0; }