/*
 * Linnaeus Pricing module styles. Plain CSS, shipped as-is: nothing is compiled at build
 * time or generated at runtime.
 *
 * Neutral and mobile first. Every colour and type choice is a --ckm-price-* custom property
 * the host template sets (brief, Theming). Nothing here is declared on :root, so the
 * template's values win whatever order the stylesheets load in; each property is read once,
 * below, with a neutral fallback, into a private --_ token used by the rest of the file.
 *
 *   --ckm-price-accent            The single accent: category bars, selected states, plan column
 *   --ckm-price-accent-contrast   Text on the accent
 *   --ckm-price-accent-soft       Optional. Tint behind notes and hovers; derived from the accent
 *   --ckm-price-surface           Table and card background
 *   --ckm-price-surface-alt       Column headings, the inclusion grid
 *   --ckm-price-border            Rules and dividers
 *   --ckm-price-text              Body text
 *   --ckm-price-muted             Notes, footnotes, small print
 *   --ckm-price-included          Included state and ticked boxes (defaults to the accent)
 *   --ckm-price-excluded          Excluded state (defaults to muted)
 *   --ckm-price-radius            Corner radius; smaller radii are fractions of it
 *   --ckm-price-font              Type stack (defaults to the template's)
 *   --ckm-price-font-heading      Heading type stack (defaults to --ckm-price-font)
 *   --ckm-price-rem               One design rem (default 16px). Set 1.6rem on a 62.5% html root,
 *                                 or 1rem on a 100% root, to follow the visitor's font size setting.
 *                                 A rem or px length only: em compounds per element, and anything
 *                                 that is not a length drops every size in the file
 *
 * Table cells are reset, so a template's bare table rules (table th, th, td) don't reach them.
 * A template rule aimed at tables that adds a class, pseudo-class or ID still wins.
 *
 * This file can load before the template's, so a template rule as specific as ours wins. The
 * block's own list items, links, headings and buttons are styled more specifically than the
 * element rules a template sets on them (ul li, a:link, h2, button:hover), whatever the order.
 * Editor HTML in the intro and footnote is left to the template.
 *
 * State hooks, per docs/pattern-note.md. The server renders the complete list; the script (#25)
 * (js/site.js) adds .ckm-price--js and data-plan-shown to the block, and
 * .ckm-price__category--collapsed to a category. Every state rule is gated on .ckm-price--js and on screen, so with scripts off, and
 * in print, nothing is hidden. State is matched by position (data-plan-index), never by code.
 */

/* Tokens */

