/**
 * bpc-flow: the forms' shared look (28 Sep).
 *
 * Ollie: "It's about making the client experience special", and on 28 Sep,
 * "The forms should be modern clean out brand / Clean drop downs etc". So:
 * the answers are written on a line in the display italic; things to tap
 * have a Black hairline, so they are seen as controls; orange only for the
 * progress line, what is chosen, a focused edge and the button. No drop
 * shadows but the open dropdown's small one; no bounce; nothing moves under
 * reduced motion.
 *
 * 20 Oct, the new palette: a form is words, and words are never on the
 * Pearl Grey ground, so every form stands in one Light Grey card (the
 * forms ruling of 13 Oct asks for "a neat card" too). Its controls are the
 * same Light Grey with a Black edge; a row under the pointer is a shade
 * darker (--bpc-card-hover). Until then the questions stood on Paper and
 * the controls were Snow with a Dark Petal hairline. In the portal (21 Oct)
 * the card is White with a fine Light Grey edge and the controls White
 * with an edge of Black at 60% (tokens.css, body.bpc-field-portal).
 *
 * Tokens only (tokens.css and theme.json). Every form adds a small delta in
 * its own block stylesheet.
 */

.bpc-flow {
	--bpc-flow-bar: 4.5rem;
	--bpc-flow-gutter: 1rem;
	position: relative;
	padding: var(--bpc-card-pad-y, 1.25rem) var(--bpc-card-pad-x, 1rem);
	border-radius: var(--bpc-radius);
	background-color: var(--bpc-card);
	color: var(--bpc-type);
}

@media (min-width: 48rem) {
	.bpc-flow {
		padding: var(--bpc-card-pad-y, 2rem) var(--bpc-card-pad-x, 2.5rem);
	}
}

.bpc-flow [hidden] {
	display: none !important;
}

.bpc-flow__form {
	min-width: 0;
}

.bpc-name {
	color: var(--bpc-type-strong);
}

.bpc-flow__mark {
	color: var(--bpc-type);
}

/* Only one of these shows: the words written for a page with the script, or for one without. */
.bpc-flow:not(.is-stepped) .bpc-js-only,
.bpc-flow.is-stepped .bpc-nojs-only {
	display: none !important;
}

/* ---- The running head -------------------------------------------------- */

.bpc-flow__head {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
	padding-block-start: 0.5rem;
	background: var(--bpc-card);
	transition: box-shadow var(--bpc-dur) var(--bpc-ease);
}

.bpc-flow__head.is-stuck {
	box-shadow: 0 1px 0 var(--bpc-shadow);
}

.bpc-flow__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	min-height: 1.75rem;
}

.bpc-flow__title {
	visibility: hidden;
	margin: 0;
	font-family: var(--bpc-font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.2;
	color: var(--bpc-type-display);
	opacity: 0;
	/* It fades out as well as in: hidden only once the fade has finished. */
	transition: opacity var(--bpc-dur) var(--bpc-ease), visibility 0s linear var(--bpc-dur);
}

.bpc-flow__head.is-stuck .bpc-flow__title {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--bpc-dur) var(--bpc-ease), visibility 0s;
}

/*
 * Where the form is, in words: each page's name over its own stretch of
 * the line, the open one in bold, a quiet arrow before the next. It said
 * "1 of 2" until Ollie's "I don't like the 123 look" (12 Oct); the names
 * say how short the form is and what comes next, and the line under them
 * fills orange as far as the page that is open.
 */
.bpc-flow__stages {
	display: grid;
	flex: 1 1 auto;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--bpc-type-quiet);
	white-space: nowrap;
}

.bpc-flow__stages > span {
	padding-inline-end: 0.75rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bpc-flow__stages > span + span::before {
	content: "\2192" / "";
	margin-inline-end: 0.5em;
	font-weight: 400;
	color: var(--bpc-type-quiet);
}

.bpc-flow__stages .is-now {
	font-weight: 600;
	color: var(--bpc-type);
}

.bpc-flow__rule {
	position: relative;
	height: 1px;
	margin-block-start: 0.5rem;
	background: var(--bpc-rule);
}

.bpc-flow__rule span {
	position: absolute;
	inset-block: -0.5px;
	inset-inline-start: 0;
	width: 0;
	background: var(--bpc-accent);
	transition: width var(--bpc-dur-reveal) var(--bpc-ease-out);
}

/* The answers so far: one quiet row that scrolls in itself, never the page. */
.bpc-recall {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
	font-size: 0.875rem;
	color: var(--bpc-type);
}

.bpc-recall.is-scrolled {
	-webkit-mask-image: linear-gradient(to right, transparent, var(--bpc-rule-strong) 2rem);
	mask-image: linear-gradient(to right, transparent, var(--bpc-rule-strong) 2rem);
}

.bpc-recall::-webkit-scrollbar {
	display: none;
}

.bpc-recall li {
	display: flex;
	flex: none;
	align-items: center;
}

.bpc-recall li + li::before {
	content: "·";
	padding-inline: 0.5rem;
	color: var(--bpc-type);
}

.bpc-recall button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: color var(--bpc-dur) var(--bpc-ease), text-decoration-color var(--bpc-dur) var(--bpc-ease);
}

.bpc-recall button:hover {
	color: var(--bpc-type-strong);
	text-decoration-color: var(--bpc-accent);
}

.bpc-recall__label {
	display: none;
}

/* ---- The side column (wide screens) ------------------------------------ */

.bpc-flow__aside {
	margin-block-start: 3rem;
	color: var(--bpc-type);
}

.bpc-flow__aside p {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.55;
}

.bpc-flow__aside .bpc-lockup {
	margin: 0 0 2rem;
	--bpc-lockup-h: 5.5rem;
}

/* The quiet WhatsApp chat link, on Get in touch alone: the glyph and the
 * words at the body size, in the page's own link style — nothing louder. */
.bpc-whatsapp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.bpc-whatsapp-link svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
}

@media (max-width: 63.99rem) {
	.bpc-flow.is-stepped .bpc-flow__aside {
		display: none;
	}
}

