/*
 * Style-capability classes (config/style-capabilities.json).
 * Loaded after widget CSS so presets win at equal specificity.
 * Responsive: sv-<cap>-<v> (all), sv-t-<cap>-<v> (≤1024px), sv-m-<cap>-<v> (≤767px).
 * Keep in sync with the JSON — packages/renderer/test/utilities-css.test.ts checks it.
 */

/*
 * Alignment (responsive). --sv-justify lets boxes inside follow it (a Service's icon and link, ADR 0026);
 * --sv-line-margin places an element narrower than its column (Line length, ADR 0091).
 */
.sv-align-start { --sv-justify: start; --sv-line-margin: 0; text-align: start; }
.sv-align-center { --sv-justify: center; --sv-line-margin: auto; text-align: center; }
.sv-align-end { --sv-justify: end; --sv-line-margin: auto 0; text-align: end; }

/*
 * Line length (ADR 0091): a Heading's, Text's or Heading & text's lines no wider than Narrow, Normal, Wide or
 * a px of one's own; the alignment places the shorter box (--sv-line-margin: start, centered or at the end).
 */
.sv-measure-narrow { max-inline-size: 30rem; margin-inline: var(--sv-line-margin, 0); }
.sv-measure-normal { max-inline-size: 40rem; margin-inline: var(--sv-line-margin, 0); }
.sv-measure-wide { max-inline-size: 50rem; margin-inline: var(--sv-line-margin, 0); }
.sv-measure-custom { max-inline-size: var(--sv-custom-measure); margin-inline: var(--sv-line-margin, 0); }

/* Spacing (responsive). Half and full screen (sections only) center the content. */
.sv-pad-none { padding-block: var(--sv-space-none); }
.sv-pad-sm { padding-block: var(--sv-space-sm); }
.sv-pad-md { padding-block: var(--sv-space-md); }
.sv-pad-lg { padding-block: var(--sv-space-lg); }
.sv-pad-xl { padding-block: var(--sv-space-xl); }
.sv-pad-half { display: grid; align-content: center; min-block-size: 50svh; }
.sv-pad-screen { display: grid; align-content: center; min-block-size: 100svh; }
.sv-pad-custom { padding-block: var(--sv-custom-pad); }

/*
 * Height (sections, ADR 0075; responsive): how tall a section is at least. Two classes of specificity so
 * a per-device Spacing (whose min-block-size: 0 ends the older Half/Full screen) never cancels it.
 * Small/Medium/Large are a quarter less on phones (below). A section with a Height places its content
 * with Content position (--sv-place, middle by default).
 */
.sv-section.sv-height-none { min-block-size: 0; }
.sv-section.sv-height-sm { min-block-size: 320px; }
.sv-section.sv-height-md { min-block-size: 480px; }
.sv-section.sv-height-lg { min-block-size: 640px; }
.sv-section.sv-height-half { min-block-size: 50svh; }
.sv-section.sv-height-screen { min-block-size: 100svh; }
.sv-section.sv-height-custom { min-block-size: var(--sv-custom-height); }
.sv-section:is(.sv-height-sm, .sv-height-md, .sv-height-lg, .sv-height-half, .sv-height-screen, .sv-height-custom, .sv-t-height-sm, .sv-t-height-md, .sv-t-height-lg, .sv-t-height-half, .sv-t-height-screen, .sv-t-height-custom, .sv-m-height-sm, .sv-m-height-md, .sv-m-height-lg, .sv-m-height-half, .sv-m-height-screen, .sv-m-height-custom) { display: grid; align-content: var(--sv-place, center); }
.sv-place-top { --sv-place: start; }
.sv-place-middle { --sv-place: center; }
.sv-place-bottom { --sv-place: end; }

/*
 * Space around (sections, ADR 0076; responsive): the section drawn as a box with a gap to the page edges
 * (consecutive boxes share one gap: their margins collapse). Its background, picture and content stay
 * inside, clipped to its rounded corners. Small/Medium/Large are the floating header's gaps; less on phones.
 */
.sv-section.sv-frame-none { margin-block: 0; margin-inline: 0; }
.sv-section.sv-frame-sm { margin-block: 12px; margin-inline: 12px; }
.sv-section.sv-frame-md { margin-block: 20px; margin-inline: 20px; }
.sv-section.sv-frame-lg { margin-block: 32px; margin-inline: 32px; }
.sv-section.sv-frame-custom { margin-block: var(--sv-custom-frame-block); margin-inline: var(--sv-custom-frame-inline); }
.sv-section:is(.sv-frame-sm, .sv-frame-md, .sv-frame-lg, .sv-frame-custom, .sv-t-frame-sm, .sv-t-frame-md, .sv-t-frame-lg, .sv-t-frame-custom, .sv-m-frame-sm, .sv-m-frame-md, .sv-m-frame-lg, .sv-m-frame-custom, .sv-round-sm, .sv-round-md, .sv-round-lg, .sv-round-custom) { overflow: clip; }

/* Space above and Space below (buttons, questions; ADR 0032) */
.sv-above-none { margin-block-start: 0; }
.sv-above-sm { margin-block-start: var(--sv-space-sm); }
.sv-above-md { margin-block-start: var(--sv-space-md); }
.sv-above-lg { margin-block-start: var(--sv-space-lg); }
.sv-above-custom { margin-block-start: var(--sv-custom-above); }
.sv-below-none { margin-block-end: 0; }
.sv-below-sm { margin-block-end: var(--sv-space-sm); }
.sv-below-md { margin-block-end: var(--sv-space-md); }
.sv-below-lg { margin-block-end: var(--sv-space-lg); }
.sv-below-custom { margin-block-end: var(--sv-custom-below); }

/* Vertical alignment of every column in a row (ADR 0025): columns keep their full height and
   move their content (column/style.css reads --sv-column-justify). */
.sv-valign-start { --sv-column-justify: flex-start; }
.sv-valign-center { --sv-column-justify: center; }
.sv-valign-end { --sv-column-justify: flex-end; }

/* Space above and below (headings), ADR 0024 */
.sv-around-none { padding-block: 0; }
.sv-around-md { padding-block: var(--sv-space-sm); }
.sv-around-lg { padding-block: var(--sv-space-md); }
.sv-around-custom { padding-block: var(--sv-custom-around); }

/* Space between items (columns) */
.sv-gap-none { gap: 0; }
.sv-gap-sm { gap: var(--sv-space-xs); }
.sv-gap-md { gap: var(--sv-space-sm); }
.sv-gap-lg { gap: var(--sv-space-md); }
.sv-gap-xl { gap: var(--sv-space-lg); }
.sv-gap-custom { gap: var(--sv-custom-gap); }

