/**
 * The questionnaire on a product page.
 *
 * Scoped entirely under .sps-intake so it cannot reach the theme, and built
 * from the theme's own variables with fallbacks so it looks like the shop it
 * is sitting in rather than like a plugin. Blocksy palette roles: colour 3 is
 * body text, 4 is headings, 6 and 7 are BACKGROUNDS — never text.
 */

/* The tokens belong to every piece, not only the form: each of these can be
   placed on its own, in a sidebar or a template, and a piece outside this list
   reads the variables from a scope it is not inside. The failure is silent and
   specific — a colour falls back, but `gap: var(--undefined)` is invalid and
   the gap simply does not happen, which is how the arrow ended up touching the
   words. :where() keeps the specificity at zero, so a theme or a content block
   can still override any of it. */
/* Declared ONCE, on the root.
 *
 * They used to be declared on every one of our blocks, so that each worked
 * standing alone. It did — and it quietly made them unoverridable: `.sps-buy`
 * and `.sps-intake` each got their own copy, and for a custom property the
 * NEAREST declaration wins, so `.sps-page { --sps-bar: 1rem }` was shadowed by
 * a default set further in. The obvious thing to write did nothing at all.
 *
 * One declaration on :root and every selector a site could reach for is
 * nearer than it, so every one of them works. The `--sps-` prefix is what
 * keeps that from being pollution. */