@media (min-width: 64rem) {
	.bpc-flow--aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 18rem;
		column-gap: 4rem;
		align-items: start;
	}

	.bpc-flow__aside {
		position: sticky;
		top: 6rem;
		margin: 0;
		padding: 0.5rem 0 0.5rem 2.5rem;
		border-inline-start: 1px solid var(--bpc-rule-strong);
	}

	/* Beside the questions the page's own header is pinned, so the running head is not. */
	.bpc-flow__head {
		position: static;
	}

	.bpc-flow__aside .bpc-recall {
		display: block;
		margin: 0 0 2rem;
		overflow: visible;
		border-block-start: 1px solid var(--bpc-rule);
	}

	.bpc-flow__aside .bpc-recall li {
		display: block;
		border-block-end: 1px solid var(--bpc-rule);
	}

	.bpc-flow__aside .bpc-recall li + li::before {
		content: none;
	}

	.bpc-flow__aside .bpc-recall button {
		display: grid;
		gap: 0.2rem;
		width: 100%;
		padding: 0.75rem 0;
		text-align: start;
		white-space: normal;
	}

	.bpc-flow__aside .bpc-recall__label {
		display: block;
		font-size: 0.6875rem;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--bpc-type-quiet);
	}

	.bpc-flow__aside .bpc-recall__value {
		font-family: var(--bpc-font-display);
		font-size: 1.25rem;
		font-style: italic;
		line-height: 1.25;
		color: var(--bpc-type-strong);
		overflow-wrap: anywhere;
	}
}

/* ---- The questions ----------------------------------------------------- */

.bpc-flow__step {
	min-width: 0;
	margin: 0 0 3.5rem;
}

.bpc-flow.is-stepped .bpc-flow__step {
	margin: 0;
}

.bpc-flow__q {
	max-width: 22ch;
	margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
	font-family: var(--bpc-font-display);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--bpc-type-display);
	text-wrap: balance;
	scroll-margin-top: 7rem;
}

.bpc-flow__q:focus {
	outline: none;
}

.bpc-flow__sub {
	margin: 2.5rem 0 1.5rem;
	font-family: var(--bpc-font-display);
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.2;
	color: var(--bpc-type-display);
}

@media (min-width: 48rem) {
	.bpc-flow__sub {
		font-size: 1.5rem;
	}
}

.bpc-flow__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

@media (prefers-reduced-motion: no-preference) {
	/* backwards, not both: once risen, a step is not left a layer of its own under the bar. */
	.bpc-flow__step.is-entering {
		animation: bpc-flow-rise var(--bpc-dur-slow) var(--bpc-ease-out) backwards;
	}
}

@keyframes bpc-flow-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* ---- Fields: a line to write on ---------------------------------------- */

.bpc-flow__field + .bpc-flow__field {
	margin-block-start: 2rem;
}

.bpc-flow__label {
	display: block;
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--bpc-type);
}

.bpc-flow__opt {
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--bpc-type-quiet);
}

.bpc-flow__input {
	display: block;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.3em 0 0.2em;
	border: 0;
	border-block-end: 1px solid var(--bpc-input-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--bpc-font-display);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	color: var(--bpc-type-strong);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--bpc-dur) var(--bpc-ease), box-shadow var(--bpc-dur) var(--bpc-ease);
}

@media (min-width: 48rem) {
	.bpc-flow__input {
		font-size: 1.875rem;
	}
}

/* An empty field's hint: Black at 65% (4.78:1), so it never reads as an answer (21 Oct). */
.bpc-flow__input::placeholder {
	color: var(--bpc-type-hint);
	opacity: 1;
}

.bpc-flow__input:hover {
	border-block-end-color: var(--bpc-type);
}

/*
 * Focused, the house ring round the line (21 Oct): a Black hairline, the
 * same as every focused thing. Wrong, the line itself doubles to 2px Black,
 * with the message under it, so a field that is wrong and a field being
 * typed in never look alike. Orange measured 2.05:1 here and drew both.
 */
.bpc-flow .bpc-flow__input:focus,
.bpc-flow .bpc-flow__input:focus-visible {
	outline: var(--bpc-hairline) solid var(--bpc-rule-strong);
	outline-offset: 3px;
	border-radius: var(--bpc-radius);
	border-block-end-color: var(--bpc-rule-strong);
}

.bpc-flow .bpc-flow__input[aria-invalid="true"] {
	border-block-end-color: var(--bpc-rule-strong);
	box-shadow: 0 1px 0 var(--bpc-rule-strong);
}

textarea.bpc-flow__input {
	min-height: 7.5rem;
	resize: vertical;
	font-size: 1.25rem;
	line-height: 1.4;
	background-image: linear-gradient(to bottom, transparent calc(1.4em - 1px), var(--bpc-rule) calc(1.4em - 1px), var(--bpc-rule) 1.4em, transparent 1.4em);
	background-size: 100% 1.4em;
	background-position: 0 0.3em;
	background-attachment: local;
}

.bpc-flow__input[type="number"] {
	-moz-appearance: textfield;
}

.bpc-flow__input[type="number"]::-webkit-inner-spin-button,
.bpc-flow__input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* The calendar is the date field once it is drawn; the native one stays in the form, out of sight. */
.bpc-flow__native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bpc-flow__help {
	max-width: 36rem;
	margin: 0.75rem 0 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--bpc-type-quiet);
}

.bpc-flow__err {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	max-width: 36rem;
	margin: 0.75rem 0 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--bpc-type-strong);
}

.bpc-flow__err::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1px;
	background: var(--bpc-accent);
	transform: translateY(-0.3em);
}

.bpc-flow__err:empty {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.bpc-flow__err:not([hidden]) {
		animation: bpc-flow-err var(--bpc-dur) var(--bpc-ease-out) both;
	}
}

@keyframes bpc-flow-err {
	from {
		opacity: 0;
		transform: translateY(var(--bpc-rise));
	}
}