/* Space between columns (containers); --sv-colgap for a column that fits its content (ADR 0029) */
.sv-colgap-sm { --sv-colgap: var(--sv-space-sm); column-gap: var(--sv-space-sm); }
.sv-colgap-md { --sv-colgap: var(--sv-space-md); column-gap: var(--sv-space-md); }
.sv-colgap-lg { --sv-colgap: var(--sv-space-lg); column-gap: var(--sv-space-lg); }
.sv-colgap-xl { --sv-colgap: var(--sv-space-xl); column-gap: var(--sv-space-xl); }
.sv-colgap-custom { --sv-colgap: var(--sv-custom-colgap); column-gap: var(--sv-custom-colgap); }
.sv-rowgap-sm { --sv-rowgap: var(--sv-space-sm); }
.sv-rowgap-md { --sv-rowgap: var(--sv-space-md); }
.sv-rowgap-lg { --sv-rowgap: var(--sv-space-lg); }
.sv-rowgap-xl { --sv-rowgap: var(--sv-space-xl); }
.sv-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap); }

/*
 * Overlap the section above (ADR 0101): the section's first row moves up over the section above by this much, in
 * front of it (its own background stays where it is, so the section above shows behind); the section above gets as
 * much room at its foot, so its own words stay clear. Less on phones. Only a section after another one moves.
 */
.sv-overlap-sm { --sv-overlap: 3rem; }
.sv-overlap-md { --sv-overlap: 6rem; }
.sv-overlap-lg { --sv-overlap: 9rem; }

.sv-section + .sv-section:is(.sv-overlap-sm, .sv-overlap-md, .sv-overlap-lg) {
	padding-block-start: 0;
}

.sv-section + .sv-section:is(.sv-overlap-sm, .sv-overlap-md, .sv-overlap-lg) > .sv-container:not(.sv-container ~ .sv-container) {
	position: relative;
	z-index: 2;
	margin-block-start: calc(-1 * var(--sv-overlap));
}

.sv-section:has(+ .sv-overlap-sm) { --sv-overlap-room: 3rem; }
.sv-section:has(+ .sv-overlap-md) { --sv-overlap-room: 6rem; }
.sv-section:has(+ .sv-overlap-lg) { --sv-overlap-room: 9rem; }

.sv-section:has(+ .sv-section:is(.sv-overlap-sm, .sv-overlap-md, .sv-overlap-lg))::after {
	display: block;
	block-size: var(--sv-overlap-room);
	content: "";
}

@media (max-width: 767px) {
	.sv-overlap-sm,
	.sv-section:has(+ .sv-overlap-sm) { --sv-overlap: 2rem; --sv-overlap-room: 2rem; }

	.sv-overlap-md,
	.sv-section:has(+ .sv-overlap-md) { --sv-overlap: 3.5rem; --sv-overlap-room: 3.5rem; }

	.sv-overlap-lg,
	.sv-section:has(+ .sv-overlap-lg) { --sv-overlap: 5rem; --sv-overlap-room: 5rem; }
}

/*
 * Overlap the column beside (ADR 0101): the column reaches over the column before it (after it, when it is the
 * first) by this much, in front of it and centered on it — a box over a picture. On phones, one under another, it
 * overlaps the picture's foot (or top) instead, a little narrower than it.
 */
.sv-cover-sm { --sv-cover: 2rem; }
.sv-cover-md { --sv-cover: 4rem; }
.sv-cover-lg { --sv-cover: 6rem; }
.sv-cover-custom { --sv-cover: var(--sv-custom-cover); }

.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom) {
	position: relative;
	z-index: 1;
	align-self: center;
}

/* Over the space between the columns too (the row's --sv-colgap), so it covers the picture by this much. */
.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):not(:first-child) {
	margin-inline-start: calc(-1 * (var(--sv-cover) + var(--sv-colgap, var(--sv-space-md))));
}

.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):first-child {
	margin-inline-end: calc(-1 * (var(--sv-cover) + var(--sv-colgap, var(--sv-space-md))));
}

@media (max-width: 767px) {
	.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):not(:first-child) {
		margin-block-start: calc(-1 * (var(--sv-cover) + var(--sv-space-md)));
		margin-inline: var(--sv-space-sm);
	}

	.sv-column:is(.sv-cover-sm, .sv-cover-md, .sv-cover-lg, .sv-cover-custom):first-child {
		margin-block-end: calc(-1 * (var(--sv-cover) + var(--sv-space-md)));
		margin-inline: var(--sv-space-sm);
	}
}

/* Background */
.sv-bg-background { background-color: var(--sv-color-background); }
.sv-bg-surface { background-color: var(--sv-color-surface); }
.sv-bg-primary { background-color: var(--sv-color-primary); color: var(--sv-color-on-primary); }
.sv-bg-secondary { background-color: var(--sv-color-secondary); color: var(--sv-color-on-secondary); }
.sv-bg-inverse { background-color: var(--sv-color-inverse); color: var(--sv-color-on-inverse); }
/* A custom color (ADR 0070): with the Dark or Surface background's classes, only the fill is its own. */
.sv-bg-custom { background-color: var(--sv-custom-bg); }

/* Text color */
.sv-color-text { color: var(--sv-color-text); }
.sv-color-muted { color: var(--sv-color-muted); }
.sv-color-primary { color: var(--sv-color-primary); }
.sv-color-secondary { color: var(--sv-color-secondary); }
.sv-color-on-inverse { color: var(--sv-color-on-inverse); }
.sv-color-custom { color: var(--sv-custom-color); }

