/* =================================================================================================
 * Till Receipts 1.0.0, the ranking for free-spinsnodeposit.uk.
 *
 * The form: each offer is printed as a till receipt. The credit stands at the head, every condition
 * is a debit under it, and one total stands at the foot under a double rule. A receipt is set in the
 * figure face on a narrow paper column with a torn edge top and bottom, because the arithmetic is
 * the point and a machine that adds up is the only thing being imitated here.
 *
 * The sheet is a dyeline: cyan line work on white, a drawing grid that is the spacing scale made
 * visible, lettering off one height series. So the bed the receipts lie on is the theme's own ruled
 * ground, each receipt is a plain white sheet laid over it, and the teeth of the torn edge let the
 * ruling through. 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 of it.
 *
 * One width, and the block keeps it. The section is laid between the same two rules as the prose
 * above and below it, with nothing added at either side. No pixel width is set on the section or on
 * the bed. The receipt alone has a width, because a torn paper column is an object with an edge, and
 * that width shortens the paper and never the block under it.
 *
 * Two rules of the theme's bind this file, both of them about the bright cyan:
 *
 * - It is barred from small text. It carries no label, no figure and no sentence here. It appears
 *   once, as the flat ground of the docket number, where the ink on it measures 4.95.
 * - It never rules against a tint. Every rule drawn on a tint here is ink or the deep cyan.
 *
 * 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.
 * ============================================================================================== */