/* A field the browser draws itself (a select without the script): plain, and on brand. */
.bpc-flow__select {
	display: block;
	width: 100%;
	max-width: 24rem;
	min-height: 3rem;
	padding: 0.6rem 2.75rem 0.6rem 1rem;
	border: 1px solid var(--bpc-input-border);
	border-radius: var(--bpc-radius-control);
	background-color: var(--bpc-input-fill);
	background-image: linear-gradient(45deg, transparent 50%, var(--bpc-rule-strong) 50%), linear-gradient(135deg, var(--bpc-rule-strong) 50%, transparent 50%);
	background-position: calc(100% - 1.3rem) 52%, calc(100% - 0.95rem) 52%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
	font-family: var(--bpc-font-sans);
	font-size: 1.0625rem;
	color: var(--bpc-type-strong);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.bpc-flow__select:focus {
	outline: var(--bpc-hairline) solid var(--bpc-rule-strong);
	outline-offset: 2px;
	border-color: var(--bpc-rule-strong);
}

/* ---- A field you tap: the dropdown and the date -------------------------
 * Ollie, 28 Sep: "Clean drop downs", "the ticky box could be better inc the
 * drop downs", "The calander too big is should be like a tap thing". One
 * closed field for both: 52px of Light Grey with a Black hairline, the
 * value in Black, a thin chevron that turns when it opens, and on focus the
 * house ring, a Black hairline 2px outside the edge (21 Oct; an orange edge
 * measured 2.05:1 on Light Grey, fainter than the field at rest). Open, a list or a month: a small panel under the field
 * on a wide screen, a sheet up from the foot of the screen on a phone, over
 * a page dimmed by a veil of Black at 40%.
 */

.bpc-dropdown,
.bpc-datepick {
	position: relative;
	max-width: 24rem;
}

.bpc-dropdown__native {
	position: absolute !important;
	width: 1px;
	min-width: 0;
	height: 1px;
	min-height: 0 !important;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.bpc-dropdown__button,
.bpc-datefield,
input.bpc-flow__box {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.5rem 0.875rem 0.5rem 1rem;
	border: 1px solid var(--bpc-input-border);
	border-radius: var(--bpc-radius-control);
	background: var(--bpc-input-fill);
	color: var(--bpc-type-strong);
	font-family: var(--bpc-font-sans);
	font-size: 1.0625rem;
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
	transition: border-color var(--bpc-dur) var(--bpc-ease), box-shadow var(--bpc-dur) var(--bpc-ease);
}

/*
 * The same box, for a field you type in (the sign-in's email, 1 Oct): Light
 * Grey, 52px, a Black edge, 8px corners, the body face at 17px (in the
 * portal White, a finer edge and its one small radius, 21 Oct).
 */
input.bpc-flow__box {
	display: block;
	box-sizing: border-box;
	box-shadow: none;
	cursor: text;
	-webkit-appearance: none;
	appearance: none;
}

.bpc-dropdown__value,
.bpc-datefield__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpc-dropdown__button:hover,
.bpc-datefield:hover,
input.bpc-flow__box:hover {
	border-color: var(--bpc-type);
}

.bpc-flow .bpc-dropdown__button:focus-visible,
.bpc-dropdown__button:focus-visible,
.bpc-dropdown.is-open .bpc-dropdown__button,
.bpc-flow .bpc-datefield:focus-visible,
.bpc-datefield:focus-visible,
.bpc-datepick.is-open .bpc-datefield,
.bpc-flow input.bpc-flow__box:focus,
.bpc-flow input.bpc-flow__box:focus-visible {
	outline: var(--bpc-hairline) solid var(--bpc-rule-strong);
	outline-offset: 2px;
	border-color: var(--bpc-rule-strong);
}

/* Wrong: the edge doubles to 2px Black, as Stripe's card fields do (PayPage). */
.bpc-flow__native[aria-invalid="true"] + .bpc-datepick .bpc-datefield,
.bpc-flow input.bpc-flow__box[aria-invalid="true"] {
	border-color: var(--bpc-rule-strong);
	box-shadow: inset 0 0 0 1px var(--bpc-rule-strong);
}

.bpc-dropdown__button:disabled {
	opacity: 0.5;
	cursor: default;
}

.bpc-dropdown.is-empty .bpc-dropdown__value,
.bpc-datepick.is-empty .bpc-datefield__value {
	color: var(--bpc-type-hint);
}

.bpc-datefield__glyph {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: var(--bpc-rule-strong);
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bpc-dropdown__chevron,
.bpc-datefield__chevron {
	flex: none;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: var(--bpc-type);
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--bpc-dur) var(--bpc-ease);
}

.bpc-dropdown.is-open .bpc-dropdown__chevron,
.bpc-datepick.is-open .bpc-datefield__chevron {
	transform: rotate(180deg);
}

/* Open: the panel under the field. */
.bpc-dropdown__panel,
.bpc-picker {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	z-index: 95;
	border: 1px solid var(--bpc-input-border);
	border-radius: var(--bpc-radius-panel);
	background: var(--bpc-input-fill);
	box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--bpc-shadow) 35%, transparent);
}

.bpc-dropdown__panel {
	min-width: 100%;
	padding: 4px;
}

.bpc-dropdown.is-up .bpc-dropdown__panel {
	inset-block: auto calc(100% + 6px);
}

.bpc-picker {
	width: 20.5rem;
	padding: 0.75rem 0.875rem 0.875rem;
}

.bpc-dropdown__title,
.bpc-picker__grab {
	display: none;
}

.bpc-dropdown__list {
	max-height: 17.5rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.bpc-dropdown__list:focus,
.bpc-picker:focus {
	outline: none;
}

.bpc-picker__scrim {
	position: fixed;
	inset: 0;
	z-index: 128;
	background: color-mix(in srgb, var(--bpc-shadow) 40%, transparent);
}

/* On a phone, a sheet: rounded at the top, a grab handle, the page dimmed behind. */
.bpc-dropdown.is-sheet .bpc-dropdown__panel,
.bpc-datepick.is-sheet .bpc-picker {
	position: fixed;
	inset: auto 0 0;
	z-index: 130;
	width: auto;
	max-height: 80svh;
	padding: 0.5rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
	border: 0;
	border-block-start: 1px solid var(--bpc-chrome-rule, var(--bpc-rule-strong)); /* Black on the site, the portal's Light Grey hairline there */
	border-radius: var(--bpc-radius-sheet, 16px) var(--bpc-radius-sheet, 16px) 0 0;
	box-shadow: 0 -12px 28px -20px color-mix(in srgb, var(--bpc-shadow) 35%, transparent);
}

.bpc-dropdown.is-sheet .bpc-dropdown__list {
	max-height: calc(80svh - 6rem);
}

.bpc-dropdown.is-sheet .bpc-dropdown__title,
.bpc-datepick.is-sheet .bpc-picker__grab,
.bpc-dropdown.is-sheet .bpc-picker__grab {
	display: block;
}

/* The sheet's handle: Black at 45%, line art (it was the sheet's own Light Grey until 21 Oct, so it could not be seen). */
.bpc-picker__grab {
	width: 2.5rem;
	height: 4px;
	margin: 0 auto 0.75rem;
	border-radius: 2px;
	background: color-mix(in srgb, var(--bpc-rule-strong) 45%, transparent);
}

.bpc-dropdown__title {
	margin: 0 0.5rem 0.5rem;
	font-family: var(--bpc-font-display);
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 300;
	color: var(--bpc-type-display);
}

html.bpc-sheet-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.bpc-dropdown.is-open .bpc-dropdown__panel,
	.bpc-datepick.is-open .bpc-picker {
		animation: bpc-drop-in var(--bpc-dur-quick) var(--bpc-ease-out) both;
	}

	.bpc-dropdown.is-up .bpc-dropdown__panel {
		animation-name: bpc-drop-up;
	}

	.bpc-dropdown.is-sheet .bpc-dropdown__panel,
	.bpc-datepick.is-sheet .bpc-picker {
		animation: bpc-sheet-in var(--bpc-dur-slow) var(--bpc-ease-out) both;
	}

	.bpc-picker__scrim:not([hidden]) {
		animation: bpc-fadein var(--bpc-dur) var(--bpc-ease) both;
	}

	/*
	 * Closing (6 Oct). The panel is already [hidden], the field already says
	 * it is closed and has focus back; popup.js and dropdown.js keep
	 * `is-closing` (and is-sheet, is-up) on the root, and the panel and
	 * scrim inert, while it goes. !important to beat `.bpc-flow [hidden]`.
	 * Quicker than it came: an exit is never longer than its entry.
	 */
	.bpc-dropdown.is-closing > .bpc-dropdown__panel[hidden],
	.bpc-datepick.is-closing > .bpc-picker[hidden] {
		display: block !important;
		pointer-events: none;
		animation: bpc-drop-out var(--bpc-dur-quick) var(--bpc-ease) both;
	}

	.bpc-dropdown.is-closing > .bpc-dropdown__panel > .bpc-dropdown__list[hidden] {
		display: block !important;
	}

	.bpc-dropdown.is-closing.is-up > .bpc-dropdown__panel[hidden] {
		animation-name: bpc-drop-out-up;
	}

	.bpc-dropdown.is-closing.is-sheet > .bpc-dropdown__panel[hidden],
	.bpc-datepick.is-closing.is-sheet > .bpc-picker[hidden] {
		animation: bpc-sheet-out var(--bpc-dur) var(--bpc-ease) both;
	}

	.bpc-dropdown.is-closing.is-sheet > .bpc-picker__scrim[hidden],
	.bpc-datepick.is-closing.is-sheet > .bpc-picker__scrim[hidden] {
		display: block !important;
		pointer-events: none;
		animation: bpc-fade-away var(--bpc-dur-quick) var(--bpc-ease) both;
	}
}