/* Column arrangement (responsive; the container's layout sets --sv-cols; --sv-fit-on: whether it is used, ADR 0029) */
.sv-cols-keep { --sv-fit-on: 1; display: grid; grid-template-columns: var(--sv-cols); }
.sv-cols-two { --sv-fit-on: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-cols-stack { --sv-fit-on: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-cols-reverse { --sv-fit-on: 0; display: flex; flex-direction: column-reverse; }

/*
 * Arrange (columns, responsive), ADR 0028: one under another (the usual), side by side
 * (wrapping to the next line when there is no room) or a grid. Vertical alignment
 * (--sv-column-justify) places the items vertically; alignment (--sv-justify) places a
 * row's items. In a row, elements fill the space left (text next to an image) while
 * buttons, icons and images fit their content; an element's Width changes it. The flow sets
 * --sv-in-row and --sv-flow-*; an element's own --sv-row-* (never inherited) wins.
 * Width and Height of an element (ADR 0031): it says what it wants across (--sv-w-self) and
 * down (--sv-h-self, --sv-col-grow); the arrangement of its column decides which one
 * align-self takes: across one under another, down in a line or a grid.
 */
@property --sv-row-grow { syntax: "*"; inherits: false; }
@property --sv-row-basis { syntax: "*"; inherits: false; }
@property --sv-row-min { syntax: "*"; inherits: false; }
@property --sv-col-grow { syntax: "*"; inherits: false; }
@property --sv-w-self { syntax: "*"; inherits: false; }
@property --sv-h-self { syntax: "*"; inherits: false; }

.sv-flow-vertical { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: initial; display: flex; flex-flow: column nowrap; align-content: normal; align-items: stretch; justify-content: var(--sv-column-justify, flex-start); }
.sv-flow-horizontal { --sv-in-row: 1; --sv-flow-basis: 0%; --sv-flow-min: 10rem; --sv-row-self: auto; display: flex; flex-flow: row wrap; align-content: var(--sv-column-justify, flex-start); align-items: var(--sv-column-justify, flex-start); justify-content: var(--sv-justify, start); }
.sv-flow-grid2 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
.sv-flow-grid3 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
.sv-flow-grid4 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }


/*
 * A column's items (zero specificity: an element's own sizing wins). Side by side they fit or fill
 * across (Width); one under another, Height Fill shares the column's free height (--sv-col-grow)
 * and Width places them across (align-self).
 */
:where(.sv-column > *) {
	flex-grow: calc(var(--sv-in-row, 0) * var(--sv-row-grow, 1) + (1 - var(--sv-in-row, 0)) * var(--sv-col-grow, 0));
	flex-basis: var(--sv-row-basis, var(--sv-flow-basis, auto));
	align-self: var(--sv-w-self, auto);
	min-inline-size: min(var(--sv-row-min, var(--sv-flow-min, 0px)), 100%);
	max-inline-size: 100%;
}

/*
 * Side by side or in a grid (a Grid's cells too), align-self places an element down: its Height.
 * The usual space above an element (a button's) would push it down.
 */
:where(.sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > * { align-self: var(--sv-h-self, auto); margin-block: 0; }
:where(.sv-container:is(.sv-container--grid-auto, .sv-container--grid-2, .sv-container--grid-3, .sv-container--grid-4) > .sv-column > *) { align-self: var(--sv-h-self, auto); }

/* In a grid, an Image's size slider measures against its cell (elsewhere: against the column). */
:is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > .sv-image { container-type: inline-size; inline-size: auto; }

/*
 * A column's Width and Height in its row (ADR 0029). Width Fit: the row gives it an auto track
 * and it stops being a size container; its images measure against the space it would fill
 * (container/style.css). Height Fit: only as tall as its content; vertical alignment then
 * moves the column.
 */
.sv-colw-fill { container-type: inline-size; }
.sv-colw-fit { container-type: normal; }
.sv-colh-fill { align-self: stretch; }
.sv-colh-fit { align-self: var(--sv-column-justify, flex-start); }

/*
 * Stretch (ADR 0030): the column fills, and what is in it grows to the column. Width: side by side
 * every element fills; buttons and Numbers boxes get the column's width (images keep their Size).
 * Height: the elements share the column's height (a card as tall as the row).
 */
.sv-colw-stretch { container-type: inline-size; }
.sv-colw-stretch > * { --sv-row-grow: 1; --sv-row-basis: 0%; --sv-row-min: initial; }
.sv-colw-stretch > .sv-button .sv-button__control { inline-size: 100%; }
.sv-colw-stretch > .sv-button .sv-button__group { display: flex; }
.sv-colw-stretch > .sv-button .sv-button__group > * { flex: 1 1 0; }
.sv-colh-stretch { align-self: stretch; }
.sv-colh-stretch:not(.sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) > * { flex-grow: 1; }
.sv-colh-stretch:is(.sv-flow-horizontal, .sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4) { align-items: stretch; }

/* In a column that fits its content, "all the space" (image size 10, the Fill shape) is the space
   it would fill. */
.sv-colw-fit :where(.sv-image--size-10:not(.sv-image--aspect-auto), .sv-image--aspect-fill) { inline-size: var(--sv-fit-base, 100cqi); max-inline-size: 100%; }

/*
 * Width and Height of an element (ADR 0031). Width Fit: as wide as its content, placed by its
 * alignment (across one under another, in a grid cell); Fill: the column's width, the cell's, or the
 * space left in a line. Height Fill: the free height of its column (shared with the other Fill
 * elements), the line's or the cell's height; Fit: its content's, placed by Vertical alignment.
 */
.sv-w-fit { --sv-row-grow: 0; --sv-row-basis: auto; --sv-row-min: 0px; --sv-w-self: var(--sv-justify, start); justify-self: var(--sv-justify, start); }
.sv-w-fill { --sv-row-grow: 1; --sv-row-basis: initial; --sv-row-min: initial; --sv-w-self: stretch; justify-self: stretch; }
.sv-h-fit { --sv-col-grow: 0; --sv-h-self: var(--sv-column-justify, flex-start); }
.sv-h-fill { --sv-col-grow: 1; --sv-h-self: stretch; }

/*
 * Cards (columns) and a box around the columns (rows), ADR 0026: the same looks as the
 * ready-made cards (Services). Light looks keep the page's text colors, even inside a dark
 * section; dark and colored ones switch the text colors and the accent (--sv-accent: small
 * labels, icons, text links), and make main buttons light.
 */
:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) {
	padding: var(--sv-space-md);
	border-radius: var(--sv-radius-md);
}

:is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary) {
	padding: var(--sv-space-lg) var(--sv-space-md);
	border-radius: var(--sv-radius-lg);
}

/* A box around inner columns (in a column) has a card's room, not a section's; "Space inside" (sv-inset-*) wins. */
:where(.sv-column) > :is(.sv-box-soft, .sv-box-light, .sv-box-dark, .sv-box-outlined, .sv-box-primary, .sv-box-secondary) {
	padding: var(--sv-space-md);
}

:is(.sv-card-soft, .sv-card-light, .sv-box-soft, .sv-box-light) {
	--sv-color-text: var(--sv-ink);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-color-muted: var(--sv-ink-muted);
	--sv-color-border: var(--sv-ink-border);
	color: var(--sv-color-text);
}

.sv-card-soft { background-color: var(--sv-color-surface); }
.sv-box-soft { background-color: var(--sv-color-surface); }

.sv-card-light { border: 1px solid var(--sv-color-border); background-color: var(--sv-color-background); box-shadow: 0 1px 2px rgb(16 24 40 / 5%); }
.sv-box-light { border: 1px solid var(--sv-color-border); background-color: var(--sv-color-background); box-shadow: 0 1px 2px rgb(16 24 40 / 5%); }

.sv-card-outlined { border: 1px solid var(--sv-color-border); }
.sv-box-outlined { border: 1px solid var(--sv-color-border); }