.dy-spike {
	/* 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 prefix. */

	/* The sheet */
	--tlr-paper: var(--dy-paper, #FFFFFF);
	--tlr-field: var(--dy-field, #E6F3FA);        /* a banded row. Ink on it 14.70 */
	--tlr-field-2: var(--dy-field-2, #D2E9F5);    /* a field called out: the total, the stamp. Ink on it 13.23 */

	/* The lettering */
	--tlr-ink: var(--dy-ink, #07212C);            /* 16.63 on paper: labels, figures, the total */
	--tlr-ink-2: var(--dy-ink-2, #3D5A68);        /* 7.34 on paper, 5.84 on the called field: the wording under a line */

	/* The line work */
	--tlr-cyan: var(--dy-cyan, #0096CE);          /* 3.36 on paper. Flat areas only. Ink on it 4.95 */
	--tlr-cyan-d: var(--dy-cyan-d, #005E7D);      /* 7.25 on paper: band headings, rules that are read, the button ground */
	--tlr-cyan-dd: var(--dy-cyan-dd, #004A63);    /* 9.72 on paper: the button under the pointer */
	--tlr-grid: var(--dy-grid, #C9E5F3);          /* 1.31: the module line */
	--tlr-grid-maj: var(--dy-grid-maj, #7FC2E0);  /* 1.96: the division line, and every hairline on a receipt */

	/* The two faces, and the one height series they are set on */
	--tlr-figure: var(--dy-figure, "B612 Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--tlr-prose: var(--dy-prose, "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	--tlr-h35: var(--dy-h35, 12px);   /* 3.5 mm: the whole of a receipt, which prints at one height */
	--tlr-h50: var(--dy-h50, 17px);   /* 5 mm: the standing line under the spike */
	--tlr-h60: var(--dy-h60, 20px);   /* 6 mm: the operator */
	--tlr-h70: var(--dy-h70, 24px);   /* 7 mm: the one total */

	/* The module, and the spaces that are whole numbers of it */
	--tlr-mod: var(--dy-mod, 8px);
	--tlr-s1: var(--dy-s1, 8px);
	--tlr-s2: var(--dy-s2, 16px);
	--tlr-s3: var(--dy-s3, 24px);
	--tlr-s5: var(--dy-s5, 48px);

	/* The ruled ground, defined once by the theme and reused here rather than drawn a second time. */
	--tlr-grid-fill: var(--dy-grid-fill,
		repeating-linear-gradient(90deg, var(--tlr-grid) 0 1px, transparent 1px var(--tlr-mod)),
		repeating-linear-gradient(0deg, var(--tlr-grid) 0 1px, transparent 1px var(--tlr-mod)),
		repeating-linear-gradient(90deg, var(--tlr-grid-maj) 0 1px, transparent 1px var(--dy-zone, 40px)),
		repeating-linear-gradient(0deg, var(--tlr-grid-maj) 0 1px, transparent 1px var(--dy-zone, 40px)));

	/* A receipt's own measures. Not one of them is a width on the block, and each is a whole number
	   of modules, so the paper lands square on the ruling it is laid over. */
	--tlr-roll: 320px;      /* the widest a paper column is allowed to be, which is eight divisions */
	--tlr-amount: 9.5ch;    /* the amount column, fixed so every figure lands on one vertical line
	                           and no word that stands in for a figure has to wrap */
	--tlr-tooth: 16px;      /* one tooth of the torn edge, two modules */
	--tlr-tooth-h: 8px;     /* its height, which is half its width, so the teeth tile exactly */

	box-sizing: border-box;
	display: block;
	width: auto;
	max-width: none;
	margin: 0 0 var(--tlr-s5);
	padding: 0;
	border: 0;
	border-radius: var(--dy-radius, 0);
	background: none;
	color: var(--tlr-ink);
	font-family: var(--tlr-prose);
}

.dy-spike *,
.dy-spike *::before,
.dy-spike *::after {
	box-sizing: border-box;
	border-radius: var(--dy-radius, 0);
	box-shadow: none;
}

/* The two lines above the spike. No horizontal padding: both start on the sheet's rule. The heading
   is left to the theme, which sets every heading on this site off one height series. */
.dy-spike__head {
	margin: 0 0 var(--tlr-s1);
	padding: 0;
}

.dy-spike__paid {
	margin: 0 0 var(--tlr-s2);
	padding: 0;
	font-size: var(--tlr-h35);
	line-height: 1.5;
	color: var(--tlr-ink-2);
}

/* ---------------------------------------------------------------------------------------------- *
 * The bed. The drawing grid, with the receipts laid out on it. It carries the vertical inset, so
 * the torn edges have ruled ground above and below them, and no horizontal inset at all, so the
 * block still starts and finishes on the sheet's two rules.
 * ---------------------------------------------------------------------------------------------- */
.dy-spike__bed {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--tlr-s2);
	margin: 0;
	padding: var(--tlr-s2) 0;
	border-block: 1px solid var(--tlr-ink);
	background-color: var(--tlr-paper);
	background-image: var(--tlr-grid-fill);
}

/* Two receipts abreast once there is room for two paper columns, four once there is room for four.
   Three is skipped, so that a spike of four reads as two pairs rather than as a row and an orphan.
   A spike of any other length simply wraps. */
@media (min-width: 592px) {
	.dy-spike__bed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tlr-s3) var(--tlr-s2);
	}
}

@media (min-width: 1072px) {
	.dy-spike__bed {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------------------------- *
 * One receipt. A white paper column, torn top and bottom, printed at one height throughout except
 * for the operator at its head and the total at its foot, which is how a till prints.
 * ---------------------------------------------------------------------------------------------- */
.dy-rcpt {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--tlr-roll);
	min-width: 0;
	margin: 0;
	padding: calc(var(--tlr-tooth-h) + var(--tlr-s1)) var(--tlr-s2);
	border-inline: 1px solid var(--tlr-grid-maj);
	background: var(--tlr-paper);
	color: var(--tlr-ink);
	font-family: var(--tlr-figure);
	font-size: var(--tlr-h35);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;

	/* A containing block, and the reason is worth keeping beside the rule. The labels that are read
	   aloud and not drawn are positioned absolutely. With no positioned ancestor they are laid out
	   against the page itself, at whatever x the receipt happens to stand at, which on a phone is
	   several hundred pixels past the right edge and gives the whole document a sideways scrollbar.
	   The receipt is that ancestor, so those boxes stay inside the paper where they belong. */
	position: relative;
}

/* The torn edge. Two rows of teeth, one at each end, with the body of the paper between them. The
   teeth are cut out of the paper rather than drawn on it, so the ruled ground shows through the
   gaps, which is what a receipt torn off a roll and laid on a drawing looks like. A browser without
   masks keeps a straight edge, which is the honest fallback. */
@supports (mask: conic-gradient(#000 0 0)) {
	.dy-rcpt {
		-webkit-mask:
			conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tlr-tooth) var(--tlr-tooth-h) repeat-x,
			conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tlr-tooth) var(--tlr-tooth-h) repeat-x,
			linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tlr-tooth-h)) no-repeat;
		mask:
			conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tlr-tooth) var(--tlr-tooth-h) repeat-x,
			conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tlr-tooth) var(--tlr-tooth-h) repeat-x,
			linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tlr-tooth-h)) no-repeat;
	}
}

/* ---- the head of the receipt ------------------------------------------------------------------ */
.dy-rcpt__top {
	margin: 0 0 var(--tlr-s1);
	padding: 0 0 var(--tlr-s1);
	border-block-end: 1px dashed var(--tlr-grid-maj);
	text-align: center;
}

.dy-rcpt__shop {
	margin: 0;
	font-size: var(--tlr-h35);
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tlr-ink-2);
}

.dy-rcpt__docket {
	margin: 0 0 var(--tlr-s1);
	font-size: var(--tlr-h35);
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tlr-cyan-d);
}