@keyframes bpc-drop-out {
	to {
		opacity: 0;
		transform: translateY(calc(-1 * var(--bpc-rise)));
	}
}

@keyframes bpc-drop-out-up {
	to {
		opacity: 0;
		transform: translateY(var(--bpc-rise));
	}
}

@keyframes bpc-sheet-out {
	to {
		transform: translateY(100%);
	}
}

@keyframes bpc-fade-away {
	to {
		opacity: 0;
	}
}

/*
 * A sheet is dragged down by its handle and title (the browser does not
 * scroll there), or by its list from the top; the list never hands its
 * scroll on to the page.
 */
.bpc-dropdown.is-sheet > .bpc-dropdown__panel > .bpc-picker__grab,
.bpc-dropdown.is-sheet > .bpc-dropdown__panel > .bpc-dropdown__title,
.bpc-datepick.is-sheet > .bpc-picker > .bpc-picker__grab,
.bpc-datepick.is-sheet > .bpc-picker > .bpc-picker__title {
	touch-action: none;
}

.bpc-datepick.is-sheet > .bpc-picker {
	overscroll-behavior: contain;
}

@keyframes bpc-drop-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@keyframes bpc-drop-up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

@keyframes bpc-sheet-in {
	from {
		transform: translateY(100%);
	}
}

.bpc-dropdown__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: var(--bpc-radius-inner);
	color: var(--bpc-type);
	font-size: 1.0625rem;
	white-space: nowrap;
	cursor: pointer;
}

.bpc-dropdown.is-sheet .bpc-dropdown__option {
	min-height: 3.25rem;
}

.bpc-dropdown__option.is-active {
	background: var(--bpc-input-hover);
	color: var(--bpc-type-strong);
}

.bpc-dropdown__option[aria-selected="true"] {
	color: var(--bpc-type-strong);
}

/* A choice that is not open: its words stay Black and are struck through, so it never reads as one you can take (21 Oct). */
.bpc-dropdown__option[aria-disabled="true"] {
	color: var(--bpc-type);
	text-decoration: line-through;
	text-decoration-thickness: var(--bpc-hairline);
	cursor: default;
}

.bpc-dropdown__tick {
	flex: none;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: var(--bpc-accent);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	visibility: hidden;
}

.bpc-dropdown__option[aria-selected="true"] .bpc-dropdown__tick {
	visibility: visible;
}

/* The month in the picker. */
.bpc-picker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-end: 0.5rem;
}

.bpc-picker__title {
	margin: 0;
	font-family: var(--bpc-font-display);
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 300;
	color: var(--bpc-type-display);
}

.bpc-picker__note {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--bpc-type-quiet);
}

/* The month and the year, each its own small list (29 Sep: "select month and year"). */
.bpc-picker__jump {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	gap: 0.25rem;
	min-width: 0;
}

.bpc-picker__dd {
	position: relative;
}

.bpc-picker__dd .bpc-dropdown__button {
	min-height: 2.75rem;
	padding: 0 0.5rem 0 0.75rem;
	border-color: transparent;
	background: transparent;
	font-family: var(--bpc-font-display);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--bpc-type-strong);
}

.bpc-picker__dd .bpc-dropdown__button:hover {
	border-color: var(--bpc-rule);
}

.bpc-picker__dd .bpc-dropdown__panel {
	z-index: 140;
	min-width: 9rem;
}

.bpc-picker__dd .bpc-dropdown__list {
	max-height: 15rem;
}

/* ---- The venue's suggestions: a list under the field, in the dropdown's style
 * (assets/places.js), for the enquiry and the portal's venue form alike. */

.bpc-places {
	position: relative;
	z-index: 20;
}

.bpc-places .bpc-dropdown__panel {
	inset-inline: 0;
	max-height: 18rem;
	overflow-y: auto;
}

.bpc-places__option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.1rem;
	min-height: 3.25rem;
	padding-block: 0.375rem;
	white-space: normal;
}

.bpc-places__name {
	color: var(--bpc-type-strong);
	line-height: 1.25;
}

.bpc-places__town {
	font-size: 0.875rem;
	color: var(--bpc-type-quiet);
}

.bpc-places__town:empty {
	display: none;
}

/* ---- The times: a grid under Lunch, Afternoon and Evening ---------------- */

.bpc-times {
	width: 22rem;
}

.bpc-times__title {
	margin-block-end: 0.25rem;
	font-size: 1.125rem;
}

.bpc-times__label {
	margin: 0.75rem 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpc-type);
}

.bpc-times__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.375rem;
}

.bpc-times__row--unsure {
	grid-template-columns: 1fr;
	margin-block-start: 0.75rem;
}

.bpc-times__time {
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border: 1px solid var(--bpc-rule);
	border-radius: var(--bpc-radius-control);
	background: var(--bpc-input-fill);
	color: var(--bpc-type-strong);
	font-family: var(--bpc-font-display);
	font-size: 1.0625rem;
	font-style: italic;
	font-variant-numeric: lining-nums;
	cursor: pointer;
}

.bpc-times__time:hover {
	border-color: var(--bpc-rule-strong);
}