.sv-card-dark { background-color: var(--sv-color-inverse); }
.sv-box-dark { background-color: var(--sv-color-inverse); }

:is(.sv-card-dark, .sv-box-dark) {
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 78%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: var(--sv-color-on-inverse);
	--sv-button-main-text: var(--sv-color-inverse);
	color: var(--sv-color-text);
}

.sv-card-primary { background-color: var(--sv-color-primary); }
.sv-box-primary { background-color: var(--sv-color-primary); }

:is(.sv-card-primary, .sv-box-primary) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-color-primary);
	color: var(--sv-color-text);
}

.sv-card-secondary { background-color: var(--sv-color-secondary); }
.sv-box-secondary { background-color: var(--sv-color-secondary); }

:is(.sv-card-secondary, .sv-box-secondary) {
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-secondary) 25%, transparent);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-color-secondary);
	color: var(--sv-color-text);
}

/*
 * A custom color (ADR 0070) stands in for a look: dark colors get the Dark look's classes, light ones
 * Soft's, so each element's own touches for those looks apply; the fill is the color (set on the
 * element or its cards). Its text colors are the two the light/dark choice measured — white on dark
 * colors, near-black on light ones — whatever the color scheme (rules after the columns' below).
 */
.sv-card-custom { background-color: var(--sv-custom-card); }
.sv-box-custom { background-color: var(--sv-custom-box); }

/*
 * Glass (ADR 0089): a custom color that blurs what is behind it, only where it is chosen (without the
 * variable there is no filter). Its own: a box inside a glass column doesn't turn glass too.
 */
@property --sv-custom-glass {
	syntax: "*";
	inherits: false;
}

:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom) {
	-webkit-backdrop-filter: var(--sv-custom-glass);
	backdrop-filter: var(--sv-custom-glass);
}

/*
 * A gradient of the site's (ADR 0105) as a custom background: the site's --sv-gradient-<id> over a transparent
 * fill, only on the element that chose it (so it follows Your colors).
 */
@property --sv-custom-gradient {
	syntax: "*";
	inherits: false;
}

:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom)[style*="--sv-custom-gradient"] {
	background-image: var(--sv-custom-gradient);
	/* Under a border too: no strip of its far end at the edges. */
	background-origin: border-box;
}

/* Side line (Quote, Numbers, ADR 0031): a line on the start side, in the accent. */
.sv-card-line {
	padding-inline-start: 1.25rem;
	border-inline-start: 4px solid var(--sv-accent, var(--sv-color-primary));
}

/* When the mouse is over a card: a shadow, or the main or accent color. */
/*
 * Shadow (ADR 0090): under a column, a row's box, an element's own box (`shadow`) or each of its cards
 * that has a look (`cardShadow`); on a picture or a button, under the picture or the button. Feather, Soft,
 * Cloud, or a haze in the accent color — only where chosen, and only its own (--sv-drop doesn't pass to
 * what is inside; --sv-card-drop goes to the element's cards). Glass's light edge (--sv-custom-edge) shares the
 * box-shadow; the hover lift still wins.
 */
@property --sv-drop {
	syntax: "*";
	inherits: false;
}

@property --sv-custom-edge {
	syntax: "*";
	inherits: false;
}

.sv-shadow-feather { --sv-drop: 0 1px 4px rgb(15 23 42 / 4%); }
.sv-shadow-soft { --sv-drop: 0 4px 14px rgb(15 23 42 / 7%); }
.sv-shadow-cloud { --sv-drop: 0 10px 30px rgb(15 23 42 / 8%); }
.sv-shadow-haze { --sv-drop: 0 8px 28px color-mix(in srgb, var(--sv-color-primary) 14%, transparent); }
.sv-cardshadow-feather { --sv-card-drop: 0 1px 4px rgb(15 23 42 / 4%); }
.sv-cardshadow-soft { --sv-card-drop: 0 4px 14px rgb(15 23 42 / 7%); }
.sv-cardshadow-cloud { --sv-card-drop: 0 10px 30px rgb(15 23 42 / 8%); }
.sv-cardshadow-haze { --sv-card-drop: 0 8px 28px color-mix(in srgb, var(--sv-color-primary) 14%, transparent); }

/* Who wears it: the element's own box (a picture or a button: theirs), each card with a look, glass's edge. */
:is(.sv-shadow-feather, .sv-shadow-soft, .sv-shadow-cloud, .sv-shadow-haze):not(.sv-image, .sv-button),
[style*="--sv-custom-edge"] {
	box-shadow: var(--sv-custom-edge, 0 0 #0000), var(--sv-drop, 0 0 #0000);
}

:is(.sv-cardshadow-feather, .sv-cardshadow-soft, .sv-cardshadow-cloud, .sv-cardshadow-haze) :is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-line, .sv-card-primary, .sv-card-secondary, .sv-card-custom) {
	box-shadow: var(--sv-custom-edge, 0 0 #0000), var(--sv-card-drop);
}

:is(.sv-image.sv-shadow-feather .sv-image__frame, .sv-button.sv-shadow-feather .sv-button__control) { box-shadow: 0 1px 4px rgb(15 23 42 / 4%); }
:is(.sv-image.sv-shadow-soft .sv-image__frame, .sv-button.sv-shadow-soft .sv-button__control) { box-shadow: 0 4px 14px rgb(15 23 42 / 7%); }
:is(.sv-image.sv-shadow-cloud .sv-image__frame, .sv-button.sv-shadow-cloud .sv-button__control) { box-shadow: 0 10px 30px rgb(15 23 42 / 8%); }
:is(.sv-image.sv-shadow-haze .sv-image__frame, .sv-button.sv-shadow-haze .sv-button__control) { box-shadow: 0 8px 28px color-mix(in srgb, var(--sv-color-primary) 14%, transparent); }

.sv-cardhover-lift { border-radius: var(--sv-radius-md); transition: box-shadow 0.25s ease, translate 0.25s ease; }
.sv-cardhover-lift:is(:hover, :focus-within) { box-shadow: 0 18px 40px -16px rgb(16 24 40 / 28%), 0 2px 6px rgb(16 24 40 / 6%); translate: 0 -4px; }

.sv-cardhover-primary { border-radius: var(--sv-radius-md); transition: background-color 0.25s ease, color 0.25s ease; }
.sv-cardhover-primary:is(:hover, :focus-within) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-color-primary);
	background-color: var(--sv-color-primary);
	color: var(--sv-color-text);
}

.sv-cardhover-secondary { border-radius: var(--sv-radius-md); transition: background-color 0.25s ease, color 0.25s ease; }
.sv-cardhover-secondary:is(:hover, :focus-within) {
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-color-secondary);
	background-color: var(--sv-color-secondary);
	color: var(--sv-color-text);
}

