/* =================================================================================================
 * Dyeline Guides 1.0.0, the page furniture for The Spin Sheet.
 *
 * Every page this plugin writes is one sheet of a drawing set. The sheet holds, from the top down:
 * the trail, the title block head, the ranking, the contents bar, the body of numbered parts with
 * the schedules, the plates and the dimensions inside them, the questions, the care note 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, schedules, plates, 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 schedule 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 brief allows: inside a schedule 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 schedule too wide for a phone goes in a .dy-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 height series and the module come from the theme on :root under
 * the --dy- names. The block below is the fallback, so a sheet still reads if the theme is swapped
 * out, and no value in it is invented: each one is the token as astra-child-dyeline/style.css sets
 * it down. This file defines no colour, no face and no spacing of its own.
 *
 * SHARED MARKS. The theme publishes the drawing's own devices for the whole site, so a dimension is
 * drawn one way wherever it appears: .dy-dim, .dy-plate, .dy-note, .dy-leader, .dy-rev and .dy-18.
 * The five a sheet uses are restated here under .dy-sheet, to the same drawing and off the same
 * tokens, for the one reason the fallback block exists: a sheet has to read before the theme lands
 * and if it is ever swapped out. Nothing here draws them differently.
 *
 * .dy-leader is the one a sheet does not use and is therefore not restated. A sheet points at a
 * figure with a dimension or a plate caption rather than with a leader, and a mark copied in
 * against the day somebody might want it is a mark nobody keeps in step.
 * ============================================================================================== */