.bpc-times__time:focus-visible {
	outline: 1px solid var(--bpc-rule-strong);
	outline-offset: 2px;
}

.bpc-times__time.is-chosen {
	border-color: var(--bpc-btn-edge);
	background: var(--bpc-accent);
}

.bpc-datepick.is-sheet .bpc-times {
	width: auto;
	overflow-y: auto;
}

.bpc-cal__nav {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bpc-type);
	cursor: pointer;
	transition: background-color var(--bpc-dur) var(--bpc-ease);
}

.bpc-cal__nav:hover:not([aria-disabled="true"]) {
	background: var(--bpc-input-hover);
	color: var(--bpc-type-strong);
}

/*
 * At the first or last month an arrow has nowhere to go. It stays in its
 * place and in the tab order (focus must not drop to the page when the
 * month turns to the end), and its line art fades: an inactive control, not
 * a word, so it carries no contrast duty (WCAG 1.4.11). Until 21 Oct it was
 * the same Black as the arrow that works.
 */
.bpc-cal__nav[aria-disabled="true"] {
	cursor: default;
}

.bpc-cal__nav[aria-disabled="true"] svg {
	opacity: 0.3;
}

.bpc-cal__nav svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bpc-cal__dow,
.bpc-cal__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.bpc-cal__dow {
	padding-block-end: 0.35rem;
}

.bpc-cal__dow > span {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-align: center;
	color: var(--bpc-type-quiet);
}

.bpc-cal__week > div {
	display: grid;
	place-items: center;
}

/* A 44px place to tap, drawn as a 40px day. */
.bpc-cal__day {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bpc-type-strong);
	font-family: var(--bpc-font-sans);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bpc-cal__day > span {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	transition: background-color var(--bpc-dur) var(--bpc-ease);
}

.bpc-cal__day:hover:not([aria-disabled="true"]) > span {
	background: var(--bpc-input-hover);
}

.bpc-flow .bpc-cal__day:focus-visible,
.bpc-cal__day:focus-visible {
	outline: none;
}

.bpc-cal__day:focus-visible > span {
	outline: 1px solid var(--bpc-rule-strong);
	outline-offset: 1px;
}

/*
 * A day that cannot be chosen, too soon, past the last day or taken: the
 * number stays Black (there is no grey type), and a Black stroke goes
 * through it (calendar.js draws it on every such day). Until 21 Oct a day
 * too soon looked exactly like one you could pick, and the taken day's
 * stroke was Black at 28%, 1.8:1.
 */
.bpc-cal__day[aria-disabled="true"] {
	color: var(--bpc-type);
	cursor: default;
}

.bpc-cal__strike {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2.5rem;
	height: 2.5rem;
	translate: -50% -50%;
	fill: none;
	stroke: var(--bpc-rule-strong);
	stroke-width: 1.25;
	stroke-linecap: round;
}

.bpc-cal__day.is-today > span {
	box-shadow: inset 0 0 0 1px var(--bpc-shadow);
}

.bpc-cal__day.is-chosen > span,
.bpc-cal__day.is-chosen:hover > span {
	background: var(--bpc-accent);
	box-shadow: inset 0 0 0 1px var(--bpc-btn-edge);
	color: var(--bpc-type-strong);
}

/* ---- Things you tap: chips and tiles -------------------------------------
 * Ollie, 28 Sep: "The yes and know boxes are mot nice", "the ticky box could
 * be better". No empty circle waiting to be ticked. A choice is a Light
 * Grey tile with a Black hairline; chosen, its edge doubles to 2px Black
 * and a small orange disc with a tick sits in its corner. (Until 21 Oct the
 * chosen edge was orange, 1.5px: 2.05:1 on Light Grey, so a chosen tile
 * looked fainter than the ones beside it.) The same for the occasion, the
 * pizzas, the extras and the dietary needs.
 */

/* The inputs behind them are the real ones; the face they sit under shows their state. */
.bpc-flow__control {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.bpc-chip,
.bpc-tile {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bpc-chip__face,
button.bpc-chip {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border: 1px solid var(--bpc-input-border);
	border-radius: var(--bpc-radius-control);
	background: var(--bpc-input-fill);
	color: var(--bpc-type-strong);
	font-family: var(--bpc-font-display);
	font-size: 1.125rem;
	font-style: italic;
	font-variant-numeric: lining-nums proportional-nums;
	line-height: 1.1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--bpc-dur) var(--bpc-ease), border-color var(--bpc-dur) var(--bpc-ease), box-shadow var(--bpc-dur) var(--bpc-ease);
}

.bpc-tile__face {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 5rem;
	padding: 0.875rem 2.25rem 0.875rem 1rem;
	border: 1px solid var(--bpc-input-border);
	border-radius: var(--bpc-radius-control);
	background: var(--bpc-input-fill);
	transition: background-color var(--bpc-dur) var(--bpc-ease), border-color var(--bpc-dur) var(--bpc-ease), box-shadow var(--bpc-dur) var(--bpc-ease);
}

.bpc-tile__name {
	font-family: var(--bpc-font-display);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.05;
	color: var(--bpc-type-strong);
}

@media (hover: hover) {
	.bpc-chip:hover .bpc-chip__face,
	button.bpc-chip:hover,
	.bpc-tile:hover .bpc-tile__face {
		border-color: var(--bpc-rule-strong);
	}
}

/* Chosen: a 2px Black edge, and the disc. */
.bpc-flow__control:checked + .bpc-chip__face,
.bpc-flow__control:checked + .bpc-tile__face,
button.bpc-chip[aria-pressed="true"] {
	border-color: var(--bpc-rule-strong);
	background: var(--bpc-input-fill);
	box-shadow: inset 0 0 0 1px var(--bpc-rule-strong);
}

/* A time is a single small word: chosen, it is filled, as the day is. */
.bpc-slots .bpc-flow__control:checked + .bpc-chip__face {
	border-color: var(--bpc-btn-edge);
	background: var(--bpc-accent);
	box-shadow: none;
}

.bpc-flow__control:focus-visible + .bpc-chip__face,
.bpc-flow__control:focus-visible + .bpc-tile__face,
.bpc-flow button.bpc-chip:focus-visible,
.bpc-flow button:focus-visible:not(.bpc-dropdown__button):not(.bpc-datefield):not(.bpc-cal__day):not(.bpc-login__way):not(.bpc-login__again > button) {
	outline: 1px solid var(--bpc-rule-strong);
	outline-offset: 3px;
}

/* The disc: only there once chosen, the tick drawing in. */
.bpc-tick {
	position: absolute;
	inset: 0.625rem 0.625rem auto auto;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--bpc-accent);
	box-shadow: inset 0 0 0 1px var(--bpc-btn-edge);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--bpc-dur) var(--bpc-ease), transform var(--bpc-dur) var(--bpc-ease-out);
}

