/* ==========================================================================
   Spec Ticket — the signature component
   Converted from design-reference/showroom-floor.css §10.

   A factory work order: utility face throughout, uppercase labels in muted,
   values in ink on the mono face so the columns line up, hairline rules
   between the three registers, and a perforated edge down the left side drawn
   in CSS. No shadow, 2px radius ceiling, focus by outline only.

   Geometry diverges from the export, which carried no tokens for it. The
   perforation gutter is spacing--40 with the tear line at step--12 rather than
   40px and 18px; the dash cycle is step--4 on, step--12 apart rather than
   3px/9px; the border is a hairline in ink on all four edges rather than 3px
   across the top; and the label column is sized to its content rather than
   pinned at 124px, which also keeps a long label from crowding its value at
   360px. Recorded in design-reference/README.md.
   ========================================================================== */

.tfs-spec-ticket {
	position: relative;
	/*
	 * The ticket is a grid item, and a grid item's automatic minimum size is
	 * its max-content width. The size table below sets `white-space: nowrap`,
	 * so without this the widest row pushed the ticket — and the whole content
	 * column with it — past the viewport at 360px, taking the page title out
	 * the side of the screen. The table scrolls inside itself; it does not get
	 * to resize its container.
	 */
	min-width: 0;
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule-strong);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--30);
	/* Clears the tear line. */
	padding-left: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--utility);
	line-height: 1.4;
}

/* The perforation. A dashed rule inset from the left border, the way a work
   order is torn from its book — drawn, never an image. */
.tfs-spec-ticket::before {
	content: "";
	position: absolute;
	left: var(--wp--custom--step--12);
	top: var(--wp--custom--step--12);
	bottom: var(--wp--custom--step--12);
	width: 1px;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--wp--preset--color--rule) 0 var(--wp--custom--step--4),
		transparent var(--wp--custom--step--4) var(--wp--custom--step--12)
	);
}

.tfs-spec-ticket__title {
	margin: 0 0 var(--wp--custom--step--16);
	padding-bottom: var(--wp--custom--step--16);
	border-bottom: var(--wp--custom--hairline);
	font-size: var(--wp--preset--font-size--utility);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--ink);
}

/* One grid across the whole list, so every value starts on the same line no
   matter how long its label is. */
.tfs-spec-ticket__rows {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--custom--step--12);
	margin: 0;
}

.tfs-spec-ticket__label {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--muted);
}

.tfs-spec-ticket__value {
	margin: 0;
	min-width: 0;
	font-family: var(--wp--preset--font-family--mono);
	/* The mono face does the aligning; the utility tracking would fight it. */
	letter-spacing: normal;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   The size table

   A piece sold in several sizes carries them here instead of a single
   dimensions row. Same register as the rest of the ticket — utility face,
   uppercase muted labels, mono values, hairlines — so it reads as more rows on
   the same work order rather than as a component that wandered in.

   It scrolls inside its own box rather than letting the ticket scroll: four
   columns do not fit 360px, and a ticket that scrolled sideways would take its
   perforated edge with it.
   -------------------------------------------------------------------------- */

.tfs-spec-ticket__sizes {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--utility);
	/* The scroll box is the table itself, so the caption and head come with it. */
	white-space: nowrap;
}

/* It is a focus stop because it scrolls — so it shows a ring like every other
   focus stop on the site. Outline, never shadow. */
.tfs-spec-ticket__sizes:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-spec-ticket__sizes thead th {
	text-align: left;
	padding: 0 var(--wp--preset--spacing--30) var(--wp--custom--step--8) 0;
	border-bottom: var(--wp--custom--hairline);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--muted);
}

.tfs-spec-ticket__sizes tbody th,
.tfs-spec-ticket__sizes tbody td {
	padding: var(--wp--custom--step--12) var(--wp--preset--spacing--30) var(--wp--custom--step--12) 0;
	border-bottom: var(--wp--custom--hairline);
	text-align: left;
	font-weight: 400;
	vertical-align: baseline;
	color: var(--wp--preset--color--ink);
}

/* The size name is the row's label, so it takes the label treatment the
   description list above gives its own — uppercase, tracked, muted. */
.tfs-spec-ticket__sizes tbody th {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--muted);
}

/* Values on the mono face, as everywhere else on the ticket, so prices and
   measurements line up down the column. */
.tfs-spec-ticket__sizes tbody td {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: normal;
	font-variant-numeric: tabular-nums;
}

/* The last row sits on the divider that follows it; two hairlines together
   read as a thicker rule than the ticket uses anywhere. */
.tfs-spec-ticket__sizes tbody tr:last-child th,
.tfs-spec-ticket__sizes tbody tr:last-child td {
	border-bottom: 0;
}

.tfs-spec-ticket__sizes th:last-child,
.tfs-spec-ticket__sizes td:last-child {
	padding-right: 0;
}

.tfs-spec-ticket__divider {
	height: 0;
	margin: var(--wp--custom--step--16) 0;
	border: 0;
	border-top: var(--wp--custom--hairline);
}

.tfs-spec-ticket__floors {
	display: grid;
	gap: var(--wp--custom--step--12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tfs-spec-ticket__floors li {
	margin: 0;
}

/* The stamp. Saddle appears here and on the collection tag, nowhere else —
   and as text it takes `saddle-text`, which clears 4.5:1 on the ticket's
   `surface` ground at 4.81:1 where the decorative value reaches only 3.68:1. */
.tfs-spec-ticket__stamp {
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--saddle-text);
}

@media (max-width: 600px) {
	.tfs-spec-ticket__rows {
		column-gap: var(--wp--custom--step--16);
	}
}

/* A spec ticket is the one thing on this page somebody prints and carries into
   the showroom, so it must not be split across a page break. */
@media print {
	.tfs-spec-ticket {
		break-inside: avoid;
	}
}