/* =================================================================================================
 * Tally Room 1.0.0, the page furniture for The Spin Count.
 *
 * Every page this plugin writes is one sheet off a counting house pad. The sheet holds, from the top
 * down: the trail, the title block with the register in it, the ranking, the contents bar, the body
 * of numbered parts with the tables, the plates and the dimensions inside them, the questions, the
 * care block and the colophon.
 *
 * THE ONE WIDTH, which is the rule this file exists to keep.
 *
 * Every block in the page flow starts on the sheet's left rule and finishes on its right rule:
 * prose, headings, tables, plates, registers, dimensions, the contents bar and the ranking alike. No
 * block in the flow carries a horizontal inset, a width or a measure of its own, and there is no
 * second, narrower measure for prose anywhere in this file. That holds inside the media queries at
 * the foot as well, which is where the rule has been broken before on this network: nothing down
 * there touches a horizontal padding, a horizontal margin or a max-width on a block in the flow.
 * What the media queries change is how many columns a grid stands in, the height of the lettering
 * and whether a table scrolls inside its own box.
 *
 * An inset exists in exactly two places, and both of them are objects with an edge of their own,
 * which is what the house style allows: inside a table cell, and inside the frame of a plate. A rule
 * drawn across a block is a border, which costs the block no horizontal room, so a ruled block still
 * begins and ends on the sheet's two rules. Vertical padding is free for the same reason.
 *
 * A table too wide for a phone goes in a .tl-scroll wrapper and scrolls inside that box, so the
 * figures stay legible and the document itself never moves sideways. The wrapper is a flow block like
 * any other and stands on the same two rules.
 *
 * TOKENS. Colour, lettering, the ladder and the module come from the theme on :root under the --tl-
 * names. The block below is the fallback, so a page still reads if the theme is swapped out, and no
 * value in it is invented: each one is the token as astra-child-tally/style.css sets it down. This
 * file defines no colour, no face and no spacing of its own.
 *
 * SHARED MARKS. The theme publishes this site's own devices for the whole site, so a register, a
 * dimension and a plate are drawn one way wherever they appear: .tl-count, .tl-dim, .tl-plate,
 * .tl-note, .tl-rev, .tl-18, .tl-cap and .tl-gate. The ones a page uses are restated here, to the
 * same drawing and off the same tokens, for the one reason the fallback block exists: a page has to
 * read before the theme lands and if it is ever swapped out. Nothing here draws them differently.
 *
 * .tl-gate is the one a page does not use and is therefore not restated. A page rules a part off
 * with a heading and its brass rule rather than with a five bar gate, and a mark copied in against
 * the day somebody might want it is a mark nobody keeps in step.
 * ============================================================================================== */