.bpc-tick svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: var(--bpc-rule-strong);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 16;
	stroke-dashoffset: 16;
	transition: stroke-dashoffset var(--bpc-dur-quick) var(--bpc-ease-out) 60ms;
}

.bpc-flow__control:checked + * .bpc-tick,
.bpc-flow__control:checked ~ * .bpc-tick {
	opacity: 1;
	transform: none;
}

.bpc-flow__control:checked + * .bpc-tick svg,
.bpc-flow__control:checked ~ * .bpc-tick svg {
	stroke-dashoffset: 0;
}

/*
 * A real checkbox, where one is left to see: a 22px square with 6px
 * corners, a Black edge; ticked, filled orange with a Black tick that draws
 * in. Its label is the 44px place to tap.
 */
.bpc-check {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	cursor: pointer;
}

.bpc-check input {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid var(--bpc-input-border);
	border-radius: var(--bpc-radius-inner);
	background: var(--bpc-input-fill);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--bpc-dur) var(--bpc-ease), border-color var(--bpc-dur) var(--bpc-ease);
}

.bpc-check input::after {
	content: "";
	width: 6px;
	height: 11px;
	margin-block-start: -2px;
	border: solid var(--bpc-btn-type);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--bpc-dur-quick) var(--bpc-ease-out);
}

.bpc-check input:checked {
	border-color: var(--bpc-btn-edge);
	background: var(--bpc-accent);
}

.bpc-check input:checked::after {
	transform: rotate(45deg) scale(1);
}

.bpc-check input:focus-visible {
	outline: 1px solid var(--bpc-rule-strong);
	outline-offset: 3px;
}

/* ---- Dietary needs: chips, with how many under each --------------------
 * Ollie, 28 Sep: "Allergies should be easier". A wrap of small pill chips
 * that stay where they are; a need ticked gains its disc, and a row under
 * the chips, "Vegetarian  − 4 +  guests". Without the script each chip has
 * its number field under it, and the − and + (which need the script) go.
 */

.bpc-diet__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 36rem;
}

.bpc-diet__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bpc-diet.is-live .bpc-diet__item {
	display: contents;
}

.bpc-diet__chip .bpc-tile__face {
	align-items: center;
	gap: 0;
	min-height: 2.75rem;
	padding: 0.375rem 1rem;
	border-radius: var(--bpc-radius-chip);
	/* Not the padding: the room for the disc comes at once, so the chips re-wrap once, never mid-way. */
	transition: background-color var(--bpc-dur) var(--bpc-ease), border-color var(--bpc-dur) var(--bpc-ease), box-shadow var(--bpc-dur) var(--bpc-ease);
}

.bpc-diet__chip .bpc-tile__name {
	font-size: 1.125rem;
	font-weight: 400;
	white-space: nowrap;
}

/*
 * The disc leads, and takes room only once the need is ticked. Its room
 * (width, margin) comes at once and only the disc itself fades and settles
 * from 0.6, so neighbouring chips re-wrap once and never mid-animation.
 */
.bpc-diet__chip .bpc-tick {
	position: static;
	order: -1;
	width: 0;
	height: 1.125rem;
	margin: 0;
	overflow: hidden;
	transition: opacity var(--bpc-dur) var(--bpc-ease), transform var(--bpc-dur) var(--bpc-ease-out);
}

.bpc-diet__chip .bpc-flow__control:checked + .bpc-tile__face {
	padding-inline-start: 0.625rem;
}

.bpc-diet__chip .bpc-flow__control:checked + .bpc-tile__face .bpc-tick {
	width: 1.125rem;
	margin-inline-end: 0.5rem;
}

/* How many: a row for each need ticked, under all the chips. */
.bpc-diet__count,
.bpc-diet__other {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.bpc-diet.is-live .bpc-diet__count,
.bpc-diet.is-live .bpc-diet__other {
	order: 1;
	flex: 1 1 100%;
	min-height: 3.25rem;
	border-block-end: 1px solid var(--bpc-rule);
}

.bpc-diet.is-live .bpc-diet__chips:has(.bpc-flow__control:checked:not([value="none"])) {
	row-gap: 0.5rem;
}

.bpc-diet__for {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--bpc-type-strong);
	font-size: 1rem;
}

.bpc-diet:not(.is-live) .bpc-diet__count .bpc-diet__for,
.bpc-diet:not(.is-live) .bpc-diet__step {
	display: none;
}

.bpc-diet:not(.is-live) .bpc-diet__count {
	padding-inline-start: 1rem;
}

.bpc-diet__step {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bpc-type);
	cursor: pointer;
}

.bpc-diet__step:hover {
	background: var(--bpc-card);
	color: var(--bpc-type-strong);
}

.bpc-diet__step svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

.bpc-diet__n {
	width: 2.5rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-block-end: 1px solid var(--bpc-input-border);
	border-radius: 0;
	background: transparent;
	color: var(--bpc-type-strong);
	font-family: var(--bpc-font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-variant-numeric: lining-nums tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
}

.bpc-diet.is-live .bpc-diet__n {
	border-block-end-color: transparent;
}

.bpc-diet__n::-webkit-inner-spin-button,
.bpc-diet__n::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.bpc-diet__n:focus {
	outline: var(--bpc-hairline) solid var(--bpc-rule-strong);
	outline-offset: 2px;
	border-radius: var(--bpc-radius);
}

.bpc-diet__unit {
	width: 3.5rem;
	padding-inline-start: 0.35rem;
	font-size: 0.9375rem;
	color: var(--bpc-type-quiet);
}

.bpc-diet__other .bpc-diet__for {
	flex: none;
	padding-inline-end: 0.75rem;
}

.bpc-diet__other .bpc-flow__input {
	flex: 1 1 8rem;
	min-width: 0;
	min-height: 2.75rem;
	border: 0;
	background: transparent;
	font-size: 1.25rem;
}

.bpc-diet:not(.is-live) .bpc-diet__other .bpc-flow__input {
	border-block-end: 1px solid var(--bpc-input-border);
}

.bpc-diet__more {
	max-width: 36rem;
	margin-block-start: 2rem;
}

.bpc-diet__more textarea.bpc-flow__input {
	min-height: 4.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.bpc-diet__chip .bpc-tile__face,
	.bpc-diet__chip .bpc-tick {
		transition: none;
	}
}

/* ---- The guest counter ------------------------------------------------- */

.bpc-count__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: 24rem;
	padding-block: 1.25rem 0.5rem;
	border-block-start: 1px solid var(--bpc-rule);
}

.bpc-flow:not(.is-stepped) .bpc-count__row {
	justify-content: flex-start;
	padding: 0;
	border: 0;
}