/* The docket number is the one flat area of bright cyan on a receipt, with the figure in ink on it,
   which measures 4.95. The bright ink is the ground and never the type. */
.dy-rcpt__no {
	display: inline-block;
	margin-inline-start: .4ch;
	padding: 0 .6ch;
	background: var(--tlr-cyan);
	color: var(--tlr-ink);
	letter-spacing: .08em;
}

.dy-rcpt__house {
	margin: 0;
	padding: 0;
	font-family: var(--tlr-figure);
	font-size: var(--tlr-h60);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tlr-ink);
	overflow-wrap: anywhere;
}

.dy-rcpt__strap {
	margin: 0;
	font-size: var(--tlr-h35);
	line-height: 1.4;
	color: var(--tlr-cyan-d);
}

/* The unit the figures are struck in, which is money on some receipts and pence in the pound on
   others. It stands at the head of the amount column, so no line has to repeat a symbol. */
.dy-rcpt__unit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--tlr-amount);
	column-gap: 1ch;
	margin: 0 0 var(--tlr-s1);
	font-size: var(--tlr-h35);
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tlr-ink-2);
}

.dy-rcpt__unit-mark {
	text-align: end;
	color: var(--tlr-ink);
}

/* ---- the lines ------------------------------------------------------------------------------- */
.dy-rcpt__rows {
	margin: 0;
	padding: 0;
}

/* A band heading, with a dashed rule running out from it to the paper's edge. */
.dy-band {
	display: flex;
	align-items: center;
	gap: 1ch;
	margin: 0 0 var(--tlr-s1);
	padding: 0;
	font-size: var(--tlr-h35);
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tlr-cyan-d);
}

.dy-band::after {
	content: "";
	flex: 1 1 auto;
	border-block-start: 1px dashed var(--tlr-grid-maj);
}

/* One line: the label, the amount in a column of fixed measure so every figure lands on the same
   vertical line, and the operator's own wording underneath spanning both. */
.dy-ln {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--tlr-amount);
	column-gap: 1ch;
	margin: 0 0 var(--tlr-s1);
	padding: 0;
}

.dy-ln__label {
	grid-column: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.dy-ln__amount {
	grid-column: 2;
	text-align: end;
	overflow-wrap: anywhere;
}

/* The word that stands where a figure cannot. It is set in the secondary ink, so that a reader
   running an eye down the column meets the figures and not the words. */
.dy-ln__note {
	color: var(--tlr-ink-2);
}

.dy-ln__detail {
	grid-column: 1 / -1;
	font-size: var(--tlr-h35);
	line-height: 1.5;
	color: var(--tlr-ink-2);
}

/* The running balance. It is a line of bookkeeping and not a total, so it is set apart by a rule
   and by weight, and it never takes the emphasis the figure at the foot has. */
.dy-ln--carried {
	margin-block: 0 var(--tlr-s1);
	padding-block: var(--tlr-s1);
	border-block: 1px dotted var(--tlr-grid-maj);
}

.dy-ln--carried .dy-ln__label,
.dy-ln--carried .dy-ln__amount {
	font-weight: 700;
}

/* ---- the one total --------------------------------------------------------------------------- */
.dy-ln--total {
	margin: var(--tlr-s1) 0 0;
	padding: var(--tlr-s1);
	border-block-start: 3px double var(--tlr-ink);
	background: var(--tlr-field-2);
}

.dy-ln--total .dy-ln__label {
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tlr-ink);
}

/* The figure at the foot. Ink on the called field, which measures 13.23. Not the bright cyan: this
   is the one figure on the sheet a reader is meant to carry away, and the bright ink may not set
   type at this height. */
.dy-ln--total .dy-ln__amount {
	grid-column: 1 / -1;
	margin-block-start: 2px;
	font-size: var(--tlr-h70);
	font-weight: 700;
	line-height: 1.15;
	color: var(--tlr-ink);
}

.dy-ln--total .dy-ln__detail {
	margin-block-start: var(--tlr-s1);
	color: var(--tlr-ink);
}

/* ---- the counterfoil ------------------------------------------------------------------------- */
.dy-rcpt__stub {
	margin-block-start: auto;
	padding-block-start: var(--tlr-s2);
}

/* The Great Britain position, stamped rather than mentioned. Ink on the called field measures
   13.23, and the stamp carries no sentence, only the fact. */
.dy-rcpt__stamp {
	margin: 0 0 var(--tlr-s1);
	padding: var(--tlr-s1) .6ch;
	border: 1px solid var(--tlr-cyan-d);
	background: var(--tlr-field-2);
	color: var(--tlr-ink);
	font-size: var(--tlr-h35);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}

