/* =================================================================================================
 * Count Gauges 1.0.0, the ranking for 150freespins.uk.
 *
 * The form: each offer is printed as a counter. Three registers stand at the head, the count, the
 * price of one spin and what the count comes to, then every condition under them as a line with its
 * own figure, and one foot figure under a double rule. The registers are set in the figure face in
 * cells with ruled edges, because a counter is a machine for showing a number together with its
 * unit, and that is the one thing this market never does.
 *
 * The sheet is a counting house page: ink on ivory, brass rules, one oxblood register. So the bed the
 * counters lie on is the theme's paper, each counter is a ruled box laid on it, and the called
 * register carries the tint. Every colour, size and space below is a theme token read once at the
 * top of this file. The plugin defines none of its own, which is what the theme's contract asks.
 *
 * Two rules of the theme's bind this file, both about the brass:
 *
 * - It is barred from text under 24px. It carries no label, no figure and no sentence here; it is a
 *   rule and the edge of a register, and nothing else.
 * - A rule drawn on a tint is drawn in the ink or in the oxblood, both of which clear 3:1 on the
 *   called register's ground at 12.54 and 6.40.
 *
 * Behind each token stands the theme's own value as a fallback, so the ranking survives a change of
 * theme with its meaning intact. Every ratio quoted below was measured against the ground the colour
 * actually sits on.
 * ============================================================================================== */