:root {
	--sps-gap: var(--sps-space-m);
	/* Columns sit further apart than rows do: side by side, two fields need
	   the space to read as two. */
	--sps-gap-x: 1.5rem;
	/* The spacing scale is the THEME's, by its own names, the same way the
	   colours already defer to the palette. A site whose theme sets a fluid
	   scale gets padding that grows with the viewport; the fallbacks are for
	   a theme that sets none, and match the values a Utopia-style scale
	   starts from. */
	--sps-space-2xs: var(--space-2xs, 0.25rem);
	--sps-space-xs: var(--space-xs, 0.5rem);
	--sps-space-s: var(--space-s, 0.75rem);
	--sps-space-base: var(--space-base, 1rem);
	--sps-space-m: var(--space-m, 1.25rem);
	--sps-space-l: var(--space-l, 1.5rem);
	--sps-space-xl: var(--space-xl, 2.25rem);
	--sps-space-2xl: var(--space-2xl, 3rem);

	--sps-radius: 0.5rem;
	/* Controls inside the card, so a step tighter than the card itself. */
	--sps-radius-sm: 0.375rem;

	/* The type scale. These were literals in a dozen rules, which is how one
	   of them ends up at 0.9375rem and nobody can say why. */
	--sps-size-xs: 0.75rem;
	--sps-size-sm: 0.8125rem;
	--sps-size: 0.875rem;
	--sps-size-md: 1rem;
	--sps-size-lg: 1.125rem;
	--sps-size-xl: 1.25rem;
	--sps-border: var(--theme-border-color, rgb(16 24 40 / 12%));
	--sps-text: var(--theme-palette-color-3, #33393f);
	--sps-heading: var(--theme-palette-color-4, #1b1f23);
	--sps-muted: color-mix(in srgb, var(--sps-text) 65%, transparent);
	--sps-accent: var(--theme-palette-color-1, #2b6cb0);
	--sps-danger: #b32d2e;
	--sps-field-bg: var(--theme-form-field-background, #fff);
	--sps-surface: var(--theme-palette-color-8, #fff);
	/* How wide the card gets.
	 *
	 * It was 52rem, measured as prose — right when the card held only a single
	 * column of questions, and too narrow now that it holds a header with the
	 * facts beside the name, and field grids two and three across. Roughly a
	 * theme's content width, so in an ordinary content column the card simply
	 * fills it, and in anything wider it stops before it stops being readable.
	 *
	 * A narrower one is still a line of CSS:  .sps-buy { --sps-max: 52rem; }  */
	--sps-max: 80rem;
	/* Wide enough for "Check your answers" to sit on one line beside its
	   number, which is what decides this. */
	--sps-aside: 24rem;

	/* The few sizes a site is likely to disagree with, named so it can say so
	   in one line instead of restating our rule to change one number.
	   Everything left as a literal below is structure — a grid span, a pill,
	   an icon measured in its own text — where a token would be a knob with
	   nothing sensible on the other end of it. */

	/* The service's picture beside its name. Square by default because a logo
	   and a photograph have to sit the same. */
	--sps-intro-image: 3.5rem;
	/* How thick the progress bar is. */
	--sps-bar: 0.25rem;
	/* How much of a long answer is visible before it scrolls. */
	--sps-textarea-min: 6rem;
	/* The rule between the card's body and its footer. A literal, not the
	   theme's `l` step: that step is fluid on themes that set one, and this
	   was 1.5rem before it was a token. Naming a value is not the moment to
	   change it. */
	--sps-footer-gap: 1.5rem;
}

/* The whole page, spaced by its container.

   WordPress's layout stylesheet puts a margin on every DIRECT child of the
   content container — `:is(.is-layout-flow, .is-layout-constrained) > *` with
   `margin-block-end: var(--theme-content-spacing)` — which beat the margins
   these parts set for themselves. One wrapper takes them out of that rule's
   reach, and a gap is the spacing this file uses everywhere else anyway. */
.sps-page {
	display: flex;
	flex-direction: column;
	gap: var(--sps-space-base);
}

/* Inside it, nothing carries its own vertical margin. */
.sps-page > * {
	margin-block: 0;
}

/* --- Breadcrumbs and the way back ---------------------------------------
   A service has no archive of its own, so the list is a page the firm built
   and the plugin has to be told which one. Both of these lead there. */

.sps-crumbs {
	margin-block: 0;
	color: var(--sps-muted);
	font-size: var(--sps-size-sm);
}

.sps-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sps-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sps-crumbs__item + .sps-crumbs__item::before {
	content: "/";
	margin-right: var(--sps-space-xs);
	opacity: 0.5;
}

.sps-crumbs__item a {
	color: inherit;
	text-decoration: none;
}

.sps-crumbs__item a:hover {
	color: var(--sps-text);
	text-decoration: underline;
}

.sps-back {
	margin-block: var(--sps-space-l);
	text-align: center;
}

/* Outlined, and meant to stay that way.
 *
 * It used to carry the theme's `.button` class and hid behind :where() so the
 * theme would win — which on any theme with a filled primary button put a
 * second solid button on a page that already has Add to cart. Leaving is not
 * the thing this page is for. Our own class now, at a specificity a theme's
 * generic link rules do not reach, drawn in the theme's accent so it still
 * belongs to the site. */
.sps-back .sps-back__link {
	padding: var(--sps-space-s) var(--sps-space-l);
	border: 1px solid var(--sps-accent);
	border-radius: var(--sps-radius-sm);
	background: none;
	color: var(--sps-accent);
	font-size: var(--sps-size);
	text-decoration: none;
}

.sps-back .sps-back__link:hover,
.sps-back .sps-back__link:focus-visible {
	background: color-mix(in srgb, var(--sps-accent) 8%, transparent);
	color: var(--sps-accent);
}

/* --- The default page ----------------------------------------------------
   What a service page looks like before anybody builds a template for it.

   One card, in stacked sections: what is being bought, what it asks, what it
   costs. NOT a form beside a sidebar, which is what this used to be — two
   columns say "there are two substantial things here", and a service that
   asks nothing has only one of them, so the layout had a hole in it exactly
   where half the product line lives. Sections cannot fail that way: a header
   and a footer with no body between them is still the same finished card.

   It sits inside whatever content column the theme gives it, and a firm that
   wants a different layout builds a Blocksy content block for the single
   service template instead of unpicking this. */

/* What is being bought, at the top of the sidebar. The picture is an icon
   beside a name — a service page is not a magazine cover. */
.sps-intro {
	display: flex;
	flex-direction: column;
	gap: var(--sps-space-s);
}

/* No radius, no frame: this is the SITE's picture, and how it is cut is their
   design and not ours. Size and fit only — enough that a portrait photograph
   and a square logo sit the same beside a name. A site that wants it rounded,
   bordered or bigger says so in its own stylesheet. */
.sps-intro__image img {
	display: block;
	width: var(--sps-intro-image);
	height: var(--sps-intro-image);
	object-fit: cover;
}

.sps-intro__title {
	margin: 0;
	color: var(--sps-heading);
	font-size: var(--sps-size-lg);
	line-height: 1.3;
}

.sps-intro__lead {
	margin: 0;
	color: var(--sps-muted);
	font-size: var(--sps-size);
}

/* The card's header: what is being bought.
 *
 * Two columns, and this is where they belong — both sides always have
 * something in them, so neither can leave a hole. The identity takes the room
 * it needs; the facts take a fixed measure and no more. */
.sps-buy__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sps-gap-x);
	/* Centred: the facts are a short table beside a name and a sentence, and
	   top-aligning them left the shorter side hanging. */
	align-items: center;
	margin-bottom: var(--sps-space-base);
}

@media (min-width: 48em) {
	.sps-buy__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--sps-aside));
	}

	/* A rule between them rather than a gap alone: the facts are a different
	   kind of thing from the name above them. */
	.sps-buy__facts {
		padding-left: var(--sps-gap-x);
		border-left: 1px solid var(--sps-border);
	}
}