/* No card style, background or space inside: give the content room before a color fills it (as Services' plain cards). */
:is(.sv-cardhover-primary, .sv-cardhover-secondary, .sv-cardhover-lift):not(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, .sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse, .sv-inset-none, .sv-inset-sm, .sv-inset-md, .sv-inset-lg, .sv-inset-custom) {
	margin: calc(var(--sv-space-sm) * -1);
	padding: var(--sv-space-sm);
}

/* A column's background color (ADR 0026): readable text and accents, as on the cards; it wins over a card's color. */
.sv-column:is(.sv-bg-background, .sv-bg-surface) {
	--sv-color-text: var(--sv-ink);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-color-muted: var(--sv-ink-muted);
	--sv-color-border: var(--sv-ink-border);
	color: var(--sv-color-text);
}

.sv-column.sv-bg-background {
	background-color: var(--sv-color-background);
}

.sv-column.sv-bg-surface {
	background-color: var(--sv-color-surface);
}

.sv-column.sv-bg-inverse {
	background-color: var(--sv-color-inverse);
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 78%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: var(--sv-color-on-inverse);
	--sv-button-main-text: var(--sv-color-inverse);
	color: var(--sv-color-text);
}

.sv-column.sv-bg-primary {
	background-color: var(--sv-color-primary);
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-color-primary);
	color: var(--sv-color-text);
}

.sv-column.sv-bg-secondary {
	background-color: var(--sv-color-secondary);
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-secondary) 25%, transparent);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-color-secondary);
	color: var(--sv-color-text);
}

/* A column's custom background color (ADR 0070): its own fill, after the column's named ones. */
.sv-column.sv-bg-custom {
	background-color: var(--sv-custom-bg);
}

/*
 * Text on custom colors (ADR 0070), after every named look so it wins: white on dark colors, with
 * light main buttons in the color's own text (a color equal to the accent never hides them), and labels,
 * links, icons and outline buttons (--sv-accent) white too; near-black text on light ones, where labels,
 * links and icons keep the site's accent color as on the Soft look (ADR 0090).
 */
:is(.sv-card-custom.sv-card-dark, .sv-box-custom.sv-box-dark, .sv-bg-custom.sv-bg-inverse, .sv-section:has(> .sv-section__bg--text-light), .sv-column:has(> .sv-column__bg--text-light)) {
	--sv-color-text: #fff;
	--sv-color-muted: color-mix(in srgb, #fff 78%, transparent);
	--sv-color-border: color-mix(in srgb, #fff 12%, transparent);
	--sv-accent: #fff;
	--sv-accent-dark: var(--sv-color-primary);
	--sv-button-main-bg: #fff;
	color: var(--sv-color-text);
}

.sv-card-custom.sv-card-dark { --sv-button-main-text: var(--sv-custom-card); }
.sv-box-custom.sv-box-dark { --sv-button-main-text: var(--sv-custom-box); }
.sv-bg-custom.sv-bg-inverse { --sv-button-main-text: var(--sv-custom-bg); }
/* A gradient has no one color: its light main buttons take the site's dark color for their words (ADR 0105). */
:is(.sv-card-custom.sv-card-dark, .sv-box-custom.sv-box-dark, .sv-bg-custom.sv-bg-inverse)[style*="--sv-custom-gradient"] { --sv-button-main-text: var(--sv-color-inverse); }
:is(.sv-section:has(> .sv-section__bg--text-light), .sv-column:has(> .sv-column__bg--text-light)) { --sv-button-main-text: #10131c; }

:is(.sv-card-custom.sv-card-soft, .sv-box-custom.sv-box-soft, .sv-bg-custom.sv-bg-surface, .sv-section:has(> .sv-section__bg--text-dark), .sv-column:has(> .sv-column__bg--text-dark)) {
	--sv-color-text: #10131c;
	--sv-color-muted: color-mix(in srgb, #10131c 72%, transparent);
	--sv-color-border: color-mix(in srgb, #10131c 14%, transparent);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	color: var(--sv-color-text);
}

/*
 * "When the mouse is over it: Accent color" on a card or column with a custom color: the hover's colors win over the
 * custom color's text (above), so it turns white-on-accent like any other card — labels, icons and main buttons in
 * the accent's own text color. The photo looks (Service card on the photo, Team member on the photo) keep their own.
 */
:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom).sv-cardhover-primary:is(:hover, :focus-within):not(.sv-service-card--look-top-open, .sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade, .sv-team-member--arrange-overlay, .sv-image-text--arrange-overlay) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-color-primary);
	color: var(--sv-color-text);
}

:is(.sv-card-custom, .sv-box-custom, .sv-bg-custom).sv-cardhover-secondary:is(:hover, :focus-within):not(.sv-service-card--look-top-open, .sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade, .sv-team-member--arrange-overlay, .sv-image-text--arrange-overlay) {
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-color-secondary);
	color: var(--sv-color-text);
}

/*
 * Main buttons on dark or colored cards, columns and sections are light (--sv-button-main-*, set with
 * the colors above; button/style.css). Outline buttons there get a light hover.
 */
:is(.sv-card-dark, .sv-box-dark, .sv-card-primary, .sv-card-secondary, .sv-box-primary, .sv-box-secondary, .sv-column.sv-bg-inverse, .sv-column.sv-bg-primary, .sv-column.sv-bg-secondary, .sv-section:is(.sv-bg-inverse, .sv-bg-primary, .sv-bg-secondary)) .sv-button--variant-outline {
	--sv-button-hover-bg: color-mix(in srgb, currentColor 15%, transparent);
	--sv-button-hover-line: currentColor;
	--sv-button-hover-text: var(--sv-accent);
}

/* Rounded corners (the site-wide Corners setting scales sm/md/lg), after the boxes and hovers so they win over their corners. */
.sv-round-none { border-radius: 0; }
.sv-round-sm { border-radius: var(--sv-radius-sm); }
.sv-round-md { border-radius: var(--sv-radius-md); }
.sv-round-lg { border-radius: var(--sv-radius-lg); }
.sv-round-full { border-radius: 9999px; }
.sv-round-custom { border-radius: var(--sv-custom-round); }

/* Space inside (columns), after the cards so it wins over their room. */
.sv-inset-none { padding: 0; }
.sv-inset-sm { padding: var(--sv-space-sm); }
.sv-inset-md { padding: var(--sv-space-md); }
.sv-inset-lg { padding: var(--sv-space-lg); }
.sv-inset-custom { padding: var(--sv-custom-inset); }

@media (prefers-reduced-motion: reduce) {
	:is(.sv-cardhover-lift, .sv-cardhover-primary, .sv-cardhover-secondary) {
		transition: none;
	}

	.sv-cardhover-lift:is(:hover, :focus-within) {
		translate: none;
	}
}

/*
 * Text style: one of the site's type styles, with its font — the heading styles in the site's heading
 * font (bold), Body and Small in its body font — so text styled as a heading looks like the site's
 * headings. Line heights follow the language (--sv-leading, core.css).
 */
.sv-type-display { font-family: var(--sv-font-heading); font-size: var(--sv-size-display); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.05 * var(--sv-leading, 1)); }
.sv-type-h1 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h1); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.1 * var(--sv-leading, 1)); }
.sv-type-h2 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h2); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.15 * var(--sv-leading, 1)); }
.sv-type-h3 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h3); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.2 * var(--sv-leading, 1)); }
.sv-type-h4 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h4); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.3 * var(--sv-leading, 1)); }
.sv-type-body { font-family: var(--sv-font-body); font-size: var(--sv-size-body); font-weight: 400; line-height: calc(1.6 * var(--sv-leading-body, 1)); }
.sv-type-small { font-family: var(--sv-font-body); font-size: var(--sv-size-small); font-weight: 400; line-height: calc(1.5 * var(--sv-leading-body, 1)); }
/* A size of one's own (ADR 0082): the element keeps its own font, only the size changes. */
.sv-type-custom { font-size: var(--sv-custom-type); }