.dy-rcpt__stamp--gb {
	background: var(--tlr-field);
}

.dy-rcpt__licence {
	margin: 0;
	font-size: var(--tlr-h35);
	line-height: 1.5;
	color: var(--tlr-ink-2);
}

.dy-rcpt__read {
	margin: var(--tlr-s1) 0 0;
	font-size: var(--tlr-h35);
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tlr-ink-2);
}

/* The button, grounded in the deep cyan, where white measures 7.25. Never in the bright ink, where
   it measures 3.36.
   The selector carries more weight than it looks as though it needs. Astra underlines every link
   inside the content with .ast-single-post .entry-content a, which outranks a plain class, and a
   button on a solid ground with a line drawn through its words is not what anybody drew. Naming
   the receipt and the attribute carries this rule past that one without reaching for !important,
   and without depending on which stylesheet the page happens to load last. */
.dy-spike .dy-rcpt .dy-rcpt__go[href] {
	display: block;
	margin-block-start: var(--tlr-s1);
	padding: var(--tlr-s1) .6ch;
	border: 0;
	background: var(--tlr-cyan-d);
	color: var(--tlr-paper);
	font-family: var(--tlr-figure);
	font-size: var(--tlr-h35);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.dy-spike .dy-rcpt .dy-rcpt__go[href]:hover,
.dy-spike .dy-rcpt .dy-rcpt__go[href]:focus {
	background: var(--tlr-cyan-dd);
	color: var(--tlr-paper);
	text-decoration: none;
}

.dy-spike .dy-rcpt .dy-rcpt__go--missing[href] {
	border: 1px dashed var(--tlr-cyan-d);
	background: none;
	color: var(--tlr-cyan-d);
	letter-spacing: 0;
	text-transform: none;
}

/* ---------------------------------------------------------------------------------------------- *
 * The lines under the spike. Vertical padding only, so each one starts on the sheet's left rule
 * and finishes on its right rule.
 * ---------------------------------------------------------------------------------------------- */
.dy-spike__working {
	margin: var(--tlr-s2) 0 0;
	padding: 0;
	font-family: var(--tlr-prose);
	font-size: var(--tlr-h35);
	line-height: 1.6;
	color: var(--tlr-ink-2);
}

.dy-spike__caveat {
	margin: var(--tlr-s2) 0 0;
	padding: var(--tlr-s2) 0 0;
	border-block-start: 2px solid var(--tlr-cyan-d);
	font-family: var(--tlr-prose);
	font-size: var(--tlr-h50);
	line-height: 1.55;
	color: var(--tlr-ink);
}

.dy-spike__dated {
	margin: var(--tlr-s1) 0 0;
	padding: 0;
	font-family: var(--tlr-prose);
	font-size: var(--tlr-h35);
	line-height: 1.6;
	color: var(--tlr-ink-2);
}

/* Spoken, never printed. */
.dy-offscreen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The marker that stands where a destination has not been filled in yet. It is swapped out before
   the page is sent, and it is hidden here as well so that nothing shows if the swap is ever
   skipped. */
.dy-nodest {
	display: none;
}

/* The editor's reminder, which a reader never sees. */
.dy-only-editor {
	display: block;
	margin: var(--tlr-s1) 0 0;
	padding: 0;
	font-family: var(--tlr-prose);
	font-size: var(--tlr-h35);
	line-height: 1.5;
	color: var(--tlr-ink-2);
}

/* ---------------------------------------------------------------------------------------------- *
 * Forced colours and print. In forced colours the paper is not ours to paint, so the ruling, the
 * fields and the flat areas stand down and the two stamps keep a border. On paper a receipt prints
 * as a receipt, which is the one case where this format needs nothing done to it at all.
 * ---------------------------------------------------------------------------------------------- */
@media (forced-colors: active) {

	.dy-spike__bed {
		background-image: none;
	}

	.dy-rcpt__no,
	.dy-rcpt__stamp,
	.dy-ln--total {
		background: none;
	}

	.dy-rcpt__no,
	.dy-rcpt__stamp,
	.dy-spike .dy-rcpt .dy-rcpt__go[href] {
		border: 1px solid currentColor;
	}
}

@media print {

	.dy-spike__bed {
		display: block;
		padding: 0;
		border: 0;
		background: none;
	}

	.dy-rcpt {
		max-width: none;
		margin: 0 0 var(--tlr-s2);
		border: 1px solid var(--tlr-grid-maj);
		break-inside: avoid;
	}

	.dy-spike .dy-rcpt .dy-rcpt__go[href] {
		display: none;
	}
}