.ckm-price,
.ckm-practices {
	--_accent: var(--ckm-price-accent, #1f2a44);
	--_accent-contrast: var(--ckm-price-accent-contrast, #ffffff);
	--_surface: var(--ckm-price-surface, #ffffff);
	--_surface-alt: var(--ckm-price-surface-alt, #f5f6f8);
	--_border: var(--ckm-price-border, #b7bcc4);
	--_text: var(--ckm-price-text, #111111);
	--_muted: var(--ckm-price-muted, #4a4a4a);
	--_included: var(--ckm-price-included, var(--_accent));
	--_excluded: var(--ckm-price-excluded, var(--_muted));
	--_accent-soft: var(--ckm-price-accent-soft, var(--_surface-alt));
	--_radius: var(--ckm-price-radius, 12px);
	--_rem: var(--ckm-price-rem, 16px);
	--_font-heading: var(--ckm-price-font-heading, var(--ckm-price-font, inherit));

	box-sizing: border-box;
	color: var(--_text);
	font-family: var(--ckm-price-font, inherit);
	line-height: 1.45;
	text-align: start;
	overflow-wrap: anywhere;
}

@supports (background: color-mix(in srgb, currentColor 50%, transparent)) {
	.ckm-price {
		--_accent-soft: var(--ckm-price-accent-soft, color-mix(in srgb, var(--_accent) 8%, var(--_surface)));
	}
}

.ckm-price *,
.ckm-price *::before,
.ckm-price *::after {
	box-sizing: inherit;
}

/* Template-wide table rules (table th, th, td) must not restyle our cells: this beats any
   selector made only of element names. :where() keeps it at one class, so every cell rule
   below still wins on source order. */
.ckm-price__table :where(th, td) {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
}

.ckm-price a {
	color: var(--_accent);
}

.ckm-price a:focus-visible,
.ckm-price button:focus-visible {
	outline: 3px solid var(--_accent);
	outline-offset: 2px;
}

/* Intro and footnote: display-set rich text */

.ckm-price__intro {
	margin: 0 0 calc(1 * var(--_rem));
}

.ckm-price__footnote {
	margin: calc(1 * var(--_rem)) 0 0;
	color: var(--_muted);
	font-size: 0.85em;
}

.ckm-price__intro > :last-child,
.ckm-price__footnote > :last-child {
	margin-bottom: 0;
}

/* Plan switch: phone only, inserted by the script */

.ckm-price__switch {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	margin: 0 0 calc(0.75 * var(--_rem));
	overflow: hidden;
	border: 2px solid var(--_accent);
	border-radius: var(--_radius);
	background: var(--_surface);
}

/* The block class outranks a template's button:hover and button:focus (0,1,1). */
.ckm-price .ckm-price__switch button {
	flex: 1 1 0;
	min-height: 48px;
	padding: calc(0.5 * var(--_rem)) calc(0.375 * var(--_rem));
	border: 0;
	border-radius: 0;
	background: var(--_surface);
	color: var(--_text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.ckm-price .ckm-price__switch button[aria-pressed="true"] {
	background: var(--_accent);
	color: var(--_accent-contrast);
}

.ckm-price .ckm-price__switch button:focus-visible {
	outline-color: currentColor;
	outline-offset: -5px;
}

/* #126: under a template wrapper with overflow: hidden sticky can't work, so the script pins the
   switch to the screen instead, lined up with the block, and the spacer after it holds its place. */
.ckm-price__switch.ckm-price__switch--pinned {
	position: fixed;
	left: var(--_pin-left, 0);
	width: var(--_pin-width, 100%);
	margin: 0;
}

.ckm-price__switch--pinned + .ckm-price__switch-spacer {
	margin: 0 0 calc(0.75 * var(--_rem));
}

/* Most-asked cards */

/* A small label, as the design has it, not a template heading. */
.ckm-price__cards-title {
	margin: 0 0 calc(0.5 * var(--_rem));
	color: var(--_text);
	font-family: var(--_font-heading);
	font-size: calc(0.75 * var(--_rem));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-align: start;
	text-transform: uppercase;
}

/* Fixed column counts (one here, two and three below), so six cards always fill whole rows. */
.ckm-price__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(0.5 * var(--_rem));
	margin: 0 0 calc(1 * var(--_rem));
	padding: 0;
	list-style: none;
}

.ckm-price__card {
	margin: 0;
	padding: 0;
	border: 2px solid var(--_accent);
	border-radius: calc(var(--_radius) * 0.83);
	background: var(--_surface);
	list-style: none;
}

.ckm-price__card-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(0.25 * var(--_rem)) calc(0.5 * var(--_rem));
	min-height: 48px;
	padding: calc(0.75 * var(--_rem)) calc(0.875 * var(--_rem));
	border-radius: inherit;
}

/* Outranks a template's a:link and a:hover (0,1,1). */
.ckm-price a.ckm-price__card-link {
	color: inherit;
	text-decoration: none;
}

.ckm-price__card-link:hover {
	background: var(--_accent-soft);
}

.ckm-price__card-label {
	flex: 1 1 calc(10 * var(--_rem));
	font-weight: 600;
}

.ckm-price__card .ckm-price__figure {
	font-size: calc(1.125 * var(--_rem));
}

.ckm-price__card-plan {
	font-size: calc(0.75 * var(--_rem));
	font-weight: 600;
}

/* Category */

.ckm-price__category {
	position: relative;
	margin: 0 0 calc(0.75 * var(--_rem));
	overflow: hidden;
	overflow: clip;
	border: 2px solid var(--_accent);
	border-radius: var(--_radius);
	background: var(--_surface);
}

.ckm-price__category-title {
	display: flex;
	align-items: center;
	min-height: 48px;
	margin: 0;
	padding: calc(0.75 * var(--_rem)) calc(0.875 * var(--_rem));
	background: var(--_accent);
	color: var(--_accent-contrast);
	font-family: var(--_font-heading);
	font-size: calc(1 * var(--_rem));
	font-weight: 700;
	line-height: 1.3;
	text-align: start;
}

.ckm-price__category-title:has(> .ckm-price__toggle) {
	padding: 0;
}

/* The block class outranks a template's button:hover and button:focus (0,1,1). */
.ckm-price .ckm-price__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(0.5 * var(--_rem));
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: calc(0.75 * var(--_rem)) calc(0.875 * var(--_rem));
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ckm-price__toggle::after {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.55em;
	margin: 0 0.25em 0.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s;
}

.ckm-price__toggle[aria-expanded="true"]::after {
	margin-bottom: -0.2em;
	transform: rotate(-135deg);
}

.ckm-price .ckm-price__toggle:focus-visible {
	outline-color: currentColor;
	outline-offset: -5px;
}

.ckm-price__category-note {
	margin: 0;
	padding: calc(0.5 * var(--_rem)) calc(0.875 * var(--_rem));
	border-bottom: 1.5px solid var(--_border);
	background: var(--_accent-soft);
	font-size: 0.85em;
	font-weight: 600;
}

/* The caption repeats the heading, for screen readers: hidden visually, never display: none.
   So is the live region the script adds (#129), which a screen reader only hears. */
.ckm-price__caption,
.ckm-price__announce,
.ckm-price__table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Table, phone layout: one row per block, plans stacked, each labelled from data-label */

.ckm-price__table {
	display: block;
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.ckm-price__table tbody,
.ckm-price__table tr,
.ckm-price__table th {
	display: block;
}

.ckm-price__row {
	padding: calc(0.75 * var(--_rem)) calc(0.875 * var(--_rem));
}

/* A jump to a row or a category stops clear of the sticky plan switch and column headings. */
.ckm-price__row,
.ckm-price__category {
	scroll-margin-top: calc(4.5 * var(--_rem));
}

.ckm-price__row + .ckm-price__row {
	border-top: 1.5px solid var(--_border);
}

.ckm-price__service {
	padding: 0;
	font-weight: 400;
	text-align: left;
}

.ckm-price__name {
	display: block;
	font-weight: 600;
}

.ckm-price__summary,
.ckm-price__partner,
.ckm-price__note,
.ckm-price__link {
	display: block;
	margin-top: calc(0.125 * var(--_rem));
	font-size: 0.85em;
}

.ckm-price__summary,
.ckm-price__note {
	color: var(--_muted);
}

/* The accent outranks a template's a:link. The underline is the template's: it marks a link
   in running text. */
.ckm-price .ckm-price__partner a,
.ckm-price .ckm-price__link a {
	color: var(--_accent);
	font-weight: 700;
}

.ckm-price__cell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: calc(0.75 * var(--_rem));
	padding: calc(0.375 * var(--_rem)) 0 0;
}

.ckm-price__cell::before {
	content: attr(data-label);
	grid-column: 1;
	color: var(--_muted);
	font-size: 0.85em;
}

/* Figures and price states. Words, never an icon alone. Every figure rule is inside the block:
   an inline figure (#29) sits in running text and takes the sentence's style. :where() keeps
   the specificity these rules had, so the card and cell rules above still win. */

:where(.ckm-price) .ckm-price__figure {
	grid-column: 2;
	color: var(--_text);
	font-size: calc(1.0625 * var(--_rem));
	font-weight: 800;
	text-align: right;
	white-space: nowrap;
}

.ckm-price__cell:not([data-plan-index="1"]) .ckm-price__figure,
.ckm-price__card .ckm-price__figure:not([data-plan-index="1"]) {
	color: var(--_accent);
}

.ckm-price .ckm-price__figure[data-state="included"] {
	color: var(--_included);
}

.ckm-price .ckm-price__figure[data-state="excluded"] {
	color: var(--_excluded);
	font-weight: 600;
}

:where(.ckm-price) .ckm-price__figure[data-state="poa"] {
	font-weight: 600;
}

:where(.ckm-price) .ckm-price__figure[data-size-band] {
	display: flex;
	grid-column: 1 / -1;
	align-items: baseline;
	justify-content: flex-end;
	gap: calc(0.75 * var(--_rem));
}

.ckm-price__band-label {
	margin-right: auto;
	color: var(--_text);
	font-size: calc(0.85 * var(--_rem));
	font-weight: 400;
	text-align: left;
	white-space: normal;
}

.ckm-price__not-offered {
	display: none;
	grid-column: 1 / -1;
	color: var(--_muted);
	font-size: 0.85em;
	text-align: right;
}

/* Size control: in the row heading, shown only when there is a choice to make */

.ckm-price__sizes {
	min-width: 0;
	margin: calc(0.625 * var(--_rem)) 0 0;
	padding: 0;
	border: 0;
}

.ckm-price__sizes legend {
	margin: 0 0 calc(0.375 * var(--_rem));
	padding: 0;
	font-size: 0.85em;
	font-weight: 700;
}

.ckm-price__sizes label {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-height: 48px;
	margin: 0 calc(0.375 * var(--_rem)) calc(0.375 * var(--_rem)) 0;
	padding: calc(0.375 * var(--_rem)) calc(0.75 * var(--_rem));
	border: 2px solid var(--_accent);
	border-radius: calc(var(--_radius) * 1.17);
	background: var(--_surface);
	color: var(--_text);
	font-size: calc(0.8125 * var(--_rem));
	font-weight: 700;
	line-height: 1.25;
	vertical-align: top;
	cursor: pointer;
}

.ckm-price__sizes input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.ckm-price__sizes label:has(input:checked) {
	background: var(--_accent);
	color: var(--_accent-contrast);
}

.ckm-price__sizes label:has(input:focus-visible) {
	outline: 3px solid var(--_accent);
	outline-offset: 2px;
}

.ckm-price__size-name {
	white-space: nowrap;
}

.ckm-price__size-weight {
	font-size: 0.85em;
	font-weight: 600;
}

.ckm-price__size-weight:empty {
	display: none;
}

/* The page-level size selector, a display-set option: one control above the list for every row */
.ckm-price__size-selector {
	margin: 0 0 calc(1 * var(--_rem));
}

/* Inclusion grid: the tick is decoration, the words carry the meaning */

.ckm-price__inclusions {
	margin-top: calc(0.625 * var(--_rem));
	padding: calc(0.625 * var(--_rem)) calc(0.75 * var(--_rem));
	border: 1.5px solid var(--_border);
	border-radius: calc(var(--_radius) * 0.67);
	background: var(--_surface-alt);
}

.ckm-price__inclusions-title {
	margin: 0 0 calc(0.375 * var(--_rem));
	font-size: calc(0.75 * var(--_rem));
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* One column here, two from 36em. */
.ckm-price__inclusions ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(0.3125 * var(--_rem)) calc(0.875 * var(--_rem));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ckm-price__inclusions li {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: flex-start;
	gap: calc(0.5 * var(--_rem));
	font-size: calc(0.8125 * var(--_rem));
	line-height: 1.4;
}

.ckm-price__inclusions li[data-included="false"] {
	color: var(--_muted);
}

.ckm-price__tick {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(1 * var(--_rem));
	height: calc(1 * var(--_rem));
	margin-top: 0.1em;
	border: 2px solid var(--_border);
	border-radius: calc(var(--_radius) / 4);
	font-size: calc(0.6875 * var(--_rem));
	font-weight: 800;
	line-height: 1;
}

.ckm-price__inclusions li[data-included="true"] .ckm-price__tick {
	border-color: var(--_included);
	background: var(--_included);
	color: var(--_accent-contrast);
}

/* Tablet and up: two cards to a row, a two-column checklist */

@media print, (min-width: 36em) {
	.ckm-price__cards,
	.ckm-price__inclusions ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop, and print: a real table, every plan side by side */

@media print, (min-width: 48em) {
	.ckm-price__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ckm-price__switch {
		display: none;
	}

	/* Every category is its own table. Fixed layout takes the column widths from the headings,
	   which are the same in every table, so the price columns line up down the page. */
	.ckm-price__table {
		display: table;
		table-layout: fixed;
	}

	.ckm-price__table thead {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	.ckm-price__table tbody {
		display: table-row-group;
	}

	.ckm-price__table tr {
		display: table-row;
	}

	.ckm-price__table th,
	.ckm-price__table td {
		display: table-cell;
		padding: calc(0.75 * var(--_rem)) calc(0.875 * var(--_rem));
		vertical-align: top;
	}

	.ckm-price__table thead th {
		position: sticky;
		top: 0;
		z-index: 1;
		padding-block: calc(0.5 * var(--_rem));
		border-bottom: 2px solid var(--_accent);
		background: var(--_surface-alt);
		color: var(--_text);
		font-size: calc(0.75 * var(--_rem));
		font-weight: 700;
		letter-spacing: 0.04em;
		text-align: left;
		text-transform: uppercase;
		vertical-align: bottom;
		overflow-wrap: normal;
	}

	.ckm-price__table thead th[data-plan-index] {
		width: calc(9 * var(--_rem));
		text-align: right;
	}

	.ckm-price__table thead th[data-plan-index]:not([data-plan-index="1"]) {
		color: var(--_accent);
	}

	.ckm-price__cell {
		text-align: right;
		white-space: nowrap;
	}

	.ckm-price__cell::before {
		content: none;
	}

	:where(.ckm-price) .ckm-price__figure {
		display: block;
	}

	:where(.ckm-price) .ckm-price__figure + .ckm-price__figure {
		margin-top: calc(0.25 * var(--_rem));
	}
}

/* Script-on states, on screen only: print always shows the complete list */

@media screen {
	.ckm-price:not(.ckm-price--js) .ckm-price__sizes {
		display: none;
	}

	/* With a page-level selector, the rows' own controls give way to it. */
	.ckm-price--js .ckm-price__size-selector ~ * .ckm-price__row .ckm-price__sizes {
		display: none;
	}

	.ckm-price--js .ckm-price__category--collapsed > .ckm-price__table,
	.ckm-price--js .ckm-price__category--collapsed > .ckm-price__category-note {
		display: none;
	}

	.ckm-price--js .ckm-price__figure[data-size-band]:not(.ckm-price__figure--selected),
	.ckm-price--js .ckm-price__band-label {
		display: none;
	}

	.ckm-price--js .ckm-price__cell:not(:has(.ckm-price__figure--selected)) > .ckm-price__not-offered {
		display: block;
	}
}

/* Phone only: one plan at a time, chosen by the switch */

@media screen and (max-width: 47.99em) {
	/* Extra plans show on desktop only (pattern note, Plan columns). */
	.ckm-price [data-plan-index]:not([data-plan-index="1"]):not([data-plan-index="2"]) {
		display: none;
	}

	.ckm-price--js[data-plan-shown="1"] [data-plan-index]:not([data-plan-index="1"]),
	.ckm-price--js[data-plan-shown="2"] [data-plan-index]:not([data-plan-index="2"]) {
		display: none;
	}

	/* The switch names the plan shown, so the per-cell label goes. */
	.ckm-price--js[data-plan-shown] .ckm-price__cell::before {
		content: none;
	}

	.ckm-price--js .ckm-price__card-plan {
		display: none;
	}

	/* #127: the one plan shown sits on the name's line, above the size chips and the checklist,
	   so the figure a chip changes stays on screen with it. The row heading's contents join the
	   row's grid, and the hidden plans' cells claim no place in it. Scripts off, both plans
	   still show, stacked under the heading. */
	.ckm-price--js .ckm-price__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		column-gap: calc(0.75 * var(--_rem));
	}

	.ckm-price--js .ckm-price__service {
		display: contents;
	}

	.ckm-price--js .ckm-price__service > * {
		grid-column: 1 / -1;
	}

	.ckm-price--js .ckm-price__service > .ckm-price__name {
		grid-column: 1;
		grid-row: 1;
	}

	.ckm-price--js .ckm-price__cell {
		display: block;
		grid-column: 2;
		grid-row: 1;
		max-width: calc(10 * var(--_rem));
		padding: 0;
		text-align: right;
	}
}

@media print {
	.ckm-price__switch,
	.ckm-price__switch-spacer,
	.ckm-price .ckm-price__sizes,
	.ckm-price__not-offered,
	.ckm-price__toggle::after {
		display: none;
	}

	.ckm-price__table thead th {
		position: static;
	}

	.ckm-price__row {
		break-inside: avoid;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ckm-price__toggle::after {
		transition: none;
	}
}

/* Practice chooser (#36): plain links to each practice's band page */

.ckm-practices__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(14 * var(--_rem)), 1fr));
	gap: calc(0.25 * var(--_rem)) calc(1 * var(--_rem));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ckm-practices__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Outranks a template's a:link and a:hover (0,1,1). */
.ckm-practices a.ckm-practices__link {
	display: block;
	padding: calc(0.5 * var(--_rem)) 0;
	border-bottom: 1px solid var(--_border);
	color: var(--_accent);
	font-size: calc(1 * var(--_rem));
	text-decoration: none;
}

.ckm-practices a.ckm-practices__link:hover,
.ckm-practices a.ckm-practices__link:focus-visible {
	text-decoration: underline;
}