/* Weight (ADR 0082), after Text style so it wins over the style's own weight. */
.sv-weight-light { font-weight: 300; }
.sv-weight-normal { font-weight: 400; }
.sv-weight-medium { font-weight: 500; }
.sv-weight-semibold { font-weight: 600; }
.sv-weight-bold { font-weight: 700; }

/* Smaller screens: a padding choice also ends a half/full-screen height set for larger ones. */
@media (max-width: 1024px) {
	.sv-t-align-start { --sv-justify: start; --sv-line-margin: 0; text-align: start; }
	.sv-t-align-center { --sv-justify: center; --sv-line-margin: auto; text-align: center; }
	.sv-t-align-end { --sv-justify: end; --sv-line-margin: auto 0; text-align: end; }

	.sv-t-pad-none { min-block-size: 0; padding-block: var(--sv-space-none); }
	.sv-t-pad-sm { min-block-size: 0; padding-block: var(--sv-space-sm); }
	.sv-t-pad-md { min-block-size: 0; padding-block: var(--sv-space-md); }
	.sv-t-pad-lg { min-block-size: 0; padding-block: var(--sv-space-lg); }
	.sv-t-pad-xl { min-block-size: 0; padding-block: var(--sv-space-xl); }
	.sv-t-pad-half { display: grid; align-content: center; min-block-size: 50svh; }
	.sv-t-pad-screen { display: grid; align-content: center; min-block-size: 100svh; }

	/* Text style per device (ADR 0082). */
	.sv-t-type-display { font-family: var(--sv-font-heading); font-size: var(--sv-size-display); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.05 * var(--sv-leading, 1)); }
	.sv-t-type-h1 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h1); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.1 * var(--sv-leading, 1)); }
	.sv-t-type-h2 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h2); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.15 * var(--sv-leading, 1)); }
	.sv-t-type-h3 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h3); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.2 * var(--sv-leading, 1)); }
	.sv-t-type-h4 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h4); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.3 * var(--sv-leading, 1)); }
	.sv-t-type-body { font-family: var(--sv-font-body); font-size: var(--sv-size-body); font-weight: 400; line-height: calc(1.6 * var(--sv-leading-body, 1)); }
	.sv-t-type-small { font-family: var(--sv-font-body); font-size: var(--sv-size-small); font-weight: 400; line-height: calc(1.5 * var(--sv-leading-body, 1)); }
	.sv-t-type-custom { font-size: var(--sv-custom-type-t); }
	/* A weight chosen for every screen stays. */
	.sv-weight-light { font-weight: 300; }
	.sv-weight-normal { font-weight: 400; }
	.sv-weight-medium { font-weight: 500; }
	.sv-weight-semibold { font-weight: 600; }
	.sv-weight-bold { font-weight: 700; }

	/* Spacing lists per device (ADR 0081): sizes and Custom. */
	.sv-t-pad-custom { min-block-size: 0; padding-block: var(--sv-custom-pad-t); }
	.sv-t-above-none { margin-block-start: 0; }
	.sv-t-above-sm { margin-block-start: var(--sv-space-sm); }
	.sv-t-above-md { margin-block-start: var(--sv-space-md); }
	.sv-t-above-lg { margin-block-start: var(--sv-space-lg); }
	.sv-t-above-custom { margin-block-start: var(--sv-custom-above-t); }
	.sv-t-below-none { margin-block-end: 0; }
	.sv-t-below-sm { margin-block-end: var(--sv-space-sm); }
	.sv-t-below-md { margin-block-end: var(--sv-space-md); }
	.sv-t-below-lg { margin-block-end: var(--sv-space-lg); }
	.sv-t-below-custom { margin-block-end: var(--sv-custom-below-t); }
	.sv-t-around-none { padding-block: 0; }
	.sv-t-around-md { padding-block: var(--sv-space-sm); }
	.sv-t-around-lg { padding-block: var(--sv-space-md); }
	.sv-t-around-custom { padding-block: var(--sv-custom-around-t); }
	.sv-t-gap-none { gap: 0; }
	.sv-t-gap-sm { gap: var(--sv-space-xs); }
	.sv-t-gap-md { gap: var(--sv-space-sm); }
	.sv-t-gap-lg { gap: var(--sv-space-md); }
	.sv-t-gap-xl { gap: var(--sv-space-lg); }
	.sv-t-gap-custom { gap: var(--sv-custom-gap-t); }
	.sv-t-colgap-sm { --sv-colgap: var(--sv-space-sm); column-gap: var(--sv-space-sm); }
	.sv-t-colgap-md { --sv-colgap: var(--sv-space-md); column-gap: var(--sv-space-md); }
	.sv-t-colgap-lg { --sv-colgap: var(--sv-space-lg); column-gap: var(--sv-space-lg); }
	.sv-t-colgap-xl { --sv-colgap: var(--sv-space-xl); column-gap: var(--sv-space-xl); }
	.sv-t-colgap-custom { --sv-colgap: var(--sv-custom-colgap-t); column-gap: var(--sv-custom-colgap-t); }
	.sv-t-rowgap-sm { --sv-rowgap: var(--sv-space-sm); }
	.sv-t-rowgap-md { --sv-rowgap: var(--sv-space-md); }
	.sv-t-rowgap-lg { --sv-rowgap: var(--sv-space-lg); }
	.sv-t-rowgap-xl { --sv-rowgap: var(--sv-space-xl); }
	.sv-t-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap-t); }

	.sv-section.sv-t-height-none { min-block-size: 0; }
	.sv-section.sv-t-height-sm { min-block-size: 320px; }
	.sv-section.sv-t-height-md { min-block-size: 480px; }
	.sv-section.sv-t-height-lg { min-block-size: 640px; }
	.sv-section.sv-t-height-half { min-block-size: 50svh; }
	.sv-section.sv-t-height-screen { min-block-size: 100svh; }
	.sv-section.sv-t-height-custom { min-block-size: var(--sv-custom-height-t); }

	.sv-section.sv-t-frame-none { margin-block: 0; margin-inline: 0; }
	.sv-section.sv-t-frame-sm { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-t-frame-md { margin-block: 20px; margin-inline: 20px; }
	.sv-section.sv-t-frame-lg { margin-block: 32px; margin-inline: 32px; }
	.sv-section.sv-t-frame-custom { margin-block: var(--sv-custom-frame-block-t); margin-inline: var(--sv-custom-frame-inline-t); }

	.sv-t-cols-keep { --sv-fit-on: 1; display: grid; grid-template-columns: var(--sv-cols); }
	.sv-t-cols-two { --sv-fit-on: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-t-cols-stack { --sv-fit-on: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
	.sv-t-cols-reverse { --sv-fit-on: 0; display: flex; flex-direction: column-reverse; }

	.sv-t-flow-vertical { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: initial; display: flex; flex-flow: column nowrap; align-content: normal; align-items: stretch; justify-content: var(--sv-column-justify, flex-start); }
	.sv-t-flow-horizontal { --sv-in-row: 1; --sv-flow-basis: 0%; --sv-flow-min: 10rem; --sv-row-self: auto; display: flex; flex-flow: row wrap; align-content: var(--sv-column-justify, flex-start); align-items: var(--sv-column-justify, flex-start); justify-content: var(--sv-justify, start); }
	.sv-t-flow-grid2 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-t-flow-grid3 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-t-flow-grid4 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	:is(.sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4) > .sv-image { container-type: inline-size; inline-size: auto; }
	:is(.sv-t-flow-vertical, .sv-t-flow-horizontal) > .sv-image { container-type: normal; }
	:is(.sv-t-flow-vertical, .sv-t-flow-horizontal) > .sv-image:not(.sv-image--size-10, .sv-image--aspect-fill) { inline-size: fit-content; }
	:where(.sv-t-flow-vertical) > * { align-self: var(--sv-w-self, auto); }
	:where(.sv-t-flow-horizontal, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4) > * { align-self: var(--sv-h-self, auto); }
}

@media (max-width: 767px) {
	/*
	 * Height on phones (ADR 0075): Small, Medium and Large a quarter less. The tablet choice is restated
	 * after the larger screens' so it still wins on phones; a phone's own choice comes last.
	 */
	.sv-section.sv-height-sm { min-block-size: 240px; }
	.sv-section.sv-height-md { min-block-size: 360px; }
	.sv-section.sv-height-lg { min-block-size: 480px; }
	.sv-section.sv-t-height-none { min-block-size: 0; }
	.sv-section.sv-t-height-sm { min-block-size: 240px; }
	.sv-section.sv-t-height-md { min-block-size: 360px; }
	.sv-section.sv-t-height-lg { min-block-size: 480px; }
	.sv-section.sv-t-height-half { min-block-size: 50svh; }
	.sv-section.sv-t-height-screen { min-block-size: 100svh; }
	.sv-section.sv-t-height-custom { min-block-size: var(--sv-custom-height-t); }
	.sv-section.sv-m-height-none { min-block-size: 0; }
	.sv-section.sv-m-height-sm { min-block-size: 240px; }
	.sv-section.sv-m-height-md { min-block-size: 360px; }
	.sv-section.sv-m-height-lg { min-block-size: 480px; }
	.sv-section.sv-m-height-half { min-block-size: 50svh; }
	.sv-section.sv-m-height-screen { min-block-size: 100svh; }
	.sv-section.sv-m-height-custom { min-block-size: var(--sv-custom-height-m); }

	/* Space around on phones (ADR 0076): smaller; the tablet choice restated so it still wins, the phone's last. */
	.sv-section.sv-frame-sm { margin-block: 8px; margin-inline: 8px; }
	.sv-section.sv-frame-md { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-frame-lg { margin-block: 16px; margin-inline: 16px; }
	.sv-section.sv-t-frame-none { margin-block: 0; margin-inline: 0; }
	.sv-section.sv-t-frame-sm { margin-block: 8px; margin-inline: 8px; }
	.sv-section.sv-t-frame-md { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-t-frame-lg { margin-block: 16px; margin-inline: 16px; }
	.sv-section.sv-t-frame-custom { margin-block: var(--sv-custom-frame-block-t); margin-inline: var(--sv-custom-frame-inline-t); }
	.sv-section.sv-m-frame-none { margin-block: 0; margin-inline: 0; }
	.sv-section.sv-m-frame-sm { margin-block: 8px; margin-inline: 8px; }
	.sv-section.sv-m-frame-md { margin-block: 12px; margin-inline: 12px; }
	.sv-section.sv-m-frame-lg { margin-block: 16px; margin-inline: 16px; }
	.sv-section.sv-m-frame-custom { margin-block: var(--sv-custom-frame-block-m); margin-inline: var(--sv-custom-frame-inline-m); }

	.sv-m-align-start { --sv-justify: start; --sv-line-margin: 0; text-align: start; }
	.sv-m-align-center { --sv-justify: center; --sv-line-margin: auto; text-align: center; }
	.sv-m-align-end { --sv-justify: end; --sv-line-margin: auto 0; text-align: end; }

	.sv-m-pad-none { min-block-size: 0; padding-block: var(--sv-space-none); }
	.sv-m-pad-sm { min-block-size: 0; padding-block: var(--sv-space-sm); }
	.sv-m-pad-md { min-block-size: 0; padding-block: var(--sv-space-md); }
	.sv-m-pad-lg { min-block-size: 0; padding-block: var(--sv-space-lg); }
	.sv-m-pad-xl { min-block-size: 0; padding-block: var(--sv-space-xl); }
	.sv-m-pad-half { display: grid; align-content: center; min-block-size: 50svh; }
	.sv-m-pad-screen { display: grid; align-content: center; min-block-size: 100svh; }

	/* Text style per device (ADR 0082). */
	.sv-m-type-display { font-family: var(--sv-font-heading); font-size: var(--sv-size-display); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.05 * var(--sv-leading, 1)); }
	.sv-m-type-h1 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h1); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.1 * var(--sv-leading, 1)); }
	.sv-m-type-h2 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h2); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.15 * var(--sv-leading, 1)); }
	.sv-m-type-h3 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h3); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.2 * var(--sv-leading, 1)); }
	.sv-m-type-h4 { font-family: var(--sv-font-heading); font-size: var(--sv-size-h4); font-weight: var(--sv-font-heading-weight, 700); font-synthesis-weight: none; letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1)); line-height: calc(1.3 * var(--sv-leading, 1)); }
	.sv-m-type-body { font-family: var(--sv-font-body); font-size: var(--sv-size-body); font-weight: 400; line-height: calc(1.6 * var(--sv-leading-body, 1)); }
	.sv-m-type-small { font-family: var(--sv-font-body); font-size: var(--sv-size-small); font-weight: 400; line-height: calc(1.5 * var(--sv-leading-body, 1)); }
	.sv-m-type-custom { font-size: var(--sv-custom-type-m); }
	/* A weight chosen for every screen stays. */
	.sv-weight-light { font-weight: 300; }
	.sv-weight-normal { font-weight: 400; }
	.sv-weight-medium { font-weight: 500; }
	.sv-weight-semibold { font-weight: 600; }
	.sv-weight-bold { font-weight: 700; }
	.sv-t-type-custom { font-size: var(--sv-custom-type-t); }

	/* The tablet's Custom spacing is restated so it still wins on phones; a phone's own comes last. */
	.sv-t-pad-custom { min-block-size: 0; padding-block: var(--sv-custom-pad-t); }
	.sv-t-above-custom { margin-block-start: var(--sv-custom-above-t); }
	.sv-t-below-custom { margin-block-end: var(--sv-custom-below-t); }
	.sv-t-around-custom { padding-block: var(--sv-custom-around-t); }
	.sv-t-gap-custom { gap: var(--sv-custom-gap-t); }
	.sv-t-colgap-custom { --sv-colgap: var(--sv-custom-colgap-t); column-gap: var(--sv-custom-colgap-t); }
	.sv-t-rowgap-sm { --sv-rowgap: var(--sv-space-sm); }
	.sv-t-rowgap-md { --sv-rowgap: var(--sv-space-md); }
	.sv-t-rowgap-lg { --sv-rowgap: var(--sv-space-lg); }
	.sv-t-rowgap-xl { --sv-rowgap: var(--sv-space-xl); }
	.sv-t-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap-t); }

	/* Spacing lists per device (ADR 0081): sizes and Custom. */
	.sv-m-pad-custom { min-block-size: 0; padding-block: var(--sv-custom-pad-m); }
	.sv-m-above-none { margin-block-start: 0; }
	.sv-m-above-sm { margin-block-start: var(--sv-space-sm); }
	.sv-m-above-md { margin-block-start: var(--sv-space-md); }
	.sv-m-above-lg { margin-block-start: var(--sv-space-lg); }
	.sv-m-above-custom { margin-block-start: var(--sv-custom-above-m); }
	.sv-m-below-none { margin-block-end: 0; }
	.sv-m-below-sm { margin-block-end: var(--sv-space-sm); }
	.sv-m-below-md { margin-block-end: var(--sv-space-md); }
	.sv-m-below-lg { margin-block-end: var(--sv-space-lg); }
	.sv-m-below-custom { margin-block-end: var(--sv-custom-below-m); }
	.sv-m-around-none { padding-block: 0; }
	.sv-m-around-md { padding-block: var(--sv-space-sm); }
	.sv-m-around-lg { padding-block: var(--sv-space-md); }
	.sv-m-around-custom { padding-block: var(--sv-custom-around-m); }
	.sv-m-gap-none { gap: 0; }
	.sv-m-gap-sm { gap: var(--sv-space-xs); }
	.sv-m-gap-md { gap: var(--sv-space-sm); }
	.sv-m-gap-lg { gap: var(--sv-space-md); }
	.sv-m-gap-xl { gap: var(--sv-space-lg); }
	.sv-m-gap-custom { gap: var(--sv-custom-gap-m); }
	.sv-m-colgap-sm { --sv-colgap: var(--sv-space-sm); column-gap: var(--sv-space-sm); }
	.sv-m-colgap-md { --sv-colgap: var(--sv-space-md); column-gap: var(--sv-space-md); }
	.sv-m-colgap-lg { --sv-colgap: var(--sv-space-lg); column-gap: var(--sv-space-lg); }
	.sv-m-colgap-xl { --sv-colgap: var(--sv-space-xl); column-gap: var(--sv-space-xl); }
	.sv-m-colgap-custom { --sv-colgap: var(--sv-custom-colgap-m); column-gap: var(--sv-custom-colgap-m); }
	.sv-m-rowgap-sm { --sv-rowgap: var(--sv-space-sm); }
	.sv-m-rowgap-md { --sv-rowgap: var(--sv-space-md); }
	.sv-m-rowgap-lg { --sv-rowgap: var(--sv-space-lg); }
	.sv-m-rowgap-xl { --sv-rowgap: var(--sv-space-xl); }
	.sv-m-rowgap-custom { --sv-rowgap: var(--sv-custom-rowgap-m); }

	.sv-m-cols-keep { --sv-fit-on: 1; display: grid; grid-template-columns: var(--sv-cols); }
	.sv-m-cols-two { --sv-fit-on: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sv-m-cols-stack { --sv-fit-on: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
	.sv-m-cols-reverse { --sv-fit-on: 0; display: flex; flex-direction: column-reverse; }

	.sv-m-flow-vertical { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: initial; display: flex; flex-flow: column nowrap; align-content: normal; align-items: stretch; justify-content: var(--sv-column-justify, flex-start); }
	.sv-m-flow-horizontal { --sv-in-row: 1; --sv-flow-basis: 0%; --sv-flow-min: 10rem; --sv-row-self: auto; display: flex; flex-flow: row wrap; align-content: var(--sv-column-justify, flex-start); align-items: var(--sv-column-justify, flex-start); justify-content: var(--sv-justify, start); }
	.sv-m-flow-grid2 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-m-flow-grid3 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	.sv-m-flow-grid4 { --sv-in-row: 0; --sv-flow-basis: initial; --sv-flow-min: initial; --sv-row-self: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: var(--sv-column-justify, start); }
	:is(.sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4) > .sv-image { container-type: inline-size; inline-size: auto; }
	:is(.sv-m-flow-vertical, .sv-m-flow-horizontal) > .sv-image { container-type: normal; }
	:is(.sv-m-flow-vertical, .sv-m-flow-horizontal) > .sv-image:not(.sv-image--size-10, .sv-image--aspect-fill) { inline-size: fit-content; }
	:where(.sv-m-flow-vertical) > * { align-self: var(--sv-w-self, auto); }
	:where(.sv-m-flow-horizontal, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4) > * { align-self: var(--sv-h-self, auto); }
}