.tl-gauges {
	/* Every line in this block is one theme token read once and held under a local name, so that no
	   rule below carries a value of its own and the fallback stands in one place. The names on the
	   right are the theme's, on :root. A token cannot be given its own name on both sides, which is
	   a cycle, so the local alias carries the plugin's own prefix. */

	/* The sheet */
	--cgg-paper: var(--tl-paper, #FBF8F0);
	--cgg-field: var(--tl-field, #F1E9D8);        /* a banded row. Ink on it 14.38 */
	--cgg-field-2: var(--tl-field-2, #E6DAC1);    /* the called register, the stamp. Ink on it 12.54 */

	/* The lettering */
	--cgg-ink: var(--tl-ink, #1C1A17);            /* 16.36 on paper: labels, figures, the foot */
	--cgg-ink-2: var(--tl-ink-2, #55503F);        /* 7.59 on paper, 5.82 on the called register */

	/* The register colour */
	--cgg-red: var(--tl-red, #8E2017);            /* 8.35 on paper, 6.40 on the called register. White on it 8.86 */
	--cgg-red-d: var(--tl-red-d, #6D170F);        /* 11.12 on paper. White on it 11.80: the button under the pointer */

	/* The rules */
	--cgg-brass: var(--tl-brass, #9A7622);        /* 3.97 on paper: a rule, never a word */
	--cgg-hair: var(--tl-hair, #DED3BB);          /* 1.40: the lightest rule */
	--cgg-hair-2: var(--tl-hair-2, #C3B695);      /* 1.89: a row border */

	/* The faces */
	--cgg-letter: var(--tl-letter, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif);
	--cgg-prose: var(--tl-prose, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	--cgg-figure: var(--tl-figure, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);

	/* The ladder */
	--cgg-t1: var(--tl-t1, 13px);
	--cgg-t2: var(--tl-t2, 15px);
	--cgg-t3: var(--tl-t3, 17px);
	--cgg-t4: var(--tl-t4, 23px);
	--cgg-t5: var(--tl-t5, 32px);

	/* The module */
	--cgg-m: var(--tl-m, 8px);
	--cgg-m2: var(--tl-m2, 16px);
	--cgg-m3: var(--tl-m3, 24px);
	--cgg-m4: var(--tl-m4, 32px);
	--cgg-m6: var(--tl-m6, 48px);

	display: block;
	margin: 0;
	color: var(--cgg-ink);
	font-family: var(--cgg-prose);
	font-size: var(--cgg-t3);
	line-height: 1.6;
}

/* No width and no horizontal inset on the section or on the bed: the block stands between the
   sheet's own two rules, exactly as the prose above and below it does. */
.tl-gauges,
.tl-gauges__bed {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.tl-gauges__head {
	margin: 0 0 var(--cgg-m2);
	padding-bottom: var(--cgg-m);
	border-bottom: 2px solid var(--cgg-brass);
	font-family: var(--cgg-letter);
	font-size: var(--cgg-t5);
	line-height: 1.18;
	color: var(--cgg-ink);
}

.tl-gauges__paid {
	margin: 0 0 var(--cgg-m2);
	font-size: var(--cgg-t2);
	color: var(--cgg-ink-2);
}

/* =================================================================================================
 * The bed, and one counter on it
 * ============================================================================================== */

.tl-gauges__bed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--cgg-m3);
	margin: 0 0 var(--cgg-m3);
}

.tl-gauge {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--cgg-ink);
	background: var(--cgg-paper);
}

.tl-gauge__top {
	padding: var(--cgg-m2);
	border-bottom: 1px solid var(--cgg-brass);
}

.tl-gauge__shop {
	margin: 0 0 var(--cgg-m);
	font-family: var(--cgg-figure);
	font-size: var(--cgg-t1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cgg-ink-2);
}

.tl-gauge__docket {
	margin: 0 0 var(--cgg-m);
	font-family: var(--cgg-figure);
	font-size: var(--cgg-t1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cgg-ink-2);
}

/* The gauge number is the one flat area on a counter, and the ink on the oxblood measures 8.86 the
   other way about: white on the oxblood. So the number is set in white on it. */
.tl-gauge__no {
	display: inline-block;
	padding: 0 var(--cgg-m);
	background: var(--cgg-red);
	color: #FFFFFF;
}

.tl-gauge__house {
	margin: 0;
	font-family: var(--cgg-letter);
	font-size: var(--cgg-t4);
	line-height: 1.2;
	color: var(--cgg-ink);
}

.tl-gauge__strap {
	margin: var(--cgg-m) 0 0;
	font-size: var(--cgg-t2);
	color: var(--cgg-ink-2);
}

/* =================================================================================================
 * The three registers
 *
 * One row of three cells on a wide counter, stacked on a narrow one. The third is the called cell
 * and carries the tint, because it is the figure the reader came for. Nothing here prints a count
 * without the price beside it: the grid holds all three or the counter is not printed at all.
 * ============================================================================================== */

.tl-gauge__regs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 2px solid var(--cgg-ink);
}

.tl-reg {
	padding: var(--cgg-m2) var(--cgg-m);
	border-left: 1px solid var(--cgg-hair-2);
	background: var(--cgg-paper);
}

.tl-reg:first-child { border-left: 0; }

.tl-reg--called { background: var(--cgg-field-2); }

.tl-reg__cap {
	display: block;
	margin-bottom: var(--cgg-m);
	font-size: var(--cgg-t1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cgg-ink-2);
}

.tl-reg__fig {
	display: block;
	font-family: var(--cgg-figure);
	font-size: var(--cgg-t4);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--cgg-red);
}

/* On the called cell the figure is the ink, which measures 12.54 on that ground, rather than the
   oxblood at 6.40: the foot figure is the one number on the counter that must read first. */
.tl-reg--called .tl-reg__fig { color: var(--cgg-ink); }

.tl-reg__says {
	display: block;
	margin-top: var(--cgg-m);
	font-size: var(--cgg-t1);
	line-height: 1.4;
	color: var(--cgg-ink-2);
}

.tl-gauge__basis {
	margin: 0;
	padding: var(--cgg-m) var(--cgg-m2);
	border-bottom: 1px solid var(--cgg-hair-2);
	background: var(--cgg-field);
	font-size: var(--cgg-t1);
	letter-spacing: 0.04em;
	color: var(--cgg-ink-2);
}

/* =================================================================================================
 * The condition lines
 * ============================================================================================== */

.tl-gauge__rows {
	flex: 1 1 auto;
	padding: 0 var(--cgg-m2) var(--cgg-m2);
}

.tl-band {
	margin: var(--cgg-m2) 0 var(--cgg-m);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--cgg-brass);
	font-size: var(--cgg-t1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cgg-ink-2);
}

.tl-ln {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 6rem;
	gap: 0 var(--cgg-m);
	padding: var(--cgg-m) 0;
	border-bottom: 1px solid var(--cgg-hair);
	font-size: var(--cgg-t2);
}

.tl-ln__label { color: var(--cgg-ink); }

.tl-ln__amount {
	font-family: var(--cgg-figure);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	color: var(--cgg-ink);
}

.tl-ln__note {
	font-family: var(--cgg-prose);
	font-size: var(--cgg-t1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cgg-ink-2);
}

.tl-ln__detail {
	grid-column: 1 / -1;
	margin-top: 2px;
	font-size: var(--cgg-t1);
	line-height: 1.45;
	color: var(--cgg-ink-2);
}

/* What is carried down to the wagering, and the one foot figure, each ruled the way a ledger rules
   a subtotal and a total. */
.tl-ln--carried {
	border-top: 1px solid var(--cgg-ink);
	border-bottom: 0;
	font-weight: 600;
}

.tl-ln--foot {
	margin-top: var(--cgg-m);
	padding-top: var(--cgg-m2);
	border-top: 3px double var(--cgg-ink);
	border-bottom: 0;
	background: var(--cgg-field-2);
}

.tl-ln--foot .tl-ln__label {
	font-family: var(--cgg-letter);
	font-size: var(--cgg-t3);
}

.tl-ln--foot .tl-ln__amount {
	font-size: var(--cgg-t4);
	font-weight: 700;
}

/* =================================================================================================
 * The stub at the foot of a counter
 * ============================================================================================== */

.tl-gauge__stub {
	padding: var(--cgg-m2);
	border-top: 2px solid var(--cgg-ink);
	background: var(--cgg-field);
}

.tl-gauge__stamp {
	display: inline-block;
	margin: 0 0 var(--cgg-m);
	padding: 2px var(--cgg-m);
	border: 1px solid var(--cgg-red);
	font-family: var(--cgg-figure);
	font-size: var(--cgg-t1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cgg-red);          /* 7.34 on the banded ground */
}

.tl-gauge__stamp--gb {
	border-color: var(--cgg-ink);
	color: var(--cgg-ink);
}

.tl-gauge__licence,
.tl-gauge__read {
	margin: 0 0 var(--cgg-m);
	font-size: var(--cgg-t1);
	line-height: 1.45;
	color: var(--cgg-ink-2);
}

.tl-gauge__go {
	display: block;
	margin-top: var(--cgg-m2);
	padding: var(--cgg-m2) var(--cgg-m3);
	border: 2px solid var(--cgg-ink);
	background: var(--cgg-red);
	color: #FFFFFF;                  /* 8.86 on the oxblood */
	font-family: var(--cgg-letter);
	font-size: var(--cgg-t3);
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
}

.tl-gauge__go:hover,
.tl-gauge__go:focus {
	background: var(--cgg-red-d);    /* white on it 11.80 */
	color: #FFFFFF;
}

/* The reminder a signed-in editor sees where a destination is missing. A reader is shown nothing at
   all, and the empty span the swap replaces is hidden here as well, so a skipped swap still shows a
   reader nothing. */
.tl-nodest { display: none; }

.tl-gauge__go--missing {
	background: var(--cgg-paper);
	border-style: dashed;
	color: var(--cgg-red);
}

.tl-only-editor {
	display: block;
	margin-top: var(--cgg-m);
	font-size: var(--cgg-t1);
	line-height: 1.45;
	color: var(--cgg-ink-2);
}

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

/* =================================================================================================
 * The notes under the board
 * ============================================================================================== */

.tl-gauges__working,
.tl-gauges__caveat,
.tl-gauges__dated {
	margin: 0 0 var(--cgg-m2);
	font-size: var(--cgg-t2);
	line-height: 1.55;
	color: var(--cgg-ink-2);
}

.tl-gauges__caveat {
	padding: var(--cgg-m2) 0;
	border-top: 1px solid var(--cgg-hair-2);
	border-bottom: 1px solid var(--cgg-hair-2);
	color: var(--cgg-ink);
}

.tl-gauges__dated { margin-bottom: 0; }

/* =================================================================================================
 * The two boundaries. Nothing below touches a horizontal inset or a measure on the section or the
 * bed: what moves is the number of columns and whether the registers stack.
 * ============================================================================================== */

@media (max-width: 1199px) {
	.tl-gauges__bed { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

@media (max-width: 921px) {
	.tl-gauges {
		--cgg-t4: 20px;
		--cgg-t5: 26px;
	}

	.tl-gauges__bed { grid-template-columns: minmax(0, 1fr); }

	/* On a phone the three registers stand one above another, which keeps the count, the price and
	   the foot figure in the same order they are read in on a wide screen. */
	.tl-gauge__regs { grid-template-columns: minmax(0, 1fr); }

	.tl-reg {
		border-left: 0;
		border-top: 1px solid var(--cgg-hair-2);
	}

	.tl-reg:first-child { border-top: 0; }

	.tl-ln { grid-template-columns: minmax(0, 1fr) 5rem; }
}

@media print {
	.tl-gauge__go { display: none; }

	.tl-gauge { break-inside: avoid; }
}