/* The picture beside the name, not above it: the header is a row, and a
   stacked icon pushed the description away from the title it belongs to.
   A grid rather than a flex row so the title and the sentence under it share
   one column beside the picture instead of wrapping under it. */
.sps-buy__ident .sps-intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	row-gap: var(--sps-space-2xs);
	column-gap: var(--sps-space-l);
	align-items: start;
}

.sps-buy__ident .sps-intro__image {
	grid-row: 1 / span 2;
}

.sps-buy__ident .sps-intro__title,
.sps-buy__ident .sps-intro__lead {
	grid-column: 2;
}

/* A header with no picture must not leave its column standing empty. */
.sps-buy__ident .sps-intro:not(:has(.sps-intro__image)) {
	grid-template-columns: minmax(0, 1fr);
}

.sps-buy__ident .sps-intro:not(:has(.sps-intro__image)) .sps-intro__title,
.sps-buy__ident .sps-intro:not(:has(.sps-intro__image)) .sps-intro__lead {
	grid-column: 1;
}

.sps-buy__facts .sps-meta {
	margin: 0;
}

/* Header straight onto footer — a service that asks nothing. The footer's own
   rule and padding are the whole separation; its margin would add a second
   gap on top of the header's. */
.sps-buy__head + .sps-buy__actions {
	margin-top: 0;
}

/* THE FORM IS THE CARD, not the questionnaire inside it: the price and the
   button that moves the customer on are part of the same object as the
   questions, and framing only the questions left the footer stranded on the
   page beside it. */
.sps-buy {
	display: flex;
	flex-direction: column;
	/* No `height: 100%`: nothing stands beside it any more, and filling a
	   column is what stretched a form with no questions to the height of the
	   sidebar it was matching.
	
	   `width: 100%` is not redundant next to max-width: without it the card
	   with no questions came out narrower than the one with them, and those two
	   widths are what this design exists to make identical. */
	width: 100%;
	max-width: var(--sps-max);
	/* No margins: the page wrapper owns the space between its parts, which is
	   the rule everywhere else here. */
	padding: var(--sps-space-xl);
	border: 1px solid var(--sps-border);
	background: var(--sps-surface);
	color: var(--sps-text);
}

.sps-intake {
	display: flex;
	flex-direction: column;
	/* Spacing belongs to the container: the rows carry no margins of their own,
	   so nothing collapses and no theme rule has to be fought. */
	gap: var(--sps-space-l);
}

@media (max-width: 40em) {
	.sps-buy {
		padding: var(--sps-space-l) var(--sps-space-m);
	}
}

/* "Plain" in the block's Styles tab: no frame at all, for a template whose own
   container already provides one. Everything the editor sets — background,
   border, padding, shadow — arrives as an inline style on the same element and
   beats the card above without needing anything here. */