.dy-sheet {
	/* ---- The sheet and the fields ---- */
	--dys-paper: var(--dy-paper, #FFFFFF);
	--dys-field: var(--dy-field, #E6F3FA);
	--dys-field-2: var(--dy-field-2, #D2E9F5);

	/* ---- The lettering ---- */
	--dys-ink: var(--dy-ink, #07212C);
	--dys-ink-2: var(--dy-ink-2, #3D5A68);

	/* ---- The line work. The bright cyan is barred from text under 24px on a light ground, so
	   nothing in this file sets a sentence, a label or a figure in it. ---- */
	--dys-cyan: var(--dy-cyan, #0096CE);
	--dys-cyan-d: var(--dy-cyan-d, #005E7D);
	--dys-cyan-dd: var(--dy-cyan-dd, #004A63);

	/* ---- The grid hairlines. Barred from text of any size. ---- */
	--dys-grid: var(--dy-grid, #C9E5F3);
	--dys-grid-maj: var(--dy-grid-maj, #7FC2E0);

	/* ---- The three faces and the ISO 3098 height series ---- */
	--dys-letter: var(--dy-letter, "Barlow Semi Condensed", "Helvetica Neue Condensed", "Arial Narrow", Helvetica, Arial, sans-serif);
	--dys-prose: var(--dy-prose, "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	--dys-figure: var(--dy-figure, "B612 Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	--dys-h35: var(--dy-h35, 12px);
	--dys-h50: var(--dy-h50, 17px);
	--dys-h60: var(--dy-h60, 20px);
	--dys-h70: var(--dy-h70, 24px);
	--dys-h100: var(--dy-h100, 34px);
	--dys-h140: var(--dy-h140, 48px);

	/* ---- The module, which is the spacing scale ---- */
	--dys-mod: var(--dy-mod, 8px);
	--dys-zone: var(--dy-zone, 40px);
	--dys-s1: var(--dy-s1, 8px);
	--dys-s2: var(--dy-s2, 16px);
	--dys-s3: var(--dy-s3, 24px);
	--dys-s4: var(--dy-s4, 32px);
	--dys-s5: var(--dy-s5, 48px);
	--dys-s6: var(--dy-s6, 64px);

	/* ---- The drawn marks, held as data URIs by the theme ---- */
	--dys-arrow-l: var(--dy-arrow-l, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7'%3E%3Cpath d='M0 3.5 9 0v7z' fill='%230096CE'/%3E%3C/svg%3E"));
	--dys-arrow-r: var(--dy-arrow-r, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7'%3E%3Cpath d='M9 3.5 0 0v7z' fill='%230096CE'/%3E%3C/svg%3E"));
	--dys-rev-mark: var(--dy-rev-mark, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Cpath d='M13 1.5 24.5 20.5h-23z' stroke='%23005E7D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"));
	--dys-grid-fill: var(
		--dy-grid-fill,
		repeating-linear-gradient(90deg, #C9E5F3 0 1px, transparent 1px 8px),
		repeating-linear-gradient(0deg, #C9E5F3 0 1px, transparent 1px 8px),
		repeating-linear-gradient(90deg, #7FC2E0 0 1px, transparent 1px 40px),
		repeating-linear-gradient(0deg, #7FC2E0 0 1px, transparent 1px 40px)
	);

	/* No width and no inset. The sheet fills the column the theme has already measured, so the left
	   and the right rule of this sheet are the left and the right rule of the header row, the
	   ranking and the title block at the foot of the page. */
	box-sizing: border-box;
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dys-ink);
	font-family: var(--dys-prose);
	font-size: var(--dys-h50);
	line-height: 1.6;
	font-variant-numeric: lining-nums;
}

/* A drawing has no rounded corner, no shadow and nothing floating above anything. */
.dy-sheet *,
.dy-sheet *::before,
.dy-sheet *::after {
	box-sizing: border-box;
	border-radius: var(--dy-radius, 0);
	box-shadow: none;
	text-shadow: none;
}

/* =================================================================================================
 * The gate.
 *
 * Read this before adding anything to the file. Every block that stands in the flow is cleared of a
 * horizontal inset, of a width and of a measure of its own, right here, once. A block added later
 * inherits the rule by standing in one of these places, and the only way to give something an inset
 * is to state it again below at the same weight, which the schedule cell and the plate frame do and
 * nothing else does.
 * ============================================================================================== */
.dy-sheet > *,
.dy-sheet .dy-trail > *,
.dy-sheet .dy-head > *,
.dy-sheet .dy-index > *,
.dy-sheet .dy-body > *,
.dy-sheet .dy-part > *,
.dy-sheet .dy-ask > *,
.dy-sheet .dy-care > *,
.dy-sheet .dy-colophon > * {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	float: none;
}

/* The vertical rhythm between blocks. Whole modules, from the theme. */
.dy-sheet > * + * {
	margin-top: var(--dys-s5);
}

/* =================================================================================================
 * Headings, prose and links.
 *
 * The heading ladder is the lettering height series at one weight throughout, because a drawing
 * letter has one stroke width and headings differ by height alone. Nothing on a sheet is emphasised
 * by making one word heavier than the words beside it.
 * ============================================================================================== */
.dy-sheet h1,
.dy-sheet h2,
.dy-sheet h3,
.dy-sheet h4 {
	font-family: var(--dys-letter);
	font-weight: 600;
	color: var(--dys-ink);
	font-variant-numeric: lining-nums tabular-nums;
	text-wrap: balance;
}

.dy-sheet h1 {
	font-size: var(--dys-h140);
	line-height: 1.04;
	letter-spacing: -0.012em;
	margin: 0 0 var(--dys-s3);
}

.dy-sheet h2 {
	font-size: var(--dys-h100);
	line-height: 1.12;
	letter-spacing: -0.008em;
	margin: 0 0 var(--dys-s2);
}

.dy-sheet h3 {
	font-size: var(--dys-h70);
	line-height: 1.24;
	letter-spacing: -0.004em;
	margin: var(--dys-s4) 0 var(--dys-s2);
}

.dy-sheet h4 {
	font-size: var(--dys-h50);
	line-height: 1.3;
	margin: var(--dys-s3) 0 var(--dys-s1);
}

.dy-sheet p {
	margin: 0 0 var(--dys-s3);
}

/* A quantity in running prose is set in the instrument face, so a figure is read as a measurement
   wherever it stands and lines up with the figure above it in a schedule. */
.dy-sheet .dy-figure {
	font-family: var(--dys-figure);
	font-size: 15px;
	letter-spacing: 0.01em;
	font-variant-numeric: lining-nums tabular-nums;
}

.dy-sheet a {
	color: var(--dys-cyan-d);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.dy-sheet a:hover,
.dy-sheet a:focus-visible {
	color: var(--dys-cyan-dd);
	text-decoration-thickness: 2px;
}

/* Lists. The marker sits inside the content box, so the first character of a bullet stands on the
   sheet's left rule and a wrapped line returns to that same rule. This is why no list in here
   carries a padding on its start edge. */
.dy-sheet .dy-part ul,
.dy-sheet .dy-part ol,
.dy-sheet .dy-care ul,
.dy-sheet .dy-care ol {
	margin: 0 0 var(--dys-s3);
	list-style-position: inside;
}

.dy-sheet .dy-part ul {
	list-style-type: square;
}

.dy-sheet .dy-part li,
.dy-sheet .dy-care li {
	margin: 0 0 var(--dys-s1);
}

.dy-sheet .dy-part li::marker {
	color: var(--dys-cyan-d);
	font-family: var(--dys-figure);
}

/* A caption, which on a drawing is the one place capitals are set: a title-block caption is
   capitals, and a field without one is not a title block. It is never used as a label over a
   heading. */
.dy-sheet .dy-cap {
	display: block;
	margin: 0 0 var(--dys-s1);
	color: var(--dys-ink-2);
	font-family: var(--dys-letter);
	font-size: var(--dys-h35);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* =================================================================================================
 * dy-trail: the sheet reference, three steps. Home, the section, this sheet.
 * ============================================================================================== */
.dy-sheet .dy-trail {
	padding-bottom: var(--dys-s1);
	border-bottom: 1px solid var(--dys-grid-maj);
	color: var(--dys-ink-2);
	font-family: var(--dys-letter);
	font-size: var(--dys-h35);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dy-sheet .dy-trail ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--dys-s2);
	margin: 0;
	list-style: none;
}

/* The separator a drawing uses between a sheet and the set it belongs to. It is drawn in the grid
   line, which carries no information, and the step it stands between is read either side of it. */
.dy-sheet .dy-trail li + li::before {
	content: "/";
	margin-right: var(--dys-s2);
	color: var(--dys-grid-maj);
}

.dy-sheet .dy-trail a {
	color: var(--dys-cyan-d);
	text-decoration: none;
}

.dy-sheet .dy-trail a:hover,
.dy-sheet .dy-trail a:focus-visible {
	text-decoration: underline;
}

.dy-sheet .dy-trail__here {
	color: var(--dys-ink);
}

/* =================================================================================================
 * dy-head: the title block at the head of the sheet.
 *
 * A drawing says what it is before it draws anything: the reference, the title, what was measured
 * and the one figure the sheet turns on. The figure is given as a dimension, because a dimension
 * states a measured quantity and a reader takes it as one.
 *
 * The figure reads after its line and not before it. A sheet whose answer is a nought, and several
 * of them are, puts the reader in front of a blank unless the line that says what was counted has
 * already been read. The dimension stands under the line for that reason.
 * ============================================================================================== */
.dy-sheet .dy-head {
	padding-bottom: var(--dys-s3);
	border-bottom: 2px solid var(--dys-ink);
}

/* The reference line: which sheet this is, which revision, and when it was last checked. */
.dy-sheet .dy-head__ref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dys-s1) var(--dys-s2);
	margin: 0 0 var(--dys-s2);
	color: var(--dys-ink-2);
	font-family: var(--dys-figure);
	font-size: var(--dys-h35);
	letter-spacing: 0.04em;
}

.dy-sheet .dy-head__says {
	margin: 0 0 var(--dys-s2);
	color: var(--dys-ink-2);
}

.dy-sheet .dy-head > :last-child {
	margin-bottom: 0;
}

/* =================================================================================================
 * dy-dim: a dimension.
 *
 * The figure sits in a break in the line, which is how a dimension is written on a drawing. Each
 * half of the line is one 7px strip carrying three layers: the line itself, the arrowhead at the
 * outer end, and the extension tick that closes it off. The halves grow, so the dimension always
 * spans its container and therefore the full measure of the sheet.
 *
 * This is the theme's mark, drawn the theme's way off the theme's tokens. It is restated here so a
 * sheet still carries a dimension before the theme lands or if it is swapped out.
 * ============================================================================================== */
.dy-sheet .dy-dim {
	display: flex;
	align-items: center;
	gap: var(--dys-s1);
	margin: var(--dys-s3) 0;
}

.dy-sheet .dy-dim::before,
.dy-sheet .dy-dim::after {
	content: "";
	flex: 1 1 auto;
	min-width: var(--dys-s3);
	height: 7px;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--dys-cyan), var(--dys-cyan)),
		var(--dys-arrow-l),
		linear-gradient(var(--dys-cyan), var(--dys-cyan));
	background-size: 100% 1px, 9px 7px, 1px 7px;
	background-position: left center, left center, left top;
}

.dy-sheet .dy-dim::after {
	background-image:
		linear-gradient(var(--dys-cyan), var(--dys-cyan)),
		var(--dys-arrow-r),
		linear-gradient(var(--dys-cyan), var(--dys-cyan));
	background-position: left center, right center, right top;
}

/* The figure is not held on one line by force. A dimension usually carries something short, but a
   long one set nowrap pushes the page wider than the phone it is on and gives the whole document a
   sideways scroll, so it wraps when it must and breaks inside a word only as the last resort. */
.dy-sheet .dy-dim__fig {
	flex: 0 1 auto;
	min-width: 0;
	color: var(--dys-ink);
	font-family: var(--dys-figure);
	font-size: var(--dys-h35);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: anywhere;
}

/* The one dimension the head carries is the sheet's answer, so it is lettered at the running height
   rather than at a caption's. */
.dy-sheet .dy-head .dy-dim__fig {
	font-size: var(--dys-h50);
}

/* A revision mark: the triangle a drawing office puts beside an amendment, with the revision in it.
   Outlined in the deep cyan at 7.25 rather than filled in the bright one, so the figure inside
   reads at 16.63 against the paper. The theme's mark, restated for the same reason as the rest. */
.dy-sheet .dy-rev {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 26px;
	height: 22px;
	padding-bottom: 1px;
	background: var(--dys-rev-mark) no-repeat center / 26px 22px;
	color: var(--dys-ink);
	font-family: var(--dys-figure);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	vertical-align: -4px;
}

/* =================================================================================================
 * dy-stand: the slot the ranking stands in.
 *
 * The receipts are printed by the Till Receipts plugin and nothing here touches how one looks. This
 * is an anchor and a place in the flow, with no inset, no ground and no edge of its own.
 * ============================================================================================== */
.dy-sheet .dy-stand {
	display: block;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* =================================================================================================
 * dy-index: the contents bar.
 *
 * The strip a drawing set carries at the head of a sheet, saying what is on it and in what order.
 * Ruled top and bottom in the ink, the parts laid in columns across the full measure, each one
 * numbered the way a drawing numbers its zones. A rule is a border, so the bar costs the block no
 * horizontal room and the first number stands on the sheet's left rule.
 * ============================================================================================== */
.dy-sheet .dy-index {
	padding-top: var(--dys-s2);
	padding-bottom: var(--dys-s2);
	border-top: 1px solid var(--dys-ink);
	border-bottom: 1px solid var(--dys-ink);
}

.dy-sheet .dy-index ol {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dys-s1) var(--dys-s4);
	margin: 0;
	list-style: none;
}

.dy-sheet .dy-index li {
	margin: 0;
	padding-top: var(--dys-s1);
	border-top: 1px solid var(--dys-grid);
}

.dy-sheet .dy-index a {
	display: flex;
	gap: var(--dys-s1);
	align-items: baseline;
	text-decoration: none;
}

.dy-sheet .dy-index a:hover,
.dy-sheet .dy-index a:focus-visible {
	text-decoration: underline;
}

/* The zone number. The instrument face, so the column of numbers can be read straight down. */
.dy-sheet .dy-index__no {
	flex: 0 0 auto;
	color: var(--dys-ink-2);
	font-family: var(--dys-figure);
	font-size: var(--dys-h35);
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

/* =================================================================================================
 * dy-body and dy-part: the numbered parts of the sheet.
 * ============================================================================================== */
.dy-sheet .dy-body {
	display: block;
}

.dy-sheet .dy-body > * + * {
	margin-top: var(--dys-s5);
}

.dy-sheet .dy-part {
	display: block;
	padding-top: var(--dys-s3);
	border-top: 1px solid var(--dys-grid-maj);
}

/* The part number, standing over its heading rather than beside it, so the heading starts on the
   sheet's left rule like everything else. It is lettered at the h2 height in the instrument face,
   which is over 24px and so may be set in the line colour. */
.dy-sheet .dy-part__no {
	margin: 0 0 var(--dys-s1);
	color: var(--dys-cyan-d);
	font-family: var(--dys-figure);
	font-size: var(--dys-h70);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

.dy-sheet .dy-part > :last-child {
	margin-bottom: 0;
}

/* A note: the block a drawing hangs its conditions off. Ruled down the left in the line colour on
   the field ground. The inset is legal because the rule down its edge is there to be seen, and the
   block itself still stands on the sheet's two rules. */
.dy-sheet .dy-note {
	margin: var(--dys-s4) 0;
	padding: var(--dys-s3);
	border-left: 4px solid var(--dys-cyan);
	background-color: var(--dys-field);
	color: var(--dys-ink);
}

.dy-sheet .dy-note > :first-child {
	margin-top: 0;
}

.dy-sheet .dy-note > :last-child {
	margin-bottom: 0;
}

/* =================================================================================================
 * dy-table: the schedule.
 *
 * A drawing states its quantities in a schedule, and a schedule is ruled rather than filled:
 * horizontal lines in the ink separating the entries, hairlines between the columns, and no
 * banding, because a band is decoration and a rule is structure.
 *
 * The theme already rules every table in the content, so what this block adds is the full measure,
 * the loss of the inset on the outermost cells, and the scrolling. A cell may be inset because it
 * has an edge of its own; the first and last cell of a row give that inset up, which puts the words
 * in the first column and the figures in the last one on the sheet's own two rules.
 * ============================================================================================== */
.dy-sheet .dy-table {
	width: 100%;
	margin: 0 0 var(--dys-s3);
	border: 0;
	border-collapse: collapse;
	font-variant-numeric: lining-nums tabular-nums;
}

.dy-sheet .dy-table th,
.dy-sheet .dy-table td {
	padding: var(--dys-s2);
	border: 0;
	border-bottom: 1px solid var(--dys-grid-maj);
	border-left: 1px solid var(--dys-grid-maj);
	text-align: left;
	vertical-align: top;
}

.dy-sheet .dy-table th:first-child,
.dy-sheet .dy-table td:first-child {
	padding-left: 0;
	border-left: 0;
}

.dy-sheet .dy-table th:last-child,
.dy-sheet .dy-table td:last-child {
	padding-right: 0;
}

/* The column headings, lettered the way every other caption on the sheet is and ruled off from the
   entries by the thick line. */
.dy-sheet .dy-table thead th {
	border-bottom: 2px solid var(--dys-ink);
	background: transparent;
	color: var(--dys-ink-2);
	font-family: var(--dys-letter);
	font-size: var(--dys-h35);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dy-sheet .dy-table tbody tr:last-child th,
.dy-sheet .dy-table tbody tr:last-child td {
	border-bottom: 2px solid var(--dys-ink);
}

.dy-sheet .dy-table tbody th {
	font-weight: 600;
}

.dy-sheet .dy-table caption {
	margin-bottom: var(--dys-s1);
	color: var(--dys-ink-2);
	font-family: var(--dys-letter);
	font-size: var(--dys-h35);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

/* A figure in a schedule is set in the instrument face and held on one line, which is what makes a
   column of them readable down and a wide schedule genuinely wide. */
.dy-sheet .dy-table .dy-figure,
.dy-sheet .dy-table td.dy-figure,
.dy-sheet .dy-table th.dy-figure {
	font-family: var(--dys-figure);
	font-size: 15px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* A column heading is lettered one way whatever is under it.
 *
 * The natural thing for a writer to do with a column of figures is to mark the column, heading and
 * all, and marking the heading put it in the instrument face while the heading beside it stayed in
 * the drawing letter. A heading row lettered two ways is the one thing a schedule must not do, and
 * no writer should have to know that the marker belongs on the cells alone. So the heading keeps
 * the caption lettering here, at the same weight as the rule above, and the marker goes on doing
 * its real work: the face and the nowrap on the figures themselves. */
.dy-sheet .dy-table thead th.dy-figure {
	font-family: var(--dys-letter);
	font-size: var(--dys-h35);
	letter-spacing: 0.1em;
	white-space: normal;
}

/* The scroll port.
 *
 * A schedule of five or six columns of figures does not fit a phone and must not be made to: cut
 * the lettering down far enough and the figures stop being readable, which is the one thing a
 * schedule is for. So a wide schedule is wrapped in this, and it is the box that scrolls. The
 * wrapper is a flow block and stands on the sheet's two rules; the schedule inside takes the width
 * its content needs and is never narrower than the wrapper, so the scroll appears exactly when the
 * figures need the room and at no other time. The document itself never moves sideways.
 *
 * The caption rides in the port with the schedule it belongs to, because a caption is part of the
 * table box and nothing can take it out of one without taking its name off the table as well. It is
 * reachable: the reader scrolls it into view with the same gesture that brings the last column in,
 * and at full scroll its end sits on the port's right edge. What it does do is read as cut off
 * while the port is at rest, so **a wrapped schedule is given a short caption**, four or five words
 * that fit the narrowest port. The sentence that needs saying goes in the prose above the schedule,
 * which has the whole measure to say it in.
 */
.dy-sheet .dy-scroll {
	max-width: 100%;
	margin: 0 0 var(--dys-s3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.dy-sheet .dy-scroll > .dy-table {
	width: max-content;
	min-width: 100%;
	margin: 0;
}

/* =================================================================================================
 * dy-plate: a framed drawing area with its caption in a ruled bar at the foot.
 *
 * The frame is the thick line, the grid inside it is the module and the division, and the caption
 * is ruled off from the drawing the way a figure on a sheet is. This is the second of the two
 * places an inset is allowed, and for the stated reason: the frame is an edge a reader can see, so
 * a reader can see why the drawing starts where it does. The frame itself stands on the sheet's two
 * rules, and the border is inside the box, so the plate costs the measure nothing.
 *
 * The drawing is a bare <img> carrying both sizes of the pair in one srcset, with no <picture> and
 * no media query, so the browser picks from sizes and from how dense the screen is.
 * ============================================================================================== */
.dy-sheet .dy-plate {
	margin: var(--dys-s5) 0;
	border: 2px solid var(--dys-ink);
	background-color: var(--dys-paper);
	background-image: var(--dys-grid-fill);
	background-position: left top;
}

.dy-sheet .dy-plate > img,
.dy-sheet .dy-plate > picture,
.dy-sheet .dy-plate > svg,
.dy-sheet .dy-plate > .dy-plate__body {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.dy-sheet .dy-plate > figcaption,
.dy-sheet .dy-plate__cap {
	margin: 0;
	padding: var(--dys-s2) var(--dys-s3);
	border-top: 1px solid var(--dys-ink);
	background-color: var(--dys-field);
	color: var(--dys-ink);
	font-family: var(--dys-letter);
	font-size: var(--dys-h50);
	line-height: 1.4;
}

.dy-sheet .dy-plate figcaption b,
.dy-sheet .dy-plate__cap b {
	font-weight: 600;
}

/* =================================================================================================
 * dy-ask: the questions, as a plain ruled list.
 *
 * A definition list and nothing more: no accordion, no two column band, no panel. Each question
 * carries a rule over it and the answer stands under it in full, which is also the shape the
 * FAQPage block in the page's own structured data describes.
 * ============================================================================================== */
.dy-sheet .dy-ask {
	display: block;
	padding-top: var(--dys-s3);
	border-top: 1px solid var(--dys-grid-maj);
}

.dy-sheet .dy-ask dl {
	margin: 0;
}

.dy-sheet .dy-ask dt {
	margin: var(--dys-s3) 0 var(--dys-s1);
	padding-top: var(--dys-s2);
	border-top: 1px solid var(--dys-grid);
	color: var(--dys-ink);
	font-family: var(--dys-letter);
	font-size: var(--dys-h60);
	font-weight: 600;
	line-height: 1.3;
}

.dy-sheet .dy-ask dt:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.dy-sheet .dy-ask dd {
	margin: 0 0 var(--dys-s3);
	padding: 0;
	color: var(--dys-ink);
}

.dy-sheet .dy-ask > :last-child {
	margin-bottom: 0;
}

/* =================================================================================================
 * dy-care: the care note.
 *
 * Rules and a stamp, not a panel: the note stands on the sheet's two rules like every other block,
 * so nothing in it is pushed in from them. The stamp is an inline object with an edge of its own.
 * ============================================================================================== */
.dy-sheet .dy-care {
	display: block;
	padding-top: var(--dys-s3);
	padding-bottom: var(--dys-s3);
	border-top: 2px solid var(--dys-ink);
	border-bottom: 1px solid var(--dys-grid-maj);
}

.dy-sheet .dy-care h2 {
	font-size: var(--dys-h70);
}

/* The age stamp, drawn as a field being called out: the deep field ground with the ink on it at
   13.23, ruled in the ink. Never the bright cyan, which a figure this small may not be set in. */
.dy-sheet .dy-18 {
	display: inline-block;
	padding: 2px var(--dys-s1);
	border: 1px solid var(--dys-ink);
	background-color: var(--dys-field-2);
	color: var(--dys-ink);
	font-family: var(--dys-figure);
	font-size: var(--dys-h35);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	vertical-align: 1px;
}

.dy-sheet .dy-care__help {
	margin: var(--dys-s2) 0 0;
	color: var(--dys-ink);
	font-family: var(--dys-figure);
	font-size: var(--dys-h50);
}

.dy-sheet .dy-care > :last-child {
	margin-bottom: 0;
}

/* =================================================================================================
 * dy-colophon: the title block at the foot. Where to go next, and what this sheet is.
 * ============================================================================================== */
.dy-sheet .dy-colophon {
	display: block;
	padding-top: var(--dys-s3);
	border-top: 2px solid var(--dys-ink);
}

.dy-sheet .dy-colophon ol {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dys-s3) var(--dys-s4);
	margin: 0 0 var(--dys-s3);
	list-style: none;
}

.dy-sheet .dy-colophon li {
	padding-top: var(--dys-s1);
	border-top: 1px solid var(--dys-grid-maj);
}

.dy-sheet .dy-colophon a {
	display: block;
	text-decoration: none;
}

.dy-sheet .dy-colophon__name {
	display: block;
	color: var(--dys-cyan-d);
	font-family: var(--dys-letter);
	font-size: var(--dys-h60);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.dy-sheet .dy-colophon__says {
	display: block;
	margin-top: 2px;
	color: var(--dys-ink-2);
	font-size: var(--dys-h35);
	line-height: 1.45;
}

.dy-sheet .dy-colophon a:hover .dy-colophon__name,
.dy-sheet .dy-colophon a:focus-visible .dy-colophon__name {
	color: var(--dys-cyan-dd);
	text-decoration-thickness: 2px;
}

/* The sheet's own reference, the way a title block closes a drawing: what it is, who drew it and
   when it was last checked. */
.dy-sheet .dy-colophon__ref {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dys-s1) var(--dys-s2);
	margin: 0;
	padding-top: var(--dys-s2);
	border-top: 1px solid var(--dys-grid-maj);
	color: var(--dys-ink-2);
	font-family: var(--dys-figure);
	font-size: var(--dys-h35);
	letter-spacing: 0.04em;
}

/* =================================================================================================
 * The media queries.
 *
 * Columns, lettering height and the scrolling of a schedule. Not one rule below touches a
 * horizontal padding, a horizontal margin or a max-width on a block in the flow, so the one width
 * holds at 1920, 1440, 1280, 1140, 1024, 921, 768, 544 and 390 alike.
 *
 * The breakpoints are the theme's own ladder, so a sheet and the frame around it change at the same
 * widths rather than a module apart.
 * ============================================================================================== */

@media (max-width: 921px) {
	/* The contents bar and the colophon drop from three columns to two. */
	.dy-sheet .dy-index ol,
	.dy-sheet .dy-colophon ol {
		grid-template-columns: repeat(2, 1fr);
	}

	/* The last resort for a schedule a writer has not wrapped in a .dy-scroll. Turning the schedule
	   itself into a block gives it a scroll port of its own, and the rules above and below it still
	   start and finish on the sheet's two rules. Without this a wide schedule simply overflowed, and
	   a page with one took the whole document sideways with it: the header, the heading and every
	   paragraph came off their left rule together. A schedule already inside a wrapper is a child of
	   that wrapper and is not matched here, so it is not given a second scroll port. */
	.dy-sheet > .dy-table,
	.dy-sheet .dy-body > .dy-table,
	.dy-sheet .dy-part > .dy-table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}
}

@media (max-width: 544px) {
	/* One column. */
	.dy-sheet .dy-index ol,
	.dy-sheet .dy-colophon ol {
		grid-template-columns: 1fr;
	}

	/* The lettering ladder comes down one step, which is what the theme does to h3 at this width. */
	.dy-sheet h1 {
		font-size: var(--dys-h100);
	}

	.dy-sheet h2 {
		font-size: var(--dys-h70);
	}

	.dy-sheet h3 {
		font-size: var(--dys-h60);
	}

	/* The two arms of a dimension have less room than the figure between them on a narrow sheet, so
	   the figure is allowed to take the line and the arms close up either side of it. The dimension
	   is still drawn, and it still spans the full measure. */
	.dy-sheet .dy-dim::before,
	.dy-sheet .dy-dim::after {
		min-width: var(--dys-s2);
	}
}

/* =================================================================================================
 * A sheet printed off.
 * ============================================================================================== */
@media print {
	.dy-sheet {
		font-size: 11pt;
	}

	/* The grid inside a plate is a wet print effect on paper and costs ink for nothing. */
	.dy-sheet .dy-plate {
		background-image: none;
	}

	.dy-sheet .dy-part,
	.dy-sheet .dy-plate,
	.dy-sheet .dy-table,
	.dy-sheet .dy-care {
		break-inside: avoid;
	}

	/* A scroll port cannot be scrolled on paper, so the schedule is let out to its full height. */
	.dy-sheet .dy-scroll {
		overflow-x: visible;
	}
}

/* =================================================================================================
 * Forced colours.
 *
 * The drawn marks and the grid are background images, which this mode throws away, so what would be
 * left as an empty strip is replaced by a border the system draws. The frames, the rules and the
 * lettering are borders and text, so the sheet keeps its structure.
 * ============================================================================================== */
@media (forced-colors: active) {
	.dy-sheet .dy-plate {
		background-image: none;
	}

	/* The triangle is a background image, so the revision is given an edge the system draws and the
	   figure inside it keeps its meaning. */
	.dy-sheet .dy-rev {
		width: auto;
		padding: 0 4px;
		border: 1px solid CanvasText;
		background-image: none;
	}

	.dy-sheet .dy-dim::before,
	.dy-sheet .dy-dim::after {
		height: 0;
		border-top: 1px solid CanvasText;
		background-image: none;
	}

	.dy-sheet .dy-18,
	.dy-sheet .dy-note,
	.dy-sheet .dy-plate > figcaption,
	.dy-sheet .dy-plate__cap {
		border-color: CanvasText;
		background-color: Canvas;
		color: CanvasText;
		forced-color-adjust: none;
	}
}