.bpc-count__step {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 1px solid var(--bpc-input-border);
	border-radius: 50%;
	background: transparent;
	color: var(--bpc-type);
	cursor: pointer;
	transition: border-color var(--bpc-dur) var(--bpc-ease), background-color var(--bpc-dur) var(--bpc-ease), color var(--bpc-dur) var(--bpc-ease);
}

.bpc-count__step:hover {
	border-color: var(--bpc-rule-strong);
	background: var(--bpc-card);
	color: var(--bpc-type-strong);
}

.bpc-count__step svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}

.bpc-flow.is-stepped .bpc-count .bpc-flow__input {
	width: 4.2ch;
	min-width: 0;
	flex: 0 1 auto;
	border-block-end-color: transparent;
	font-size: clamp(3.5rem, 2.8rem + 3vw, 4.5rem);
	font-weight: 300;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.05;
	text-align: center;
}

.bpc-flow.is-stepped .bpc-count .bpc-flow__input:focus {
	border-block-end-color: var(--bpc-rule-strong);
}

.bpc-count__unit {
	max-width: 24rem;
	margin: 0 0 1.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
	color: var(--bpc-type-quiet);
}

.bpc-count__quick {
	max-width: 24rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--bpc-rule);
}

.bpc-count__quick-label {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpc-type);
}

.bpc-count__picks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (min-width: 48rem) {
	.bpc-count__row,
	.bpc-count__unit,
	.bpc-count__quick {
		max-width: 32rem;
	}

	.bpc-count__picks {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---- The place card: a card set like stationery ------------------------- */

.bpc-placecard {
	position: relative;
	max-width: 30rem;
	margin: 0 auto;
	padding: 2.25rem clamp(1.25rem, 5vw, 2.5rem) 1.75rem;
	border: 1px solid var(--bpc-rule);
	border-radius: 8px;
	outline: 1px solid var(--bpc-rule);
	outline-offset: -9px;
	background: var(--bpc-card);
	text-align: center;
	color: var(--bpc-type);
}

/*
 * In the portal (21 Oct) the place card is already on the screen's White
 * card, so it takes no frame of its own: no edge, no inset second line, no
 * corner of its own. One frame, the card's fine Light Grey edge, and the
 * stationery is the lockup, the type and the short orange-dotted rule.
 */
body.bpc-field-portal .bpc-placecard {
	padding-block-start: 0.5rem; /* no frame to keep the lockup off, so no band of room over it */
	padding-inline: 0;
	border: 0;
	border-radius: var(--bpc-radius);
	outline: 0;
}

.bpc-placecard .bpc-lockup {
	--bpc-lockup-h: 3rem;
	margin: 0 auto 1.25rem;
}

.bpc-placecard__title {
	margin: 0;
	font-family: var(--bpc-font-display);
	font-size: clamp(1.875rem, 1.6rem + 1.2vw, 2.25rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.1;
	color: var(--bpc-type-strong);
}

.bpc-placecard__by {
	display: block;
	margin-block-start: 0.35rem;
	font-family: var(--bpc-font-sans);
	font-size: 0.9375rem;
	font-style: normal;
	color: var(--bpc-type-quiet);
}

.bpc-placecard__rule {
	position: relative;
	width: 3rem;
	height: 1px;
	margin: 1.25rem auto;
	background: var(--bpc-rule);
}

.bpc-placecard__rule::after {
	content: "";
	position: absolute;
	inset: -2px auto auto 50%;
	width: 5px;
	height: 5px;
	margin-inline-start: -2.5px;
	border-radius: 50%;
	background: var(--bpc-accent);
}

.bpc-placecard__line {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.35rem 0.5rem;
	border: 0;
	background: none;
	color: var(--bpc-type);
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
}

button.bpc-placecard__line {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: color var(--bpc-dur) var(--bpc-ease), text-decoration-color var(--bpc-dur) var(--bpc-ease);
}

button.bpc-placecard__line:hover {
	color: var(--bpc-type-strong);
	text-decoration-color: var(--bpc-accent);
}

.bpc-placecard__big {
	font-family: var(--bpc-font-display);
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.25;
	color: var(--bpc-type-strong);
}

.bpc-placecard__small {
	display: block;
	margin-block-start: 0.15rem;
	font-family: var(--bpc-font-sans);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bpc-type-quiet);
}

.bpc-placecard__hr {
	height: 1px;
	margin: 0.75rem 0;
	border: 0;
	background: var(--bpc-rule);
}

.bpc-placecard__note {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--bpc-type-quiet);
}

/* The bridge lockup, grey, as a mark and not a link. The theme's mask draws it. */
.bpc-lockup {
	--bpc-lockup-h: 3rem;
	display: block;
	width: calc(var(--bpc-lockup-h) * 176 / 168);
	height: var(--bpc-lockup-h);
	color: var(--bpc-type);
}

/* ---- The drawings ------------------------------------------------------
 * Engraved like the bridge lockup and the 404's pizza: fine Black lines,
 * hatching instead of fills, orange only in a hairline or two.
 * Coloured here, never in the drawing.
 */

.bpc-art {
	display: block;
	overflow: visible;
}

.bpc-art * {
	fill: none;
	stroke: var(--bpc-rule-strong);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-width: 0.6px;
}

.bpc-art .a-rim,
.bpc-art .a-line {
	stroke-width: 1.1px;
}

.bpc-art .a-fine,
.bpc-art .a-cut {
	stroke-width: 0.75px;
}

.bpc-art .a-hatch,
.bpc-art .a-grain,
.bpc-art .a-back {
	stroke-width: 0.5px;
}

.bpc-art .a-back,
.bpc-art .a-char {
	stroke: var(--bpc-rule);
}

.bpc-art .a-stip {
	stroke-width: 1.4px;
}

.bpc-art .a-paper {
	fill: var(--bpc-card);
}

.bpc-art .a-accent {
	stroke-width: 0.9px;
	transition: stroke var(--bpc-dur) var(--bpc-ease);
}

.bpc-art .a-fire,
.bpc-art .a-seal,
.bpc-flow__control:checked ~ * .bpc-art .a-accent,
.bpc-flow__control:checked + * .bpc-art .a-accent {
	stroke: var(--bpc-accent);
}

.bpc-art .a-seal {
	fill: var(--bpc-card);
	stroke-width: 1px;
}

.bpc-art .a-wisp {
	stroke-width: 0.9px;
	opacity: 0.5;
}

/* The oven, on the page it turns to once an enquiry has gone. */
.bpc-oven {
	width: min(16rem, 78vw);
	height: auto;
	margin: 0 auto 1.75rem;
}

@media (min-width: 48rem) {
	.bpc-oven {
		width: 20rem;
	}
}

/*
 * Lit only for a real success (6 Oct): an enquiry sent and in the oven,
 * pencilled in, and the thanks for telling us more ([data-bpc-lit], and not
 * held). Everywhere else (held, the confirm page, the pencil-in question,
 * gone, sorry, again, expired, a closed link) the oven is drawn, cold and
 * still: no fire, no smoke, no draw-on and no turn.
 */
.bpc-oven .a-fire,
.bpc-oven .a-wisp {
	opacity: 0;
}

[data-bpc-lit]:not([data-held]) .bpc-oven .a-fire {
	opacity: 1;
}

[data-bpc-lit]:not([data-held]) .bpc-oven .a-wisp {
	opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
	[data-bpc-lit]:not([data-held]) .bpc-oven .a-draw {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: bpc-draw 1.2s var(--bpc-ease-out) forwards;
	}

	[data-bpc-lit]:not([data-held]) .bpc-oven .a-fade {
		opacity: 0;
		animation: bpc-fadein 800ms var(--bpc-ease) 500ms forwards;
	}

	[data-bpc-lit]:not([data-held]) .bpc-oven .a-fire {
		animation: bpc-fadein 600ms var(--bpc-ease) 1s both;
	}

	[data-bpc-lit]:not([data-held]) .bpc-oven .a-turn {
		transform-box: fill-box;
		transform-origin: center;
		animation: bpc-turn 2.4s var(--bpc-ease-out) 900ms both;
	}

	[data-bpc-lit]:not([data-held]) .bpc-oven .a-wisp {
		opacity: 0;
		animation: bpc-wisp 6s ease-out 1.6s 3;
	}

	[data-bpc-lit]:not([data-held]) .bpc-oven .a-wisp + .a-wisp {
		animation-delay: 4.6s;
	}
}

@keyframes bpc-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes bpc-fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes bpc-turn {
	from {
		transform: rotate(-180deg);
	}
}

@keyframes bpc-wisp {
	0% {
		opacity: 0;
		transform: translateY(4px);
	}

	30% {
		opacity: 0.5;
	}

	100% {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* ---- Back and Next ------------------------------------------------------ */

.bpc-flow__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 2.5rem;
}

.bpc-flow__actions > * {
	flex: none;
}

.bpc-flow__actions .bpc-btn {
	min-height: 3.25rem;
	margin-inline-start: auto;
	padding-inline: 2rem;
}

.bpc-flow__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bpc-type);
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}