.sps-buy.is-style-plain {
	--sps-max: 100%;

	padding: 0;
	/* Width only, not the shorthand: `border: 0` would also set the STYLE to
	   none, and then a border width set in the editor would arrive as an
	   inline style with nothing to draw. */
	border-width: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* A block deliberately made wide or full-width has been given its width by the
   person placing it; a reading-width cap would quietly take it back. */
.sps-buy.alignwide,
.sps-buy.alignfull {
	--sps-max: 100%;
}

.sps-intake__head {
	display: flex;
	flex-direction: column;
	gap: var(--sps-space-2xs);
}

.sps-intake__title {
	margin: 0;
	color: var(--sps-heading);
	font-size: var(--sps-size-lg);
}

.sps-intake__lead {
	margin: 0;
	color: var(--sps-muted);
	font-size: var(--sps-size);
}

.sps-intake__section {
	margin: var(--sps-space-xs) 0 0;
	padding-top: var(--sps-gap);
	border-top: 1px solid var(--sps-border);
	color: var(--sps-heading);
	font-size: var(--sps-size-md);
}

.sps-intake__note {
	margin: 0;
	color: var(--sps-muted);
	font-size: var(--sps-size);
}

.sps-intake__row {
	display: flex;
	flex-direction: column;
	gap: var(--sps-space-2xs);
}

/* The help text sits under the field, so the boxes of two side-by-side
   questions line up on their own — this used to need the free space pushed
   above the control to achieve the same thing. */

.sps-intake__label {
	color: var(--sps-heading);
	font-size: var(--sps-size);
	font-weight: 600;
}

.sps-intake__req {
	color: var(--sps-danger);
}

.sps-intake__help {
	color: var(--sps-muted);
	font-size: var(--sps-size-sm);
}

.sps-intake__control {
	width: 100%;
	/* Tall enough to hit on a phone without being a button. */
	padding: var(--sps-space-s) var(--sps-space-base);
	border: 1px solid var(--sps-border);
	border-radius: var(--sps-radius-sm);
	background: var(--sps-field-bg);
	color: inherit;
	font: inherit;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sps-intake__control:hover {
	border-color: color-mix(in srgb, var(--sps-text) 30%, transparent);
}

textarea.sps-intake__control {
	min-height: var(--sps-textarea-min);
	resize: vertical;
}

/* Scoped under the container to outrank the theme: Blocksy styles
   `input:is([type="text"]):focus`, which is more specific than a class and a
   pseudo-class on their own, and our hairline lost to its ring. */
.sps-intake .sps-intake__control:focus-visible,
.sps-intake .sps-intake__control:focus {
	border-color: var(--sps-accent);
	outline: 1px solid var(--sps-accent);
	outline-offset: 0;
	box-shadow: none;
}

/* A list of answers, each one a target you can hit — a bare radio with a word
   beside it reads as unfinished, and on a phone it is a 13px tap target. */
.sps-intake__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sps-space-xs);
	padding-top: var(--sps-space-2xs);
}

.sps-intake__choice {
	display: flex;
	align-items: center;
	gap: var(--sps-space-xs);
	flex: 1 1 12rem;
	padding: var(--sps-space-s) var(--sps-space-base);
	border: 1px solid var(--sps-border);
	border-radius: var(--sps-radius-sm);
	background: var(--sps-field-bg);
	cursor: pointer;
	font-size: var(--sps-size);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sps-intake__choice:hover {
	border-color: color-mix(in srgb, var(--sps-accent) 50%, transparent);
}

.sps-intake__choice:has(:checked) {
	border-color: var(--sps-accent);
	background: color-mix(in srgb, var(--sps-accent) 6%, transparent);
}

.sps-intake__choice:focus-within {
	outline: 1px solid var(--sps-accent);
}

.sps-intake__error {
	color: var(--sps-danger);
	font-size: var(--sps-size-sm);
}

/* Empty until something goes wrong, and taking no room until then — a blank
   line above the buy button reads as a mistake. */
.sps-intake__status {
	margin: 0;
	color: var(--sps-muted);
	font-size: var(--sps-size);
}

.sps-intake__status:empty {
	display: none;
}

.sps-intake__status.is-error {
	color: var(--sps-danger);
}

/* Anything the script hides stays hidden.
   The attribute alone is not enough here: a theme's `.button { display:
   inline-block }` is a class selector and beats the browser's own `[hidden]`
   rule, so the buy button appeared on step one and Next survived onto the
   review. Scoping the rule to our own containers wins on specificity without
   reaching for !important. */
.sps-intake [hidden],
.sps-buy [hidden] {
	display: none;
}

/* --- Steps --------------------------------------------------------------
   A long form in front of a payment is abandoned; a short one with a progress
   bar is not. */

.sps-intake__progress {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sps-space-xs) var(--sps-space-base);
	align-items: baseline;
}