.tl-sheet {
	/* ---- The sheet and the cells ---- */
	--tls-paper: var(--tl-paper, #FBF8F0);
	--tls-field: var(--tl-field, #F1E9D8);
	--tls-field-2: var(--tl-field-2, #E6DAC1);

	/* ---- The lettering ---- */
	--tls-ink: var(--tl-ink, #1C1A17);        /* 16.36 on the paper */
	--tls-ink-2: var(--tl-ink-2, #55503F);    /* 7.59 on the paper, 5.82 on a called cell */

	/* ---- The register ---- */
	--tls-red: var(--tl-red, #8E2017);        /* 8.35 on the paper: a counted figure, a link */
	--tls-red-d: var(--tl-red-d, #6D170F);    /* 11.12 on the paper: a link under the pointer */

	/* ---- The rules. The brass carries no text under 24px anywhere in this file. ---- */
	--tls-brass: var(--tl-brass, #9A7622);    /* 3.97 on the paper, 3.04 on a called cell */
	--tls-hair: var(--tl-hair, #DED3BB);      /* 1.40: barred from text of any size */
	--tls-hair-2: var(--tl-hair-2, #C3B695);  /* 1.89: the fifth line, and a cell border */

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

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

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

	color: var(--tls-ink);
	font-family: var(--tls-prose);
	font-size: var(--tls-t3);
	line-height: 1.66;
}

/* No block in this flow takes a measure of its own. The two rules of the sheet are the theme's, and
   this is the line that says so in code rather than in a comment. */
.tl-sheet > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.tl-sheet p { margin: 0 0 var(--tls-m3); }

.tl-sheet a { color: var(--tls-red); }

.tl-sheet a:hover,
.tl-sheet a:focus { color: var(--tls-red-d); }

/* A figure in a sentence, so a quantity is read as a measurement. */
.tl-sheet .tl-figure {
	font-family: var(--tls-figure);
	font-size: 0.94em;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

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

.tl-sheet .tl-18,
.tl-sheet .tl-rev {
	display: inline-block;
	padding: 1px var(--tls-m);
	border: 1px solid var(--tls-ink);
	background: var(--tls-field-2);
	font-family: var(--tls-figure);
	font-size: var(--tls-t1);
	line-height: 1.5;
	color: var(--tls-ink);
}

.tl-sheet .tl-18 { font-weight: 700; letter-spacing: 0.04em; }

.tl-sheet .tl-tel {
	font-family: var(--tls-figure);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* =================================================================================================
 * 1. The trail
 * ============================================================================================== */

.tl-trail {
	margin: 0 0 var(--tls-m3);
	padding-bottom: var(--tls-m);
	border-bottom: 1px solid var(--tls-hair-2);
	font-size: var(--tls-t2);
}

.tl-trail ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tls-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-trail li + li::before {
	content: "/";
	margin-right: var(--tls-m);
	color: var(--tls-ink-2);
}

.tl-trail__here { color: var(--tls-ink-2); }

/* =================================================================================================
 * 2. The title block, and the register in it
 * ============================================================================================== */

.tl-head {
	margin: 0 0 var(--tls-m6);
	padding-bottom: var(--tls-m3);
	border-bottom: 2px solid var(--tls-ink);
}

.tl-head__ref {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tls-m) var(--tls-m3);
	margin: 0 0 var(--tls-m2);
	font-family: var(--tls-figure);
	font-size: var(--tls-t1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tls-ink-2);
}

.tl-head h1 {
	margin: 0 0 var(--tls-m2);
	font-family: var(--tls-letter);
	font-size: var(--tls-t6);
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--tls-ink);
}

.tl-head__says {
	margin: 0 0 var(--tls-m3);
	font-size: var(--tls-t4);
	line-height: 1.4;
	color: var(--tls-ink);
}

/* The register: the count, the price of one, and what the count comes to. The same drawing as the
   theme's, off the same tokens. */
.tl-sheet .tl-count {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: stretch;
	margin: 0 0 var(--tls-m3);
	border: 2px solid var(--tls-ink);
	background: var(--tls-paper);
	font-family: var(--tls-figure);
	font-variant-numeric: tabular-nums;
}

.tl-sheet .tl-count__cell {
	display: block;
	padding: var(--tls-m) var(--tls-m2);
	border-left: 1px solid var(--tls-brass);
}

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

.tl-sheet .tl-count__cap {
	display: block;
	font-family: var(--tls-prose);
	font-size: var(--tls-t1);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tls-ink-2);
}

.tl-sheet .tl-count__fig {
	display: block;
	font-size: var(--tls-t4);
	line-height: 1.3;
	color: var(--tls-red);
}

.tl-sheet .tl-count__cell--comes-to { background: var(--tls-field-2); }

.tl-sheet .tl-count__cell--comes-to .tl-count__fig { color: var(--tls-ink); }

/* =================================================================================================
 * 3. The slot the ranking stands in
 *
 * One slot, one shortcode. The gauges bring their own stylesheet and nothing here draws one: this
 * rule sets the room above and below the block and stops there.
 * ============================================================================================== */

.tl-stand { margin: 0 0 var(--tls-m6); }

/* =================================================================================================
 * 4. The contents bar
 * ============================================================================================== */

.tl-index {
	margin: 0 0 var(--tls-m6);
	padding: var(--tls-m2) 0;
	border-top: 1px solid var(--tls-hair-2);
	border-bottom: 1px solid var(--tls-hair-2);
}

.tl-index ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tls-m) var(--tls-m4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-index a {
	display: flex;
	gap: var(--tls-m2);
	align-items: baseline;
	font-size: var(--tls-t2);
	text-decoration: none;
}

.tl-index a:hover,
.tl-index a:focus { text-decoration: underline; }

.tl-index__no {
	min-width: 1.6em;
	font-family: var(--tls-figure);
	font-variant-numeric: tabular-nums;
	color: var(--tls-ink-2);
}

/* =================================================================================================
 * 5. The body
 * ============================================================================================== */

.tl-part { margin: 0 0 var(--tls-m8); }

.tl-part__no {
	margin: 0;
	font-family: var(--tls-figure);
	font-size: var(--tls-t2);
	letter-spacing: 0.08em;
	color: var(--tls-red);
}

.tl-body h2 {
	margin: 0 0 var(--tls-m3);
	padding-bottom: var(--tls-m);
	border-bottom: 2px solid var(--tls-brass);
	font-family: var(--tls-letter);
	font-size: var(--tls-t5);
	line-height: 1.18;
	letter-spacing: -0.008em;
	color: var(--tls-ink);
}

.tl-body h3 {
	margin: var(--tls-m4) 0 var(--tls-m2);
	font-family: var(--tls-letter);
	font-size: var(--tls-t4);
	line-height: 1.3;
	color: var(--tls-ink);
}

.tl-body ul,
.tl-body ol {
	margin: 0 0 var(--tls-m3);
	padding-left: var(--tls-m3);
}

.tl-body li { margin-bottom: var(--tls-m); }

/* A note, ruled down its left edge, which earns it the inset. */
.tl-note {
	margin: var(--tls-m3) 0;
	padding: var(--tls-m2) var(--tls-m2) var(--tls-m);
	border-left: 4px solid var(--tls-brass);
	background: var(--tls-field);
}

.tl-note > :last-child { margin-bottom: var(--tls-m2); }

/* A dimension: a measured quantity between two end marks. */
.tl-sheet .tl-dim {
	margin: var(--tls-m3) 0;
	font-family: var(--tls-figure);
	font-size: var(--tls-t2);
	color: var(--tls-ink);
}

.tl-sheet .tl-dim__fig {
	display: inline-block;
	padding: var(--tls-m) var(--tls-m2);
	border-top: 2px solid var(--tls-brass);
	border-bottom: 2px solid var(--tls-brass);
	background: var(--tls-field);
	font-variant-numeric: tabular-nums;
}

/* =================================================================================================
 * 6. Tables
 * ============================================================================================== */

.tl-table {
	width: 100%;
	margin: var(--tls-m3) 0;
	border-collapse: collapse;
	font-size: var(--tls-t2);
}

.tl-table caption {
	margin-bottom: var(--tls-m);
	font-size: var(--tls-t1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--tls-ink-2);
}

.tl-table th,
.tl-table td {
	padding: var(--tls-m) var(--tls-m2);
	border: 1px solid var(--tls-hair-2);
	text-align: left;
	vertical-align: top;
}

.tl-table thead th {
	border-bottom: 2px solid var(--tls-ink);
	background: var(--tls-field);
	font-family: var(--tls-letter);
	font-weight: 600;
}

.tl-table tbody tr:nth-child(even) { background: var(--tls-field); }

.tl-table .tl-figure,
.tl-table td.tl-figure,
.tl-table th.tl-figure {
	font-family: var(--tls-figure);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The scroll port: the box moves, the document does not. */
.tl-scroll {
	margin: var(--tls-m3) 0;
	overflow-x: auto;
	border: 1px solid var(--tls-hair-2);
}

.tl-scroll .tl-table {
	margin: 0;
	border: 0;
	min-width: 44rem;
}

.tl-scroll .tl-table caption { padding: var(--tls-m) var(--tls-m2) 0; }

/* =================================================================================================
 * 7. Plates
 * ============================================================================================== */

.tl-sheet .tl-plate {
	margin: var(--tls-m6) 0;
	padding: 0;
	border: 2px solid var(--tls-ink);
	background: var(--tls-paper);
}

.tl-sheet .tl-plate img {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid var(--tls-brass);
}

.tl-sheet .tl-plate figcaption {
	padding: var(--tls-m2);
	font-size: var(--tls-t2);
	line-height: 1.5;
	color: var(--tls-ink-2);
}

.tl-sheet .tl-plate figcaption b { color: var(--tls-ink); }

/* =================================================================================================
 * 8. The questions
 * ============================================================================================== */

.tl-ask { margin: 0 0 var(--tls-m8); }

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

dl.tl-ask { margin: 0; }

dl.tl-ask dt {
	margin: 0;
	padding: var(--tls-m2) 0 var(--tls-m);
	border-top: 1px solid var(--tls-hair-2);
	font-family: var(--tls-letter);
	font-size: var(--tls-t4);
	line-height: 1.3;
	color: var(--tls-ink);
}

dl.tl-ask dt:first-child { border-top: 0; padding-top: 0; }

dl.tl-ask dd {
	margin: 0 0 var(--tls-m3);
	padding: 0;
}

/* =================================================================================================
 * 9. The care block
 * ============================================================================================== */

.tl-care {
	margin: 0 0 var(--tls-m6);
	padding: var(--tls-m3) 0;
	border-top: 2px solid var(--tls-ink);
	border-bottom: 2px solid var(--tls-ink);
}

.tl-care h2 {
	margin: 0 0 var(--tls-m2);
	font-family: var(--tls-letter);
	font-size: var(--tls-t4);
	line-height: 1.3;
	color: var(--tls-ink);
}

.tl-care p { margin-bottom: var(--tls-m2); }

.tl-care .tl-18 { margin-right: var(--tls-m); }

.tl-care__help {
	margin-bottom: 0;
	font-size: var(--tls-t2);
	color: var(--tls-ink-2);
}

/* =================================================================================================
 * 10. The colophon
 * ============================================================================================== */

.tl-colophon { margin: 0; }

.tl-colophon ol {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tls-m2);
	margin: 0 0 var(--tls-m3);
	padding: 0;
	list-style: none;
}

.tl-colophon a {
	display: block;
	height: 100%;
	padding: var(--tls-m2);
	border: 1px solid var(--tls-brass);
	background: var(--tls-paper);
	text-decoration: none;
}

.tl-colophon a:hover,
.tl-colophon a:focus { background: var(--tls-field); }

.tl-colophon__name {
	display: block;
	margin-bottom: var(--tls-m);
	font-family: var(--tls-letter);
	font-size: var(--tls-t3);
	color: var(--tls-red);
}

.tl-colophon__says {
	display: block;
	font-size: var(--tls-t2);
	line-height: 1.5;
	color: var(--tls-ink-2);
}

.tl-colophon__ref {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tls-m) var(--tls-m3);
	margin: 0;
	padding-top: var(--tls-m2);
	border-top: 1px solid var(--tls-hair-2);
	font-family: var(--tls-figure);
	font-size: var(--tls-t1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tls-ink-2);
}

/* =================================================================================================
 * 11. The two boundaries. Nothing below touches a horizontal inset or a measure on a block in the
 * flow: what moves is the number of columns in a grid, the height of the lettering and whether a
 * register stacks.
 * ============================================================================================== */

@media (max-width: 1199px) {
	.tl-colophon ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 921px) {
	.tl-sheet {
		--tls-t4: 20px;
		--tls-t5: 26px;
		--tls-t6: 31px;
	}

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

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

	.tl-sheet .tl-count {
		display: grid;
		grid-auto-flow: row;
		width: 100%;
	}

	.tl-sheet .tl-count__cell {
		border-left: 0;
		border-top: 1px solid var(--tls-brass);
	}

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

	.tl-head__says { font-size: var(--tls-t3); }
}

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

	.tl-sheet { color: #000000; font-size: 11pt; }

	.tl-plate,
	.tl-count,
	.tl-table { break-inside: avoid; }
}