.bpc-flow__back::before {
	content: "\2190" / "";
	color: var(--bpc-type);
	transition: transform var(--bpc-dur) var(--bpc-ease);
}

.bpc-flow__back:hover {
	color: var(--bpc-type-strong);
}

@media (hover: hover) {
	.bpc-flow__back:hover::before {
		transform: translateX(-3px);
	}
}

.bpc-flow__next::after {
	content: "\2192" / "";
	letter-spacing: 0;
	transition: transform var(--bpc-dur) var(--bpc-ease);
}

@media (hover: hover) {
	.bpc-flow__next:hover::after {
		transform: translateX(3px);
	}
}

.bpc-flow__status {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	margin: 1rem 0 0;
	font-size: 1rem;
	color: var(--bpc-type-strong);
}

.bpc-flow__status::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1px;
	background: var(--bpc-accent);
	transform: translateY(-0.3em);
}

.bpc-flow__status:empty {
	display: none;
}

/*
 * On a phone the bar takes the tab bar's place while the form is on screen:
 * two bars stacked would cost the screen and the thumb both. flow.js sets
 * bpc-flow-open while the form is in view; the tab bar slides away under it
 * and comes back when the form has gone. While a keyboard is up the bar sits
 * in the page, under the last field, so it never floats over what is typed.
 */
@media (max-width: 46rem) {
	body.bpc-flow-open .bpc-flow.is-stepped:not(.is-typing) .bpc-flow__actions {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 91;
		min-height: calc(var(--bpc-flow-bar) + env(safe-area-inset-bottom, 0px));
		margin: 0;
		padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
		border-block-start: 1px solid var(--bpc-chrome-rule);
		background: var(--bpc-chrome);
	}

	/*
	 * In the portal (21 Oct) the bar is White, as the card it rides over, with
	 * the header's Light Grey hairline, and its buttons stand on the card's
	 * own inner edges (the page's gutter, the card's edge and its room), so it
	 * reads as the card's foot held on screen, not a slab across it.
	 */
	body.bpc-field-portal.bpc-flow-open .bpc-flow.is-stepped:not(.is-typing) .bpc-flow__actions {
		padding-inline: calc(var(--wp--style--root--padding-left, 1.5rem) + var(--bpc-hairline) + var(--bpc-card-pad-x, 1.25rem)) calc(var(--wp--style--root--padding-right, 1.5rem) + var(--bpc-hairline) + var(--bpc-card-pad-x, 1.25rem));
	}

	body.bpc-flow-open .bpc-flow.is-stepped .bpc-flow__submit:not([hidden]) {
		flex: 1 1 auto;
	}

	body.bpc-flow-open .bpc-tabs {
		transform: translateY(100%);
		visibility: hidden;
		transition: transform var(--bpc-dur) var(--bpc-ease), visibility 0s var(--bpc-dur);
	}

	/* A short page still fills the screen, so the footer does not ride up under the question. */
	.bpc-flow.is-stepped .bpc-flow__form {
		min-height: calc(100svh - 9rem);
	}

	body.bpc-flow-open {
		padding-block-end: calc(var(--bpc-flow-bar) + env(safe-area-inset-bottom, 0px));
	}

	html.bpc-flow-open {
		scroll-padding-bottom: calc(var(--bpc-flow-bar) + env(safe-area-inset-bottom, 0px) + 1rem);
	}
}

@media (min-width: 46.01rem) {
	.bpc-flow.is-stepped .bpc-flow__actions {
		position: sticky;
		inset-block-end: 0;
		z-index: 15;
		padding-block: 1rem;
		border-block-start: 1px solid var(--bpc-rule);
		background: var(--bpc-card);
	}
}

/* A finger leaves no hover behind: the button stays its own orange. */
@media (hover: none) {
	.bpc-flow .bpc-btn:hover {
		background-color: var(--bpc-btn-fill);
		transform: none;
	}
}

/* Inside these forms the button keeps its sheen and its edge, and drops the warm shadow. */
.bpc-flow .bpc-btn:not(.bpc-btn--secondary),
.bpc-flow .bpc-btn:not(.bpc-btn--secondary):hover {
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bpc-sheen) 32%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.bpc-flow *,
	.bpc-flow *::before,
	.bpc-flow *::after,
	body.bpc-flow-open .bpc-tabs {
		transition: none !important;
	}
}