.sps-intake__counter,
.sps-intake__percent {
	margin: 0;
	color: var(--sps-muted);
	font-size: var(--sps-size-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sps-intake__bar {
	grid-column: 1 / -1;
	display: block;
	height: var(--sps-bar);
	border-radius: 999px;
	background: var(--sps-border);
	overflow: hidden;
}

.sps-intake__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--sps-accent);
	transition: width 0.3s ease;
}

.sps-step {
	display: flex;
	flex-direction: column;
	gap: var(--sps-gap);
}

.sps-step__title {
	margin: 0;
	color: var(--sps-heading);
	font-size: var(--sps-size-xl);
	font-weight: 600;
	line-height: 1.3;
}

.sps-step__lead {
	margin: 0;
	color: var(--sps-muted);
}

/* The layout is the AUTHOR'S, set per step, not the grid's own guess.
   `repeat(auto-fit, minmax(16rem, 1fr))` put four questions across a wide
   screen, which is a spreadsheet, not a form.

   One column on a phone, always: a 16rem field beside another one on a 360px
   screen is two unusable fields. The columns only appear from --sps-break up,
   which is where there is genuinely room for them. */
.sps-step__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sps-gap) var(--sps-gap-x);
}

@media (min-width: 40em) {
	.sps-step__fields[data-sps-cols="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sps-step__fields[data-sps-cols="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Set on the question, clamped on the server to the columns the step
	   actually has — `span 3` in a two-column grid would invent a third. */
	.sps-step__fields > [data-sps-span="2"] {
		grid-column: span 2;
	}

	.sps-step__fields > [data-sps-span="3"] {
		grid-column: span 3;
	}
}

/* A way out of a form that remembered itself. Quiet: it is for the one person
   in a hundred who wants to begin again, not an instruction to the other
   ninety-nine. */
.sps-intake__reset {
	margin: 0;
}

.sps-intake__reset-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sps-muted);
	cursor: pointer;
	font: inherit;
	font-size: var(--sps-size-sm);
	text-decoration: underline;
}

.sps-intake__reset-btn:hover {
	color: var(--sps-text);
}

/* --- The review ---------------------------------------------------------
   Where a wrong registration number is caught while it is still free to fix. */

.sps-review {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	margin: 0;
	border: 1px solid var(--sps-border);
	border-radius: var(--sps-radius);
}

.sps-review dt,
.sps-review dd {
	margin: 0;
	padding: var(--sps-space-s) var(--sps-space-base);
	border-bottom: 1px solid var(--sps-border);
}

.sps-review dd {
	font-weight: 600;
	text-align: right;
	/* A long answer wraps inside its cell instead of widening the table off
	   the side of a phone. */
	overflow-wrap: anywhere;
}

.sps-review dd.is-empty {
	color: var(--sps-muted);
	font-weight: 400;
}

.sps-review dt:nth-last-of-type(1),
.sps-review dd:nth-last-of-type(1) {
	border-bottom: 0;
}

/* --- The footer ---------------------------------------------------------- */

.sps-buy__actions {
	display: flex;
	align-items: center;
	gap: var(--sps-space-base);
	margin-top: var(--sps-footer-gap);
	padding-top: var(--sps-footer-gap);
	border-top: 1px solid var(--sps-border);
	/* The price sits at one end and the buttons at the other, whatever else is
	   in the row — so a form with no Back and no Next still finishes level. */
	flex-wrap: wrap;
}

/* Back at the far left, the price and the button together at the far right —
   the two are read as one thing ("49,00 € · Next"), so they stay adjacent
   rather than being pushed to opposite ends of the row. */
.sps-buy__actions {
	justify-content: flex-end;
}

.sps-buy__actions .sps-buy__back {
	margin-right: auto;
}

/* When it is the only thing in the form there is nothing above it to rule off,
   and the line read as a divider under an empty box. */
.sps-buy__actions:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* A form with nothing to ask is a price and a button, not a card that fills a
   column.
 *
 * `height: 100%` above is what makes the form and the sidebar finish level,
 * and it is exactly wrong when there is no form: it stretched a single row to
 * the height of whatever stood beside it, which is the empty box a ready-made
 * document showed. Written against the markup rather than a class so it holds
 * wherever the block is placed — a theme's own template puts it in a grid we
 * never see. A browser without :has() keeps today's behaviour, which is plain
 * rather than broken. */
.sps-buy:has(> .sps-buy__actions:first-child) {
	height: auto;
}

/* The buy and Next buttons.
   On the front end these are the THEME's buttons — `button alt`, and
   WooCommerce's `single_add_to_cart_button` — and that is the right look for a
   shop, so this must never win there. :where() keeps it at zero specificity:
   any theme rule, even a bare `.button`, beats it. What it does cover is
   everywhere the theme's stylesheet is not, which is the editor canvas, where
   the buy button drew as a grey 43px browser default. */
:where(.sps-buy__button) {
	padding: var(--sps-space-s) var(--sps-space-l);
	border: 0;
	border-radius: var(--sps-radius-sm);
	background: var(--sps-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

:where(.sps-buy__button):hover {
	background: color-mix(in srgb, var(--sps-accent) 88%, #000);
}

/* An arrow and a word are one control: inline-flex so the theme's button
   padding still applies but the two line up, and the icon never grows with
   the box.

   `:not([hidden])` is not decoration. Giving these a display at all outranked
   the rule that hides them — same specificity, later in the file — so the buy
   button appeared beside Next on step one and Back never went away. A rule
   that sets `display` on something that can be hidden has to say so. */
.sps-buy .sps-buy__back:not( [hidden] ),
.sps-buy .sps-buy__button:not( [hidden] ),
.sps-back .sps-back__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sps-space-xs);
}

.sps-icon {
	flex: 0 0 auto;
	/* Smaller than the line it sits on: this arrow is drawn edge to edge in
	   its viewBox, so at a full 1em it reads larger than the letters. */
	width: 0.8em;
	height: 0.8em;
}

/* Drawn pointing right; the left one is the same path, flipped. */
.sps-icon--left {
	transform: scaleX(-1);
}

.sps-buy__back {
	margin-right: auto;
	border: 0;
	background: none;
	color: var(--sps-muted);
	cursor: pointer;
	font: inherit;
}

.sps-buy__back:hover {
	color: var(--sps-text);
	text-decoration: underline;
}

/* On a phone the footer stacks, and the button that moves the customer on is
   the full width of the card rather than a third of it. */
@media (max-width: 40em) {
	.sps-buy__actions {
		flex-wrap: wrap;
	}

	.sps-buy__actions .sps-buy__button {
		flex: 1 1 100%;
		order: 3;
	}
}

.sps-buy__price {
	display: flex;
	align-items: baseline;
	gap: var(--sps-space-xs);
	line-height: 1.2;
}

.sps-buy__price-label {
	color: var(--sps-muted);
	font-size: var(--sps-size-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- The sidebar pieces --------------------------------------------------
   Separate blocks a firm places in its own template. Styled lightly on
   purpose: the container around them is theirs, and the less we assume about
   it the fewer rules they have to undo. */

.sps-steps {
	display: flex;
	flex-direction: column;
	gap: var(--sps-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sps-steps__button {
	display: flex;
	align-items: center;
	gap: var(--sps-space-s);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sps-muted);
	font: inherit;
	font-size: var(--sps-size);
	text-align: left;
}

/* Only a step already reached can be returned to, so only that one looks
   like it can be pressed. */
.sps-steps__button:not( [disabled] ) {
	color: var(--sps-text);
	cursor: pointer;
}

.sps-steps__number {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
	border: 1px solid var(--sps-border);
	font-size: var(--sps-size);
}

.sps-steps__item.is-current .sps-steps__button {
	color: var(--sps-heading);
	font-weight: 600;
}

.sps-steps__item.is-current .sps-steps__number {
	border-color: var(--sps-accent);
	background: var(--sps-accent);
	color: #fff;
}

.sps-steps__item.is-done .sps-steps__number {
	border-color: var(--sps-accent);
	color: var(--sps-accent);
}

.sps-meta {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	margin: 0;
	font-size: var(--sps-size);
}

.sps-meta__label,
.sps-meta__value {
	margin: 0;
	padding: var(--sps-space-xs) 0;
	/* Dashed: these rule off a short list of facts, not a table. A solid line
	   reads as structure the facts do not have. */
	border-bottom: 1px dashed var(--sps-border);
}

.sps-meta__label {
	color: var(--sps-muted);
}

.sps-meta__value {
	font-weight: 600;
	text-align: right;
}

.sps-meta__label:nth-last-of-type(1),
.sps-meta__value:nth-last-of-type(1) {
	border-bottom: 0;
}