/*
 * Brooklyn OS: the team's own site.
 *
 * The brand's eight greys and its orange, its own faces (fonts.css, from
 * the theme), nothing of wp-admin. A light sidebar holds the screens,
 * labelled, in the groups the business thinks in; the page is Paper with
 * Snow panels in light, Void with Graphite panels in dark. Ink is the one
 * thing to press; orange is kept for the full stop, what needs you, the
 * current period in a chart, and progress that matters. The quiet green
 * is the brand's one status colour: paid, on pace, up.
 *
 * Phone first: one column, a tab bar a thumb reaches, 44px to press, 16px
 * in every box so Safari never zooms. A labelled sidebar from a tablet
 * upright, which folds to icons on request, and the full one from a laptop.
 *
 * Colours are tokens, defined once per theme; every rule below reads the
 * tokens, so the dark theme is the same page in other greys.
 */

/* ---- Tokens ---------------------------------------------------------- */

/*
 * The calm desk (Ollie chose it on 6 Oct 2026: "A/b in a way"; "Don't mess
 * up"). No black background anywhere: the sidebar is Snow with a Mist
 * hairline, the page Paper, the panels Snow with a hairline and no shadow.
 * Dark keeps a dark theme on the brand's dark neutrals as the site does
 * (Void field, Graphite cards: design master §7 and §10), never an Ink page.
 *
 * Buttons, tags and chips take a 3px corner, never a pill (§10, and the
 * office's own choice of 6 Oct in §12a; the website keeps its pills).
 *
 * Four steps of type: the page title, a panel title clearly bigger than the
 * body, the body, and meta. Labels in tracked capitals sit at 12px. Meta and
 * small text are Graphite (12.7:1 on Snow); Dark Petal is for icons and
 * rules only, and orange is never small text.
 */
:root {
	--o-ink: #0B0B0B;
	--o-void: #111111;
	--o-graphite: #2C2C2C;
	--o-petal: #7A7C7C;
	--o-petal-light: #B7B8B8;
	--o-mist: #D6D6D6;
	--o-paper: #F4F4F4;
	--o-snow: #FFFFFF;
	--o-orange: #C4622D;
	--o-orange-light: #D27A45;
	--o-green: #2F6B4F;

	--bg: var(--o-paper);
	--surface: var(--o-snow);
	--surface-2: var(--o-paper);
	--line: var(--o-mist);
	--line-strong: var(--o-petal-light);
	--text: var(--o-ink);
	--text-2: var(--o-graphite);
	--muted: var(--o-petal);
	--accent: var(--o-orange);
	--accent-hover: var(--o-orange-light);
	--on-accent: var(--o-ink);
	--primary: var(--o-ink);
	--primary-hover: var(--o-graphite);
	--on-primary: var(--o-snow);
	--good: var(--o-green);
	--bad: var(--o-orange);
	--wash: color-mix(in srgb, var(--o-orange) 10%, transparent);
	--quiet-mark: var(--o-petal-light);
	--side: var(--o-snow);
	--side-text: var(--o-graphite);
	--side-muted: var(--o-graphite);
	--side-hover: var(--o-paper);
	--side-line: var(--o-mist);
	--shadow: none;
	--shadow-pop: 0 1px 2px color-mix(in srgb, var(--o-ink) 6%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--o-ink) 18%, transparent);

	--radius: 6px;
	--radius-sm: 3px;
	--radius-ctl: 3px;
	--gap: 1.25rem;
	--tabs: 3.75rem;
	--side-w: 15.5rem;
	--side-w-tablet: 12.25rem;
	--content-w: 73.75rem;

	--t-title: 2rem;
	--t-panel: 1.25rem;
	--t-body: 1rem;
	--t-meta: 0.875rem;
	--t-label: 0.75rem;

	/* Motion. These mirror theme/brooklyn-pizza/assets/css/tokens.css
	   (--bpc-ease, --bpc-ease-out, --bpc-dur-quick, --bpc-dur, --bpc-dur-slow,
	   --bpc-dur-reveal, --bpc-rise) and must change together with them;
	   tests/php/OfficeMotionTest.php holds them equal. Two curves, neither
	   overshoots: changes and anything leaving, then anything arriving. */
	--o-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--o-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--o-dur-quick: 160ms;
	--o-dur: 260ms;
	--o-dur-slow: 300ms;
	--o-dur-reveal: 640ms;
	--o-rise: 4px;

	color-scheme: light;
}

@media (min-width: 46rem) {
	:root {
		--t-title: 2.5rem;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: var(--o-void);
		--surface: var(--o-graphite);
		--surface-2: var(--o-void);
		--line: color-mix(in srgb, var(--o-petal) 45%, var(--o-graphite));
		--line-strong: var(--o-petal);
		--text: var(--o-snow);
		--text-2: var(--o-mist);
		--muted: var(--o-petal-light);
		--accent: var(--o-orange-light);
		--accent-hover: var(--o-orange);
		--on-accent: var(--o-ink);
		--primary: var(--o-snow);
		--primary-hover: var(--o-mist);
		--on-primary: var(--o-ink);
		--wash: color-mix(in srgb, var(--o-orange-light) 16%, transparent);
		--quiet-mark: var(--o-petal);
		--good: color-mix(in srgb, var(--o-green) 35%, var(--o-snow));
		--side: var(--o-graphite);
		--side-text: var(--o-mist);
		--side-muted: var(--o-mist);
		--side-hover: var(--o-void);
		--side-line: color-mix(in srgb, var(--o-petal) 45%, var(--o-graphite));
		--shadow-pop: none;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: var(--o-void);
	--surface: var(--o-graphite);
	--surface-2: var(--o-void);
	--line: color-mix(in srgb, var(--o-petal) 45%, var(--o-graphite));
	--line-strong: var(--o-petal);
	--text: var(--o-snow);
	--text-2: var(--o-mist);
	--muted: var(--o-petal-light);
	--accent: var(--o-orange-light);
	--accent-hover: var(--o-orange);
	--on-accent: var(--o-ink);
	--primary: var(--o-snow);
	--primary-hover: var(--o-mist);
	--on-primary: var(--o-ink);
	--wash: color-mix(in srgb, var(--o-orange-light) 16%, transparent);
	--quiet-mark: var(--o-petal);
	--good: color-mix(in srgb, var(--o-green) 35%, var(--o-snow));
	--side: var(--o-graphite);
	--side-text: var(--o-mist);
	--side-muted: var(--o-mist);
	--side-hover: var(--o-void);
	--side-line: color-mix(in srgb, var(--o-petal) 45%, var(--o-graphite));
	--shadow-pop: none;
	color-scheme: dark;
}

/* ---- Base ------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.bpc-office {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--bpc-font-sans, "Libre Franklin", "Helvetica Neue", Arial, sans-serif);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.bpc-office a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
	text-underline-offset: 0.2em;
}

/* No weight of its own, so a control that is a link (a button, a tile, a
   KPI, a card) keeps its own transition list. */
:where(.bpc-office) a {
	transition: text-decoration-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office a:hover {
	text-decoration-color: var(--accent);
}

/* Focus is a hairline that shows at once: it never transitions and never
   changes the shape of what holds it. */
.bpc-office :focus-visible {
	outline: 1px solid var(--text);
	outline-offset: 3px;
}

.bpc-office__side :focus-visible {
	outline-color: var(--side-text);
}

.bpc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: -0.25em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.bpc-office__skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 50;
	padding: 0.75rem 1rem;
	background: var(--surface);
	border-radius: var(--radius-sm);
}

.bpc-office__skip:focus {
	top: 1rem;
}

.bpc-office small {
	display: block;
	color: var(--text-2);
	font-size: var(--t-meta);
}

/* ---- The frame: sidebar, top bar, page ------------------------------- */

/*
 * The calm desk's shell (6 Oct 2026). A light sidebar with words, at every
 * width from a tablet upright: 12.25rem on an iPad, 15.5rem from a laptop.
 * It folds to a rail of icons only when asked (the button at its head,
 * remembered on this device), never by itself. One content width, the
 * same on every screen.
 */
.bpc-office--in {
	--side-now: 0px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100dvh;
}

.bpc-office__side {
	display: none;
}

.bpc-office__frame {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.bpc-office__top {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.bpc-office__main {
	width: 100%;
	overflow-wrap: anywhere;
	max-width: calc(var(--content-w) + 2rem);
	margin: 0;
	padding: 1.5rem 1rem calc(var(--tabs) + 2.5rem + env(safe-area-inset-bottom) + var(--o-notices-h, 0px));
}

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

.bpc-office__breadcrumbs {
	margin-bottom: 1rem;
	color: var(--text-2);
	font-size: var(--t-meta);
}

.bpc-office__breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bpc-office__breadcrumbs li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.bpc-office__breadcrumbs li + li::before {
	content: '/';
}

.bpc-office__breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--text);
}

@media (min-width: 46rem) {
	body.bpc-office--in {
		--side-now: var(--side-w-tablet);
		grid-template-columns: var(--side-now) minmax(0, 1fr);
		background: linear-gradient(90deg, var(--side) calc(var(--side-now) - 1px), var(--side-line) calc(var(--side-now) - 1px), var(--side-line) var(--side-now), var(--bg) var(--side-now));
		background-color: var(--bg);
	}

	.bpc-office__side {
		position: sticky;
		top: 0;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 1rem 0.75rem;
		background: var(--side);
		border-right: 1px solid var(--side-line);
		color: var(--side-text);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bpc-office__brand--top,
	.bpc-office__tabs {
		display: none !important;
	}

	.bpc-office__main {
		max-width: calc(var(--content-w) + 3rem);
		padding: 1.75rem 1.5rem calc(3rem + var(--o-notices-h, 0px));
	}

	.bpc-office__top {
		padding: 0.75rem 1.5rem;
	}
}

@media (min-width: 72rem) {
	body.bpc-office--in {
		--side-now: var(--side-w);
	}

	.bpc-office__main {
		max-width: calc(var(--content-w) + 5rem);
		padding: 2rem 2.5rem calc(3rem + var(--o-notices-h, 0px));
	}

	.bpc-office__top {
		padding: 0.75rem 2.5rem;
	}
}

/* Folded on request: the rail, icons only, each word still its tooltip and its name. */
@media (min-width: 46rem) {
	:root[data-side="folded"] body.bpc-office--in {
		--side-now: 4.5rem;
	}
}

/* ---- The sidebar ----------------------------------------------------- */

.bpc-office__side-head {
	display: flex;
	min-width: 0;
}

.bpc-office__brand {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	text-decoration: none !important;
	color: inherit;
}

/* The company's bridge lockup, as the website's header draws it: the image is
   a mask, so the logo takes the colour of the words around it. */
.bpc-office__logo {
	display: block;
	flex: none;
	width: 2.75rem;
	height: 2.625rem;
	background-color: currentColor;
	-webkit-mask: var(--bpc-office-logo) center / contain no-repeat;
	mask: var(--bpc-office-logo) center / contain no-repeat;
}

.bpc-office__logo--large {
	width: 6rem;
	height: 5.75rem;
	color: var(--text);
}

/*
 * Brooklyn OS (Ollie, 6 Oct 2026: "OS•"): the brand's line, then OS and the
 * brand's orange full stop, as a heading ends on the site. Office::wordmark()
 * prints it; this is how it sits in the sidebar, the phone's bar and the
 * sign-in page.
 */
.bpc-office__wordmark {
	display: grid;
	line-height: 1.15;
	min-width: 0;
}

.bpc-office__wordmark-brand {
	font-family: var(--bpc-font-sans, "Libre Franklin", "Helvetica Neue", Arial, sans-serif);
	font-style: normal;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	color: var(--text);
	white-space: nowrap;
}

/* 24px at the least: the orange full stop is large type there, read at 3:1. */
.bpc-office__wordmark-app {
	font-family: var(--bpc-font-display, "Newsreader", Georgia, serif);
	font-style: italic;
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--text);
}

.bpc-office__side .bpc-office__brand {
	padding: 0.25rem 0.5rem 0.5rem;
	color: var(--text);
}

.bpc-office__side .bpc-office__logo {
	width: 2.25rem;
	height: 2.125rem;
}

.bpc-office__brand--top {
	flex: none;
	gap: 0.5rem;
}

.bpc-office__brand--top .bpc-office__logo {
	width: 2.25rem;
	height: 2.125rem;
	color: var(--text);
}

.bpc-office__brand--top .bpc-office__wordmark-brand {
	font-size: var(--t-label);
}


/* On a phone the words say it: the lockup gives the search its room. */
@media (max-width: 29.99rem) {
	.bpc-office__brand--top .bpc-office__logo {
		display: none;
	}
}

.bpc-office__signin-brand {
	margin: 0 0 1rem;
	line-height: 0;
}

.bpc-office__title--wordmark .bpc-office__wordmark-brand {
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.bpc-office__title--wordmark .bpc-office__wordmark-app {
	font-size: inherit;
}

.bpc-office__nav {
	flex: 1;
}

.bpc-office__nav--foot {
	flex: none;
}

.bpc-office__nav ul {
	list-style: none;
	margin: 0 0 0.625rem;
	padding: 0;
	display: grid;
	gap: 1px;
}

.bpc-office__group {
	margin: 0.5rem 0.5rem 0.25rem;
	font-size: var(--t-label);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--side-muted);
}

.bpc-office__nav a,
.bpc-office__theme {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 40px;
	padding: 0.375rem 0.5rem;
	border-radius: var(--radius-ctl);
	color: var(--side-text);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.25;
	transition: background-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__nav a .bpc-icon,
.bpc-office__theme .bpc-icon {
	color: var(--muted);
}

.bpc-office__nav a:hover,
.bpc-office__theme:hover {
	background: var(--side-hover);
	color: var(--text);
}

.bpc-office__nav a[aria-current="page"] {
	background: var(--side-hover);
	color: var(--text);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--text);
}

.bpc-office__nav a[aria-current="page"] .bpc-icon {
	color: var(--text);
}

/* A count beside a screen: a quiet square, outlined in orange when it waits on you. */
.bpc-office__badge {
	margin-left: auto;
	min-width: 1.5rem;
	padding: 0 0.375rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-ctl);
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--t-label);
	font-weight: 600;
	line-height: 1.375rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.bpc-office__badge--attn {
	border-color: var(--accent);
	background: var(--side);
}

.bpc-office__side-foot {
	display: grid;
	gap: 0.25rem;
	border-top: 1px solid var(--side-line);
	padding-top: 0.75rem;
}

.bpc-office__theme {
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}

/* Its room is kept until office.js shows it, so nothing moves when it does. */
.bpc-office__theme[hidden] {
	display: flex;
	visibility: hidden;
}

.is-dark-only {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .is-dark-only {
		display: inline;
	}

	:root:not([data-theme="light"]) .is-light-only {
		display: none;
	}
}

:root[data-theme="dark"] .is-dark-only {
	display: inline;
}

:root[data-theme="dark"] .is-light-only {
	display: none;
}

.bpc-office__who {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.25rem 0 0.25rem 0.5rem;
	font-size: var(--t-meta);
	color: var(--side-text);
}

.bpc-office__who .bpc-office__side-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpc-office__signout {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-ctl);
	color: var(--side-text);
	transition: background-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__signout:hover {
	background: var(--side-hover);
	color: var(--text);
}

/* The rail, folded on request: icons only, the words in a tooltip and kept for a screen reader. */
@media (min-width: 46rem) {
	:root[data-side="folded"] .bpc-office__side .bpc-office__side-label,
	:root[data-side="folded"] .bpc-office__side .bpc-office__wordmark,
	:root[data-side="folded"] .bpc-office__group,
	:root[data-side="folded"] .bpc-office__side .bpc-office__badge {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	:root[data-side="folded"] .bpc-office__side {
		padding-inline: 0.5rem;
	}

	:root[data-side="folded"] .bpc-office__side-head {
		justify-content: center;
	}

	:root[data-side="folded"] .bpc-office__side .bpc-office__brand {
		padding: 0.25rem 0;
	}

	/* Folded, the lockup stands for the words, on an iPad too. */
	:root[data-side="folded"] .bpc-office__side .bpc-office__logo {
		display: block;
	}

	:root[data-side="folded"] .bpc-office__nav a,
	:root[data-side="folded"] .bpc-office__theme {
		justify-content: center;
		padding: 0.5rem;
	}

	:root[data-side="folded"] .bpc-office__nav ul {
		margin-bottom: 0.875rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--side-line);
	}

	:root[data-side="folded"] .bpc-office__who {
		flex-direction: column;
		padding: 0;
	}

	:root[data-side="folded"] .bpc-office__fold .bpc-icon {
		transform: scaleX(-1);
	}
}

/* An iPad: the same words, a little closer together. */
@media (min-width: 46rem) and (max-width: 71.99rem) {
	.bpc-office__side {
		padding-inline: 0.5rem;
	}

	.bpc-office__side .bpc-office__logo {
		display: none;
	}

	.bpc-office__nav a,
	.bpc-office__theme {
		min-height: 38px;
		font-size: 0.9375rem;
	}
}

/* ---- The top bar ----------------------------------------------------- */

.bpc-office__search {
	position: relative;
	flex: 1;
	min-width: 0;
	max-width: 36rem;
	display: flex;
	align-items: center;
}

.bpc-office__search .bpc-icon {
	position: absolute;
	left: 0.875rem;
	color: var(--muted);
	pointer-events: none;
}

.bpc-office .bpc-office__search input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 2.75rem 0.5rem 2.75rem;
	border-radius: var(--radius-ctl);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 16px;
	transition: border-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__kbd {
	position: absolute;
	right: 0.75rem;
	padding: 0 0.4rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-ctl);
	color: var(--text-2);
	font: inherit;
	font-size: var(--t-label);
	line-height: 1.4rem;
}

@media (max-width: 45.99rem) {
	.bpc-office__kbd {
		display: none;
	}

	.bpc-office .bpc-office__search input[type="search"] {
		padding-right: 0.75rem;
	}
}

.bpc-office__new {
	position: relative;
	margin-left: auto;
}

.bpc-office__new > summary {
	list-style: none;
}

.bpc-office__new > summary::-webkit-details-marker {
	display: none;
}

.bpc-office__new ul {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 30;
	min-width: 15rem;
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
}

.bpc-office__new li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-ctl);
	text-decoration: none;
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__new li a .bpc-icon {
	color: var(--muted);
}

/* "New" hangs from its button: the list drops 4px into place. It closes at once. */
.bpc-office__new[open] ul {
	animation: o-drop var(--o-dur-quick) var(--o-ease-out) both;
}

@keyframes o-drop {
	from {
		opacity: 0;
		transform: translateY(calc(var(--o-rise) * -1));
	}
}

.bpc-office__new li a:hover {
	background: var(--surface-2);
}

@media (max-width: 45.99rem) {
	.bpc-office__new > summary span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.bpc-office__new > summary {
		width: 44px;
		padding: 0;
	}
}

/* ---- The tab bar on a phone ------------------------------------------ */

/*
 * Today, Leads, Bookings, Calendar and More: a flat Snow bar along the foot
 * with a hairline over it, words of 12px on one line under each icon.
 */
.bpc-office__tabs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
	background: var(--surface);
	border-top: 1px solid var(--line);
}

.bpc-office__tabs a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-width: 0;
	min-height: 3.25rem;
	padding: 0.25rem 0.125rem;
	border-radius: var(--radius-ctl);
	text-decoration: none;
	font-size: var(--t-label);
	line-height: 1.25;
	color: var(--text-2);
	transition: color var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease);
}

.bpc-office__tabs a span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpc-office__tabs a .bpc-icon {
	width: 1.375rem;
	height: 1.375rem;
	color: var(--muted);
}

.bpc-office__tabs a[aria-current="page"] {
	color: var(--text);
	font-weight: 600;
	box-shadow: inset 0 2px 0 var(--text);
}

.bpc-office__tabs a[aria-current="page"] .bpc-icon {
	color: var(--text);
}

/* ---- Headings -------------------------------------------------------- */

.bpc-office__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.bpc-office__title {
	font-family: var(--bpc-font-display, "Newsreader", Georgia, serif);
	font-style: italic;
	font-weight: 300;
	font-size: var(--t-title);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
}

.bpc-office__stop {
	color: var(--accent);
}

.bpc-office__lede {
	margin: 0.375rem 0 0;
	color: var(--text-2);
}

.bpc-office__head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	/* Never wider than the heading: a long view switch (Bookings' Board, List,
	   Past, Cancelled, Bin) scrolls inside it rather than widening the page
	   (QA at 390px, 30 Oct 2026). */
	min-width: 0;
	max-width: 100%;
}

.bpc-office__h2 {
	margin: 0;
	font-size: var(--t-panel);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.bpc-office__h3 {
	font-size: var(--t-body);
	margin: 1.5rem 0 0.75rem;
}

/* ---- Panels and grids ------------------------------------------------ */

.bpc-office__panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin-bottom: var(--gap);
	box-shadow: var(--shadow);
	min-width: 0;
}

.bpc-office__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
	min-height: 2rem;
}

.bpc-office__panel-head .bpc-office__button {
	min-height: 40px;
	padding: 0.25rem 0.75rem;
	font-size: var(--t-meta);
}

.bpc-office__panel--quiet {
	background: transparent;
	border-style: dashed;
	box-shadow: none;
}

.bpc-office__columns,
.bpc-office__grid-main {
	display: grid;
	gap: 0 var(--gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
	.bpc-office__columns {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.bpc-office__grid-main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bpc-office__span-2 {
		grid-column: span 2;
	}
}

.bpc-office__aside,
.bpc-office__meta {
	color: var(--text-2);
	font-size: 0.9375rem;
	margin: 0.5rem 0;
}

.bpc-office__empty {
	color: var(--text-2);
	margin: 0;
	padding: 1.25rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-sm);
	text-align: center;
}

.bpc-office__all-clear {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--text-2);
}

.bpc-office__all-clear .bpc-icon {
	color: var(--good);
}

/* ---- Headline figures ------------------------------------------------ */

.bpc-office__kpis {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin-bottom: var(--gap);
}

@media (min-width: 64rem) {
	.bpc-office__kpis {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	}
}

@media (max-width: 45.99rem) {
	.bpc-office__kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

.bpc-office__kpi {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.125rem 1.25rem 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-decoration: none !important;
	min-width: 0;
	overflow: hidden;
	transition: border-color var(--o-dur-quick) var(--o-ease);
}

a.bpc-office__kpi:hover {
	border-color: var(--line-strong);
}

.bpc-office__kpi-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__kpi-label .bpc-icon {
	color: var(--muted);
}

.bpc-office__kpi-value {
	font-size: clamp(1.5rem, 6vw, 2.125rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.bpc-office__delta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--t-meta);
	font-weight: 700;
}

.bpc-office__delta .bpc-icon {
	width: 1em;
	height: 1em;
}

.bpc-office__delta.is-good {
	color: var(--good);
}

.bpc-office__delta.is-bad {
	color: var(--bad);
}

.bpc-office__delta.is-quiet,
.bpc-office__delta-vs {
	color: var(--text-2);
	font-weight: 400;
}

:root[data-theme="dark"] .bpc-office__delta.is-good {
	color: var(--o-mist);
}

.bpc-office__spark {
	width: 100%;
	height: 2.25rem;
	margin-top: 0.25rem;
	overflow: visible;
}

.bpc-office__spark polyline {
	fill: none;
	stroke: var(--quiet-mark);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.bpc-office__spark circle {
	fill: var(--accent);
	stroke: var(--surface);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

/* The older figure cards, still used on Finance, Street and the sheet. */
.bpc-office__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--gap);
	margin-bottom: var(--gap);
}

@media (max-width: 45.99rem) {
	.bpc-office__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

.bpc-office__stats--small {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
	gap: 0.75rem;
	margin: 0;
}

.bpc-office__stat,
.bpc-office__goal {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem 1.125rem;
	text-decoration: none !important;
	box-shadow: var(--shadow);
	min-width: 0;
}

.bpc-office__stats--small .bpc-office__stat {
	background: var(--surface-2);
	box-shadow: none;
	border-color: transparent;
}

.bpc-office__goal .bpc-office__stat {
	border: 0;
	padding: 0;
	box-shadow: none;
}

a.bpc-office__stat {
	transition: border-color var(--o-dur-quick) var(--o-ease);
}

a.bpc-office__stat:hover {
	border-color: var(--line-strong);
}

.bpc-office__stat-label {
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__stat-value {
	font-size: clamp(1.25rem, 5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.bpc-office__stats--small .bpc-office__stat-value {
	font-size: 1.125rem;
}

.bpc-office__stat-note {
	font-size: var(--t-meta);
	color: var(--text-2);
}

/* ---- Goals ----------------------------------------------------------- */

.bpc-office__goal-row {
	padding: 0.875rem 0;
	border-top: 1px solid var(--line);
}

.bpc-office__goal-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.bpc-office__goal-top,
.bpc-office__goal-foot {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	align-items: baseline;
}

.bpc-office__goal-top span {
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__goal-foot {
	margin-top: 0.375rem;
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__goal-foot span:last-child {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	font-weight: 700;
}

.bpc-office__goal-foot .is-good {
	color: var(--good);
}

.bpc-office__goal-foot .is-bad {
	color: var(--text-2);
}

.bpc-office__progress {
	position: relative;
	height: 0.5rem;
	background: var(--surface-2);
	border-radius: 1px;
	margin-top: 0.5rem;
}

.bpc-office__progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--accent);
	border-radius: 1px;
	min-width: 0.5rem;
}

.bpc-office__progress-fill.is-ahead {
	background: var(--good);
}

.bpc-office__progress-pace {
	position: absolute;
	top: -0.3rem;
	bottom: -0.3rem;
	width: 2px;
	border-radius: 2px;
	background: var(--text);
}

.bpc-office__pace {
	font-size: var(--t-meta);
	color: var(--text-2);
}

/* ---- Charts ---------------------------------------------------------- */

.bpc-office__figure {
	position: relative;
	margin: 0;
}

.bpc-office__chart {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bpc-office__grid {
	stroke: var(--line);
	stroke-width: 1;
	shape-rendering: crispEdges;
}

.bpc-office__tick {
	fill: var(--text-2);
	font-size: 12px;
	font-family: inherit;
}

.bpc-office__col path {
	fill: var(--quiet-mark);
	transition: fill var(--o-dur-quick) var(--o-ease), opacity var(--o-dur-quick) var(--o-ease);
}

.bpc-office__col.is-current path {
	fill: var(--accent);
}

.bpc-office__hit {
	fill: transparent;
}

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

.bpc-office__col:focus .bpc-office__hit,
.bpc-office__col.is-active .bpc-office__hit {
	fill: var(--wash);
}

.bpc-office__figure.is-hovering .bpc-office__col:not(.is-active) path {
	opacity: 0.55;
}

.bpc-office__tip {
	position: absolute;
	z-index: 5;
	max-width: 18rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	font-size: var(--t-meta);
	line-height: 1.35;
	pointer-events: none;
	box-shadow: var(--shadow-pop);
	transition: opacity var(--o-dur-quick) var(--o-ease), display var(--o-dur-quick) allow-discrete;
}

.bpc-office__tip[hidden] {
	display: none;
	opacity: 0;
}

@starting-style {
	.bpc-office__tip:not([hidden]) {
		opacity: 0;
	}
}

.bpc-office__as-table {
	margin-top: 0.75rem;
	font-size: var(--t-meta);
}

.bpc-office__as-table summary {
	cursor: pointer;
	color: var(--text-2);
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}

.bpc-office__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}

.bpc-office__bars li {
	display: grid;
	grid-template-columns: minmax(5rem, 8.5rem) minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	font-size: 0.9375rem;
}

.bpc-office__track {
	height: 0.625rem;
	background: var(--surface-2);
	border-radius: 1px;
	overflow: hidden;
}

.bpc-office__track span {
	display: block;
	height: 100%;
	background: var(--accent);
	border-radius: 1px;
}

.bpc-office__bar-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.bpc-office__big-line {
	margin: 0 0 1rem;
	color: var(--text-2);
}

.bpc-office__big-line strong {
	font-size: 1.75rem;
	color: var(--text);
	margin-right: 0.25rem;
}

/* ---- The pipeline strip ---------------------------------------------- */

.bpc-office__pipeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
	gap: 0.5rem;
}

.bpc-office__pipeline a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.875rem 1rem 1.125rem;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	text-decoration: none;
	overflow: hidden;
	min-height: 100%;
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__pipeline a:hover {
	background: var(--wash);
}

.bpc-office__pipeline-count {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.bpc-office__pipeline-label {
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__pipeline-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: var(--share, 0%);
	background: var(--accent);
	border-radius: 0 4px 0 0;
}

.bpc-office__pipeline .is-empty .bpc-office__pipeline-count {
	color: var(--text-2);
}

/* ---- Lists ----------------------------------------------------------- */

.bpc-office__list,
.bpc-office__tasks,
.bpc-office__feed,
.bpc-office__agenda,
.bpc-office__results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpc-office__list li {
	padding: 0.875rem 0;
	border-top: 1px solid var(--line);
}

.bpc-office__list li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bpc-office__list--links a {
	display: block;
	min-height: 44px;
	padding: 0.5rem 0;
}

.bpc-office__list--days li {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: start;
}

.bpc-office__day {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bpc-office__tasks li + li {
	border-top: 1px solid var(--line);
}

.bpc-office__tasks a,
.bpc-office__results a {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 52px;
	padding: 0.5rem 0.25rem;
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__tasks a:hover,
.bpc-office__results a:hover {
	background: var(--surface-2);
}

.bpc-office__task-icon {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-ctl);
	background: var(--wash);
	color: var(--accent);
	flex: none;
}

.bpc-office__task-text {
	flex: 1;
	min-width: 0;
}

.bpc-office__task-text::first-letter {
	text-transform: uppercase;
}

.bpc-office__count {
	min-width: 1.75rem;
	padding: 0 0.5rem;
	border-radius: var(--radius-ctl);
	background: var(--surface-2);
	font-size: var(--t-meta);
	font-weight: 700;
	line-height: 1.75rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.bpc-office__chev {
	color: var(--muted);
}

.bpc-office__agenda li {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	gap: 0.875rem;
	align-items: center;
	padding: 0.625rem 0;
	border-top: 1px solid var(--line);
}

.bpc-office__agenda li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bpc-office__date-block {
	display: grid;
	place-items: center;
	padding: 0.375rem 0;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	line-height: 1.15;
	text-align: center;
}

.bpc-office__date-block span {
	font-size: var(--t-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-2);
}

.bpc-office__date-block strong {
	font-size: 0.9375rem;
}

.bpc-office__agenda .is-event .bpc-office__date-block {
	background: var(--surface);
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--text);
}

.bpc-office__agenda .is-event .bpc-office__date-block span {
	color: var(--text-2);
}

.bpc-office__agenda-body {
	min-width: 0;
}

.bpc-office__agenda-body a {
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__feed li {
	display: flex;
	gap: 0.75rem;
	padding: 0.625rem 0;
	border-top: 1px solid var(--line);
	font-size: 0.9375rem;
}

.bpc-office__feed li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bpc-office__avatar {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--t-meta);
	font-weight: 700;
	flex: none;
}

.bpc-office__side .bpc-office__avatar {
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--side-line);
}

.bpc-office__results a strong {
	display: block;
}

.bpc-office__results a span {
	flex: 1;
	min-width: 0;
}

/* ---- Tables ---------------------------------------------------------- */

.bpc-office__table-wrap {
	position: relative;
	overflow-x: auto;
}

.bpc-office__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.bpc-office__table th {
	text-align: left;
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-2);
	padding: 0.625rem 0.625rem;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.bpc-office__table td {
	padding: 0.75rem 0.625rem;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__table tbody tr:last-child td {
	border-bottom: 0;
}

.bpc-office__table tbody tr:hover td {
	background: var(--surface-2);
}

@media (max-width: 45.99rem) {
	.bpc-office__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.bpc-office__table,
	.bpc-office__table tbody,
	.bpc-office__table tr,
	.bpc-office__table td {
		display: block;
	}

	.bpc-office__table tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--line);
	}

	.bpc-office__table td {
		border: 0;
		padding: 0.25rem 0;
	}

	.bpc-office__table tbody tr:hover td {
		background: transparent;
	}

	.bpc-office__table td[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		font-size: var(--t-label);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--text-2);
	}
}

.bpc-office__facts-list {
	margin: 0;
	display: grid;
	gap: 0.875rem;
}

.bpc-office__facts-list div {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 0.75rem;
}

@media (max-width: 30rem) {
	.bpc-office__facts-list div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.125rem;
	}
}

.bpc-office__facts-list dt {
	color: var(--text-2);
	font-size: var(--t-meta);
}

.bpc-office__facts-list dd {
	margin: 0;
}

.bpc-office__allergy {
	border-left: 3px solid var(--accent);
	padding-left: 0.75rem;
}

/* ---- Chips ----------------------------------------------------------- */

.bpc-office__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.625rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-ctl);
	font-size: var(--t-label);
	white-space: nowrap;
	background: var(--surface-2);
	color: var(--text);
	line-height: 1.5;
}

.bpc-office__chip--warn {
	border-color: var(--accent);
	background: var(--wash);
}

/*
 * A chip that says a sentence (a disputed payment) wraps inside its panel:
 * kept on one line it ran off the page at 1280 and at 390 (the preview,
 * 6 Oct 2026). A softer corner, as a pill of two lines reads as a blob.
 */
.bpc-office__chip--wraps {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	border-radius: var(--radius-ctl);
	padding: 0.25rem 0.75rem;
}

.bpc-office__disputes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	min-width: 0;
}

/* The ledger in the booking page's narrow column: what it was for and the
   memo sit under What, and the amount never breaks (the preview, 6 Oct 2026). */
.bpc-office__ledger-memo {
	display: block;
	color: var(--text-2);
	font-size: var(--t-meta);
}

.bpc-office__ledger-amount {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bpc-office__ledger td:last-child,
.bpc-office__ledger th:last-child {
	text-align: right;
}

@media (max-width: 45.99rem) {
	.bpc-office__ledger td:last-child {
		text-align: left;
	}
}

.bpc-office__chip--paid {
	border-color: var(--good);
	color: var(--good);
	background: transparent;
}

:root[data-theme="dark"] .bpc-office__chip--paid {
	border-color: var(--o-mist);
	color: var(--o-mist);
}

.bpc-office__chip--event {
	background: transparent;
	color: var(--text);
	border-color: var(--text);
}

.bpc-office__chip--held {
	background: transparent;
	border: 1px dashed var(--text);
}

.bpc-office__chip--street {
	background: var(--o-orange-light);
	color: var(--o-ink);
	border-color: var(--o-orange-light);
}

/* Wedding tastings and people waiting for a taken day, on the calendar (6 Oct). */
.bpc-office__chip--tasting {
	background: transparent;
	border-color: var(--accent);
	box-shadow: inset 3px 0 0 var(--accent);
}

.bpc-office__chip--waiting {
	background: transparent;
	border: 1px dotted var(--text);
}

/* ---- The bookings board ---------------------------------------------- */

.bpc-office__board {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16.5rem, 1fr);
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: 1rem;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.bpc-office__board-col {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0.875rem;
	background: var(--surface-2);
	border-radius: var(--radius);
	scroll-snap-align: start;
	min-height: 10rem;
}

:root[data-theme="dark"] .bpc-office__board-col {
	background: var(--surface);
}

.bpc-office__board-col header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0 0.25rem 0.25rem;
}

.bpc-office__board-col h2 {
	margin: 0;
	font-size: var(--t-meta);
	font-weight: 700;
}

.bpc-office__board-col .bpc-office__count {
	background: var(--surface);
}

.bpc-office__board-empty {
	margin: 0;
	padding: 1rem;
	text-align: center;
	color: var(--text-2);
	font-size: var(--t-meta);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-sm);
}

.bpc-office__bcard {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none !important;
	box-shadow: var(--shadow);
	transition: border-color var(--o-dur-quick) var(--o-ease);
}

:root[data-theme="dark"] .bpc-office__bcard {
	background: var(--surface-2);
}

.bpc-office__bcard:hover {
	border-color: var(--line-strong);
}

.bpc-office__bcard-date {
	font-size: var(--t-meta);
	font-weight: 700;
	color: var(--text);
}

.bpc-office__bcard-date small {
	display: inline;
	font-weight: 400;
}

.bpc-office__bcard-title {
	line-height: 1.3;
}

.bpc-office__bcard-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.875rem;
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__bcard-meta span {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}

.bpc-office__bcard-foot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--line);
	font-size: var(--t-meta);
	min-width: 0;
}

.bpc-office__bcard-foot > span:not(.bpc-office__avatar):not(.bpc-office__chip):not(.bpc-office__owed) {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpc-office__bcard-foot .bpc-office__avatar {
	width: 1.5rem;
	height: 1.5rem;
	font-size: var(--t-label);
}

.bpc-office__owed {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

/* ---- Leads ----------------------------------------------------------- */

.bpc-office__cards {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

/* A lead opened on its own takes the page's one width, not a column of it (6 Oct 2026). */
.bpc-office__cards > .bpc-office__card:only-child {
	grid-column: 1 / -1;
}

.bpc-office__card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.125rem 1.25rem;
	box-shadow: var(--shadow);
	transition: border-color var(--o-dur-quick) var(--o-ease);
}

/* A ticked lead card is chosen: its edge comes forward. */
.bpc-office__card:has(.bpc-office__pick input:checked) {
	border-color: var(--text);
}

.bpc-office__card header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
}

/* Our reply on a lead card. */
.bpc-office__replies {
	margin: 0.5rem 0;
	padding: 0.75rem 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.bpc-office__reply > summary {
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.bpc-office__reply > summary small {
	font-weight: 400;
	overflow-wrap: anywhere;
}

.bpc-office__reply-status {
	margin: 0 0 0.375rem;
	font-weight: 600;
}

.bpc-office__message-preview {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font: inherit;
	font-size: 0.9375rem;
	margin: 0.5rem 0;
	padding: 0.75rem;
	background: var(--surface-2);
	border-radius: var(--radius-sm);
}

.bpc-office__copy-text {
	width: 100%;
	font: inherit;
	font-size: 0.9375rem;
}

.bpc-office__actions--small .bpc-office__button {
	font-size: var(--t-meta);
}

.bpc-office__list--history small {
	display: inline;
	margin-left: 0.375rem;
}

/* The lines between our first reply and the newest, folded (the preview, 6 Oct 2026). */
.bpc-office__history-fold summary {
	cursor: pointer;
	color: var(--text-2);
}

.bpc-office__history-fold .bpc-office__list--history {
	margin-top: 0.5rem;
}

.bpc-office__preview {
	margin: 0.5rem 0 1rem;
}

/* The tick on a lead card: a 44px target around a normal box. */
.bpc-office__pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -0.625rem 0 -0.625rem -0.625rem;
	cursor: pointer;
}

.bpc-office__pick input {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--accent);
}

.bpc-office__bulk {
	position: sticky;
	top: 0;
	z-index: 2;
	margin-bottom: var(--gap);
	padding: 0.5rem 0.75rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	transition: border-color var(--o-dur-quick) var(--o-ease), background-color var(--o-dur-quick) var(--o-ease);
}

/* The ticks sit outside the bulk form, so this reads from the page. */
.bpc-office__main:has(.bpc-office__pick input:checked) .bpc-office__bulk {
	border-color: var(--accent);
	background-color: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.bpc-office__bulk .bpc-office__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.bpc-office__bulk select {
	min-height: 44px;
}

.bpc-office__pages {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: var(--gap);
	min-height: 44px;
}

.bpc-office__card h3 {
	margin: 0 0 0.25rem;
	font-size: 1.125rem;
	flex: 1 1 100%;
}

.bpc-office__facts {
	margin: 0.625rem 0 0.25rem;
}

.bpc-office__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0.375rem 0;
}

.bpc-office__contact {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 44px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.bpc-office__contact .bpc-icon {
	color: var(--accent);
	width: 1.125em;
	height: 1.125em;
}

.bpc-office__message summary {
	cursor: pointer;
	color: var(--text-2);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.bpc-office__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: end;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--line);
}

/* ---- Forms ----------------------------------------------------------- */

.bpc-office__form {
	display: grid;
	gap: 0.875rem;
	max-width: 52rem;
}

.bpc-office__form--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: end;
}

.bpc-office__grid {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.bpc-office__field {
	display: grid;
	gap: 0.375rem;
	/* A neighbour's help line makes the row taller; the box stays its own height, at the top. */
	align-content: start;
}

.bpc-office__label {
	font-size: var(--t-meta);
	font-weight: 700;
	color: var(--text-2);
}

.bpc-office__help {
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office input[type="text"],
.bpc-office input[type="email"],
.bpc-office input[type="tel"],
.bpc-office input[type="date"],
.bpc-office input[type="time"],
.bpc-office input[type="number"],
.bpc-office input[type="password"],
.bpc-office input[type="search"],
.bpc-office select,
.bpc-office textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.875rem;
	font: inherit;
	font-size: 16px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
}

.bpc-office input:focus,
.bpc-office select:focus,
.bpc-office textarea:focus {
	border-color: var(--accent);
	outline: 3px solid var(--wash);
	outline-offset: 0;
}

.bpc-office textarea {
	field-sizing: content;
	min-height: 5rem;
}

.bpc-office__check {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	min-height: 44px;
}

.bpc-office__check input {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--accent);
}

.bpc-office__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1.125rem;
	border-radius: var(--radius-ctl);
	border: 1px solid var(--primary);
	background: var(--primary);
	color: var(--on-primary) !important;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
	justify-self: start;
	white-space: nowrap;
	transition: background-color var(--o-dur-quick) var(--o-ease), border-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease), opacity var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease);
}

.bpc-office__button--quiet {
	background: var(--surface);
	border-color: var(--line);
	color: var(--text) !important;
	font-weight: 400;
}

@media (hover: hover) {
	.bpc-office__button:hover {
		background: var(--primary-hover);
		border-color: var(--primary-hover);
	}

	.bpc-office__button--quiet:hover {
		background: var(--surface-2);
		border-color: var(--text-2);
	}
}

/* A pressed button holds still: it keeps its size and place, dims, and
   says in words what it is doing (office.js). Never a spinner. */
.bpc-office__button[aria-busy="true"] {
	opacity: 0.75;
	pointer-events: none;
	cursor: progress;
}

.bpc-office__button[aria-disabled="true"]:not([aria-busy="true"]) {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
	.bpc-office__button:active:not([aria-busy="true"], [aria-disabled="true"]),
	.bpc-office__link-button:active {
		transform: translateY(1px);
		transition-duration: 60ms;
	}

	.bpc-office__tabs a:active,
	.bpc-office__tile:active,
	.bpc-office__segmented a:active,
	.bpc-office__theme-pick button:active {
		transform: scale(0.97);
		transition-duration: 60ms;
	}
}

.bpc-office__drawer {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: var(--gap);
	box-shadow: var(--shadow);
	scroll-margin-top: 6rem;
}

.bpc-office__drawer > summary {
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 700;
	min-height: 44px;
}

.bpc-office__drawer > summary small {
	display: inline;
	font-weight: 400;
	margin-left: 0.5rem;
}

.bpc-office__drawer > form {
	padding: 0 1.25rem 1.25rem;
}

/* A drawer inside a panel: the panel is the card already. */
.bpc-office__drawer--inside {
	background: transparent;
	box-shadow: none;
	border-radius: var(--radius-sm);
	margin: 1rem 0 0;
}

.bpc-office__drawer--inside > summary {
	padding: 0.625rem 0.875rem;
	font-weight: 600;
}

.bpc-office__drawer--inside > summary small {
	display: block;
	margin: 0.125rem 0 0;
}

.bpc-office__drawer--inside > form {
	padding: 0 0.875rem 0.875rem;
}

.bpc-office__company {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.bpc-office__decline > summary {
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--text-2);
}

.bpc-office__group {
	scroll-margin-top: 6rem;
}

fieldset.bpc-office__group {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 1rem;
	margin: 0;
	display: grid;
	gap: 0.75rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--text);
}

fieldset.bpc-office__group legend {
	font-weight: 700;
	padding: 0 0.25rem;
}

.bpc-office__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--gap);
	max-width: 44rem;
}

.bpc-office__filter input,
.bpc-office__filter select {
	flex: 1 1 12rem;
	width: auto;
}

.bpc-office__segmented,
.bpc-office__tabs-inline {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-ctl);
	margin-bottom: 0;
}

.bpc-office__tabs-inline {
	margin-bottom: var(--gap);
}

.bpc-office__segmented a,
.bpc-office__tabs-inline a {
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
	min-height: 38px;
	padding: 0.375rem 1rem;
	border-radius: 2px;
	text-decoration: none;
	color: var(--text-2);
	font-size: 0.9375rem;
	transition: background-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease);
}

.bpc-office__segmented a[aria-current],
.bpc-office__tabs-inline a[aria-current] {
	background: var(--surface-2);
	color: var(--text);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--text);
}

.bpc-office__tabs-inline span {
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.bpc-office__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 var(--gap);
}

.bpc-office__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	margin-bottom: var(--gap);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.bpc-office__strip p {
	margin: 0;
}

.bpc-office__strip.is-error {
	border-color: var(--accent);
}

.bpc-office__steps {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

/* ---- Notices --------------------------------------------------------- */

.bpc-office__notice {
	border-radius: var(--radius-sm);
	padding: 0.875rem 1rem;
	margin-bottom: var(--gap);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--good);
	box-shadow: var(--shadow-pop);
}

.bpc-office__notice p {
	margin: 0;
}

.bpc-office__notice--error {
	border-left-color: var(--accent);
}

.bpc-office__notice--info,
.bpc-office__notice--warning {
	border-left-color: var(--text-2);
}

/*
 * After an action the notices sit in a quiet stack at the foot of the
 * screen. They rise in once the new page is there, and stay until their
 * close button is pressed or the next page loads: nothing on a timer takes
 * one away, so an Undo is never raced. office.js adds the close button,
 * says them to a screen reader, and keeps the page's room for them
 * (--o-notices-h), so the last controls can always scroll clear.
 */
.bpc-office__notices {
	position: fixed;
	z-index: 40;
	right: 1.5rem;
	bottom: 1.5rem;
	width: min(26rem, calc(100vw - 3rem));
	display: grid;
	gap: 0.5rem;
	pointer-events: none;
}

@media (max-width: 45.99rem) {
	.bpc-office__notices {
		left: 0.75rem;
		right: 0.75rem;
		width: auto;
		bottom: calc(var(--tabs) + 1.5rem + env(safe-area-inset-bottom));
	}
}

.bpc-office__notices > .bpc-office__notice {
	margin: 0;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	animation: o-arrive var(--o-dur) var(--o-ease-out) var(--o-dur-quick) both;
}

.bpc-office__notice > p {
	flex: 1;
}

.bpc-office__notice.is-leaving {
	animation: o-leave var(--o-dur-quick) var(--o-ease) both;
}

@keyframes o-arrive {
	from {
		opacity: 0;
		transform: translateY(var(--o-rise));
	}
}

@keyframes o-leave {
	to {
		opacity: 0;
		transform: translateY(var(--o-rise));
	}
}

.bpc-office__notice-close {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -0.625rem -0.5rem -0.625rem 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-ctl);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: color var(--o-dur-quick) var(--o-ease), background-color var(--o-dur-quick) var(--o-ease);
}

@media (hover: hover) {
	.bpc-office__notice-close:hover {
		color: var(--text);
		background: var(--surface-2);
	}
}

html:has(.bpc-office__notices) {
	scroll-padding-bottom: calc(var(--tabs) + 2.5rem + env(safe-area-inset-bottom) + var(--o-notices-h, 0px));
}

@media (min-width: 46rem) {
	html:has(.bpc-office__notices) {
		scroll-padding-bottom: calc(2.5rem + var(--o-notices-h, 0px));
	}
}

/* If copying is refused, the link is shown here to select by hand. */
.bpc-office .bpc-office__copy-fallback {
	flex: 1 1 14rem;
	width: auto;
	min-width: 0;
}

/* ---- "Are you sure?" ------------------------------------------------- */

/* office.js builds it for every [data-bpc-confirm]. It rises 4px into place
   and the backdrop darkens; leaving is quicker than arriving. The open
   transitions are on [open], the closing ones on the base rule, and each
   @starting-style follows its rule. */
.bpc-office__ask {
	padding: 0;
	width: min(28rem, calc(100vw - 2rem));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow-pop);
	opacity: 0;
	transform: translateY(var(--o-rise));
	transition: opacity var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease), overlay var(--o-dur-quick) allow-discrete, display var(--o-dur-quick) allow-discrete;
}

.bpc-office__ask[open] {
	opacity: 1;
	transform: none;
	transition: opacity var(--o-dur) var(--o-ease-out), transform var(--o-dur) var(--o-ease-out), overlay var(--o-dur) allow-discrete, display var(--o-dur) allow-discrete;
}

@starting-style {
	.bpc-office__ask[open] {
		opacity: 0;
		transform: translateY(var(--o-rise));
	}
}

.bpc-office__ask::backdrop {
	background-color: transparent;
	transition: background-color var(--o-dur-quick) var(--o-ease), overlay var(--o-dur-quick) allow-discrete, display var(--o-dur-quick) allow-discrete;
}

.bpc-office__ask[open]::backdrop {
	background-color: color-mix(in srgb, var(--o-ink) 40%, transparent);
	transition: background-color var(--o-dur) var(--o-ease), overlay var(--o-dur) allow-discrete, display var(--o-dur) allow-discrete;
}

@starting-style {
	.bpc-office__ask[open]::backdrop {
		background-color: transparent;
	}
}

.bpc-office__ask-body {
	padding: 1.5rem;
	display: grid;
	gap: 1.25rem;
}

.bpc-office__ask-words {
	margin: 0;
}

.bpc-office__ask-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}

/* ---- The calendar ---------------------------------------------------- */

.bpc-office__legend {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.bpc-office__weekdays {
	display: none;
}

.bpc-office__month {
	display: grid;
	gap: 0.5rem;
}

.bpc-office__cell {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.bpc-office__cell.is-free,
.bpc-office__cell.is-blank {
	display: none;
}

.bpc-office__date-short {
	display: none;
}

.bpc-office__date {
	font-weight: 700;
	font-size: var(--t-meta);
}

.bpc-office__cell.is-today {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.bpc-office__cell.is-today .bpc-office__date {
	color: var(--text);
	text-decoration: underline 2px var(--accent);
	text-underline-offset: 0.25em;
}

.bpc-office__cell.is-past {
	opacity: 0.55;
}

.bpc-office__entry {
	display: block;
	font-size: var(--t-meta);
	line-height: 1.3;
	padding: 0.25rem 0.5rem;
	border-radius: 2px;
	background: var(--surface-2);
	color: var(--text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__entry--event {
	background: var(--surface-2);
	color: var(--text) !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--text);
}

.bpc-office__entry--held {
	background: transparent;
	border: 1px dashed var(--text);
}

.bpc-office__entry--street {
	background: var(--o-orange-light);
	color: var(--o-ink) !important;
}

.bpc-office__entry--tasting {
	background: var(--surface);
	box-shadow: inset 3px 0 0 var(--accent);
}

.bpc-office__entry--waiting {
	background: transparent;
	border: 1px dotted var(--text);
}

/* The waiting list on a lead's card and under Leads (6 Oct). */
.bpc-office__waiting {
	margin-block: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px dotted var(--line-strong);
	border-radius: var(--radius-sm);
}

.bpc-office__waiting-list {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.bpc-office__waiting-list > li + li {
	margin-block-start: 0.75rem;
}

@media (min-width: 46rem) {
	.bpc-office__weekdays,
	.bpc-office__month {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 0.375rem;
	}

	.bpc-office__weekdays {
		margin-bottom: 0.375rem;
		font-size: var(--t-label);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--text-2);
	}

	.bpc-office__cell {
		min-height: 7rem;
	}

	.bpc-office__cell.is-free,
	.bpc-office__cell.is-blank {
		display: flex;
	}

	.bpc-office__cell.is-blank {
		visibility: hidden;
	}

	.bpc-office__date-long {
		display: none;
	}

	.bpc-office__date-short {
		display: inline;
	}

	.bpc-office__entry {
		white-space: nowrap;
	}
}

/* ---- More, on a phone ------------------------------------------------ */

/*
 * Every screen, in the sidebar's groups, as short lists of words: the
 * phone's way to everything the tab bar has no room for (6 Oct 2026).
 */
.bpc-office__more {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	align-items: start;
}

.bpc-office__more-group {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.75rem 0.5rem 0.5rem;
	min-width: 0;
}

.bpc-office__more-group h2 {
	margin: 0 0.5rem 0.25rem;
	font-size: var(--t-label);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
}

.bpc-office__more-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpc-office__more-group li + li {
	border-top: 1px solid var(--line);
}

.bpc-office__tile {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.5rem;
	border-radius: var(--radius-ctl);
	text-decoration: none;
	transition: background-color var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease);
}

.bpc-office__tile > span:not(.bpc-office__badge) {
	flex: 1;
	min-width: 0;
}

.bpc-office__tile .bpc-icon {
	color: var(--muted);
}

.bpc-office__tile[aria-current="page"] {
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--text);
}

.bpc-office__tile .bpc-office__badge {
	margin-left: 0;
}

/* ---- Sign in --------------------------------------------------------- */

.bpc-office--out {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	background:
		radial-gradient(60rem 40rem at 110% -10%, var(--wash), transparent 60%),
		var(--bg);
}

.bpc-office__main--out {
	padding: 2rem 1rem;
	max-width: 28rem;
}

.bpc-office__signin .bpc-office__form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow);
}

.bpc-office__signin .bpc-office__button {
	width: 100%;
}

/* ---- Two-step sign-in ------------------------------------------------ */

.bpc-office__passkey {
	margin-bottom: 1rem;
}

.bpc-office__passkey .bpc-office__button svg {
	width: 1.25rem;
	height: 1.25rem;
}

.bpc-office__link-button {
	background: none;
	border: 0;
	padding: 0.5rem 0;
	min-height: 44px;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
	transition: background-color var(--o-dur-quick) var(--o-ease), border-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease), opacity var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease);
}

.bpc-office__two-step {
	margin: 0;
	padding-left: 1.25rem;
	display: grid;
	gap: 1rem;
}

.bpc-office__two-step p {
	margin: 0 0 0.5rem;
}

.bpc-office__qr {
	width: min(100%, 13.5rem);
	margin: 0.5rem 0 1rem;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	line-height: 0;
}

.bpc-office__qr svg {
	width: 100%;
	height: auto;
}

.bpc-office__key,
.bpc-office__backup-codes code {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 1rem;
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
}

.bpc-office__backup-codes {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: 0.5rem;
}

.bpc-office__backup-codes li {
	padding: 0.5rem 0.75rem;
	border: 1px dashed var(--line);
	border-radius: var(--radius-sm);
	text-align: center;
}

.bpc-office__two-step-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.bpc-office__passkeys {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.bpc-office__passkeys li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: center;
	padding: 0.625rem 0;
	border-top: 1px solid var(--line);
}

.bpc-office__passkeys li:first-child {
	border-top: 0;
}

.bpc-passkeys__name {
	font-weight: 600;
}

.bpc-passkeys__when {
	flex: 1;
	color: var(--text-2);
}

.bpc-passkeys__remove {
	background: none;
	border: 0;
	min-height: 44px;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
	transition: background-color var(--o-dur-quick) var(--o-ease), border-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease), opacity var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease);
}

/* ---- Chips and notices for the kitchen ------------------------------- */

.bpc-office__chip--good {
	border-color: var(--good);
	color: var(--good);
	background: transparent;
}

:root[data-theme="dark"] .bpc-office__chip--good {
	border-color: var(--o-mist);
	color: var(--o-mist);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bpc-office__chip--good {
		border-color: var(--o-mist);
		color: var(--o-mist);
	}
}

.bpc-office__alert {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.875rem 1rem;
	margin-bottom: var(--gap);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.bpc-office__second-look {
	margin: 0.25rem 0 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.25rem;
}

.bpc-office__alert p {
	margin: 0;
}

/* ---- Second look ----------------------------------------------------- */

.bpc-office__looks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpc-office__looks li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	padding: 0.75rem 0 0.75rem 0.875rem;
	border-top: 1px solid var(--line);
	border-left: 3px solid transparent;
}

.bpc-office__looks li:first-child {
	border-top: 0;
}

.bpc-office__looks li.is-today {
	border-left-color: var(--accent);
}

.bpc-office__look-text {
	flex: 1 1 18rem;
	min-width: 0;
}

.bpc-office__look-text small {
	display: block;
	color: var(--text-2);
}

.bpc-office__look-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.bpc-office__look-actions .bpc-office__form {
	margin: 0;
}

.bpc-office__alert .bpc-office__looks li {
	padding: 0.375rem 0;
	border-left: 0;
}

.bpc-office__alert .bpc-icon {
	flex: none;
	color: var(--accent);
}

/* ---- The plan of the day --------------------------------------------- */

.bpc-office__day-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.bpc-office__day-pick {
	display: flex;
	gap: 0.375rem;
	align-items: center;
}

.bpc-office .bpc-office__day-pick input[type="date"] {
	min-height: 44px;
	padding: 0.375rem 0.625rem;
	border-radius: var(--radius-ctl);
}

.bpc-office__stats--day {
	margin-bottom: var(--gap);
}

.bpc-office__running {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.875rem;
}

.bpc-office__run {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--text);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.bpc-office__run.is-street {
	border-left-color: var(--accent);
}

.bpc-office__run-time {
	display: grid;
	align-content: start;
	gap: 0.125rem;
}

.bpc-office__run-time strong {
	font-size: 1.375rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.bpc-office__run-time small {
	color: var(--text-2);
	font-size: var(--t-label);
}

.bpc-office__arrive {
	margin-top: 0.375rem;
	font-size: var(--t-meta);
	font-weight: 600;
	color: var(--text);
}

.bpc-office__run-body {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.bpc-office__run-body h3 {
	margin: 0;
	font-size: 1.0625rem;
}

.bpc-office__run-body p {
	margin: 0;
}

.bpc-office__run-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bpc-office__needs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.bpc-office__warnings {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.375rem;
}

.bpc-office__warnings li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	background: var(--wash);
	font-size: var(--t-meta);
}

.bpc-office__warnings .bpc-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--accent);
}

@media (max-width: 45.99rem) {
	.bpc-office__run {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.bpc-office__run-time {
		grid-auto-flow: column;
		justify-content: start;
		align-items: baseline;
		gap: 0.5rem;
	}

	.bpc-office__arrive {
		margin: 0;
	}
}

/* ---- Checklists ------------------------------------------------------ */

.bpc-office__checklists {
	display: grid;
	gap: var(--gap);
}

.bpc-office__checklists .bpc-office__panel {
	margin: 0;
}

.bpc-office__checklist .bpc-office__h2 {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.bpc-office__checklist .bpc-office__h2 .bpc-icon {
	color: var(--muted);
}

.bpc-office__checklist.is-complete .bpc-office__h2 .bpc-icon {
	color: var(--good);
}

.bpc-office__meter {
	height: 6px;
	border-radius: 1px;
	background: var(--surface-2);
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.bpc-office__meter span {
	display: block;
	height: 100%;
	border-radius: 1px;
	background: var(--good);
}

.bpc-office__check-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpc-office__check-steps li {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr) auto;
	gap: 0.625rem;
	align-items: center;
	padding: 0.625rem 0;
	border-top: 1px solid var(--line);
}

.bpc-office__check-steps li:first-child {
	border-top: 0;
}

.bpc-office__step-mark {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--good);
	color: var(--o-snow);
}

.bpc-office__step-mark .bpc-icon {
	width: 16px;
	height: 16px;
}

.bpc-office__step-mark.is-empty {
	background: transparent;
	border: 2px solid var(--line-strong);
}

.is-out .bpc-office__step-mark {
	background: var(--accent);
}

.bpc-office__step-text {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.is-done .bpc-office__step-text {
	color: var(--text-2);
}

.bpc-office__earlier {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--t-label);
	color: var(--text-2);
	font-style: italic;
}

.bpc-office__check-steps li.is-missed .bpc-office__step-text {
	color: var(--text-2);
}

.bpc-office__step-text .bpc-office__chip {
	justify-self: start;
}

.bpc-office__step-text small {
	color: var(--text-2);
	font-size: var(--t-label);
}

.bpc-office__step-form {
	flex-wrap: nowrap;
	align-items: center;
}

.bpc-office .bpc-office__reading input {
	width: 5.5rem;
	min-height: 40px;
	padding: 0.375rem 0.5rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* On a phone a reading box goes under its step; a plain tick stays beside it. */
@media (max-width: 30rem) {
	.bpc-office__check-steps li:has(.bpc-office__reading) {
		grid-template-columns: 1.75rem minmax(0, 1fr);
	}

	.bpc-office__check-steps li:has(.bpc-office__reading) > form {
		grid-column: 2;
	}
}

/* ---- The allergen matrix --------------------------------------------- */

.bpc-office__matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-meta);
}

.bpc-office__matrix th,
.bpc-office__matrix td {
	padding: 0.5rem 0.375rem;
	border-bottom: 1px solid var(--line);
	text-align: center;
	vertical-align: middle;
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__matrix thead th {
	vertical-align: bottom;
	font-size: var(--t-label);
	font-weight: 600;
	color: var(--text-2);
}

.bpc-office__matrix thead th span {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.bpc-office__matrix thead th:first-child,
.bpc-office__matrix tbody th {
	text-align: left;
	min-width: 11rem;
}

.bpc-office__matrix tbody th {
	font-weight: 600;
}

.bpc-office__matrix tbody th small {
	display: block;
	font-weight: 400;
	font-size: var(--t-label);
	color: var(--text-2);
}

.bpc-office__matrix-group th {
	padding-top: 1rem;
	font-size: var(--t-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
	font-weight: 600;
}

.bpc-office__matrix .is-diet {
	background: var(--surface-2);
}

.bpc-office__matrix .is-diet .bpc-icon {
	width: 18px;
	height: 18px;
	color: var(--good);
}

.bpc-office__matrix tr.is-unchecked th {
	color: var(--text);
	box-shadow: inset 3px 0 0 var(--accent);
}

.bpc-office__matrix tbody tr:hover td,
.bpc-office__matrix tbody tr:hover th {
	background: var(--surface-2);
}

.bpc-office__dot {
	display: inline-grid;
	place-items: center;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	vertical-align: middle;
}

.bpc-office__dot.is-contains {
	background: var(--text);
}

.bpc-office__dot.is-may {
	border: 2px solid var(--text);
}

.bpc-office__dot.is-unknown {
	width: 1.125rem;
	height: 1.125rem;
	border: 1px dashed var(--accent);
	color: var(--text);
	font-size: var(--t-label);
	font-weight: 700;
}

.bpc-office__dot.is-gap {
	width: 1.125rem;
	height: 1.125rem;
	background: var(--accent);
	color: var(--o-snow);
	font-size: var(--t-label);
	font-weight: 700;
}

.bpc-office__matrix-legend .bpc-office__dot:not([class*="is-"]) {
	border: 1px solid var(--line-strong);
	border-radius: 2px;
}

/* Kitchen set-up: the next step, and each section's steps. */
.bpc-office__setup-next {
	margin: 0.75rem 0 0.25rem;
	font-size: 1.0625rem;
}

.bpc-office__setup-next + small,
.bpc-office__panel .bpc-office__setup-next ~ small {
	display: block;
	color: var(--text-2);
	margin-bottom: 0.25rem;
}

.bpc-office__panel .bpc-office__setup-next ~ .bpc-office__button {
	margin-top: 0.75rem;
}

.bpc-office__setup-section + .bpc-office__setup-section {
	margin-top: 1.25rem;
}

.bpc-office__setup-section .bpc-office__h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 0.25rem;
}

.bpc-office__setup-section .is-todo .bpc-office__step-text small {
	color: var(--text);
	font-weight: 600;
}

/* A dish's recipe lines and the stock item each points at. */
.bpc-office__links {
	list-style: none;
	margin: 0.25rem 0 0.75rem;
	padding: 0;
	display: grid;
	gap: 0.25rem;
	font-size: var(--t-meta);
}

.bpc-office__chips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: flex-end;
}

/* A client's labels (6 Oct 2026): on their row and their page, wrapping at phone width. */
.bpc-office__chips--client {
	display: flex;
	justify-content: flex-start;
	margin-top: 0.25rem;
}

/* A long address under a client's name breaks rather than push the page sideways (6 Oct 2026). */
.bpc-office__list li small,
.bpc-office__panel .bpc-office__meta {
	overflow-wrap: anywhere;
}

/* What a booking chose to eat, and what moves when two records join. */
.bpc-office__food {
	margin: 0.375rem 0;
	padding-left: 1.125rem;
	font-size: var(--t-meta);
	overflow-wrap: anywhere;
}

.bpc-office__matrix-legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__matrix-legend li {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

/* ---- Function and order sheets --------------------------------------- */

.bpc-office__doc {
	max-width: 60rem;
	padding: clamp(1rem, 3vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
	display: grid;
	gap: 1.5rem;
}

.bpc-office__doc-head {
	display: grid;
	gap: 0.25rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--text);
}

.bpc-office__doc-kind {
	margin: 0;
	font-size: var(--t-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-2);
	font-weight: 700;
}

.bpc-office__doc-title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.1;
}

.bpc-office__doc-date {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--text-2);
}

.bpc-office__doc-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
}

.bpc-office__doc-facts div {
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.bpc-office__doc-facts dt {
	font-size: var(--t-label);
	color: var(--text-2);
}

.bpc-office__doc-facts dd {
	margin: 0.25rem 0 0;
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bpc-office__doc-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.bpc-office__doc-h2 {
	margin: 0 0 0.75rem;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--line);
	font-size: var(--t-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bpc-office__doc-list {
	margin: 0;
	display: grid;
	gap: 0.625rem;
}

.bpc-office__doc-list dt {
	font-size: var(--t-label);
	color: var(--text-2);
}

.bpc-office__doc-list dd {
	margin: 0.125rem 0 0;
}

.bpc-office__doc-table {
	width: 100%;
	border-collapse: collapse;
}

.bpc-office__doc-table td {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line);
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__doc-table .is-number {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bpc-office__doc-check ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2 16rem;
	column-gap: 1.5rem;
}

.bpc-office__doc-check li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.3rem 0;
	break-inside: avoid;
}

.bpc-office__tickbox {
	flex: none;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	border: 1.5px solid var(--text);
	border-radius: 3px;
	vertical-align: -0.15em;
}

.bpc-office__doc-check .bpc-office__tickbox {
	margin: 0.15rem 0 0;
}

.bpc-office__blank {
	display: inline-block;
	min-width: 4rem;
	border-bottom: 1px solid var(--text);
}

.bpc-office__doc-lines {
	height: 6rem;
	background-image: repeating-linear-gradient(to bottom, transparent 0 1.95rem, var(--line-strong) 1.95rem 2rem);
}

@media (max-width: 45.99rem) {
	.bpc-office__doc-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bpc-office__doc-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Settings -------------------------------------------------------- */

.bpc-office__settings {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
}

.bpc-office__sheet-nav {
	margin: 0 0 1.25rem;
}

.bpc-office__sheet-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-office__sheet-nav a {
	font-weight: 600;
	text-decoration: none;
}

.bpc-office__sheet-nav a:hover {
	text-decoration: underline;
}

.bpc-office__bunch + .bpc-office__bunch {
	margin-top: 1.75rem;
}

.bpc-office__bunch-title {
	margin: 0 0 0.75rem;
}

.bpc-office__settings-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.375rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.bpc-office__settings-nav a {
	display: block;
	padding: 0.5rem 0.875rem;
	border-radius: var(--radius-ctl);
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--t-meta);
	transition: background-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__settings-nav a:hover {
	background: var(--surface);
	color: var(--text);
}

.bpc-office__settings-body {
	display: grid;
	gap: var(--gap);
	min-width: 0;
}

.bpc-office__setting {
	scroll-margin-top: 6rem;
	margin: 0;
}

@media (min-width: 64rem) {
	.bpc-office__settings {
		grid-template-columns: 13rem minmax(0, 1fr);
		align-items: start;
	}

	.bpc-office__settings-nav {
		position: sticky;
		top: 6rem;
	}

	.bpc-office__settings-nav ul {
		flex-direction: column;
		overflow: visible;
	}

	.bpc-office__settings-nav a {
		border-radius: var(--radius-sm);
	}
}

.bpc-office__dish-list {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.bpc-office__dish {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	margin-bottom: 0.5rem;
}

.bpc-office__dish > summary {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: flex-start;
	padding: 0.75rem 1rem;
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}

.bpc-office__dish > summary::-webkit-details-marker {
	display: none;
}

.bpc-office__dish > summary > span:first-child {
	display: grid;
	gap: 0.125rem;
	margin-inline-end: auto;
}

.bpc-office__dish > summary small {
	color: var(--text-2);
	font-size: var(--t-label);
}

.bpc-office__dish[open] > summary {
	border-bottom: 1px solid var(--line);
}

.bpc-office__dish > form,
.bpc-office__dish > p {
	padding: 1rem;
	margin: 0;
	max-width: none;
}

.bpc-office__dish--new {
	border-style: dashed;
}

.bpc-office__ticks {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.5rem;
}

.bpc-office__ticks legend {
	width: 100%;
	margin-bottom: 0.375rem;
	font-weight: 600;
	font-size: var(--t-meta);
}

.bpc-office__ticks label {
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
	padding: 0.375rem 0.75rem;
	min-height: 40px;
	border: 1px solid var(--line);
	border-radius: var(--radius-ctl);
	font-size: var(--t-meta);
	cursor: pointer;
}

.bpc-office__ticks label {
	transition: background-color var(--o-dur-quick) var(--o-ease), border-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__ticks label:has(input:checked) {
	border-color: var(--text);
	background: var(--surface-2);
	font-weight: 600;
}

.bpc-office__ticks input {
	accent-color: var(--accent);
}

.bpc-office__connections {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.bpc-office__connections li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.875rem 0;
	border-top: 1px solid var(--line);
}

.bpc-office__connections li:first-child {
	border-top: 0;
}

.bpc-office__connections small {
	display: block;
	margin-top: 0.25rem;
	color: var(--text-2);
	font-size: var(--t-meta);
}

.bpc-office__connections .bpc-office__setting-how {
	color: var(--text-2);
	font-size: var(--t-label);
}

.bpc-office__connection-mark {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--muted);
}

.bpc-office__connection-mark.is-on {
	background: var(--good);
	color: var(--o-snow);
}

/* "Check needed": the warning mark in the chip's own colours, not the grey
   clock of "Not set up" (the preview, 6 Oct 2026). */
.bpc-office__connection-mark.is-warn {
	background: var(--wash);
	color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.bpc-office__connection-mark .bpc-icon {
	width: 18px;
	height: 18px;
}

/* Stripe keys (1 Nov 2026): a plain card in the Card payments row, a
   hairline between the mode and each key, the state on one line. */
.bpc-office__stripe-keys {
	margin-top: 1rem;
	box-shadow: none;
}

.bpc-office__stripe-keys .bpc-office__h3 {
	margin: 0;
}

.bpc-office__stripe-key {
	display: grid;
	gap: 0.5rem;
	padding: 0.875rem 0;
	border-top: 1px solid var(--line);
}

.bpc-office__stripe-keys-form > .bpc-office__stripe-key:first-of-type {
	border-top: 0;
}

.bpc-office__stripe-key-state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.5rem;
	margin: 0;
}

.bpc-office__stripe-key-end {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* The key boxes are text boxes, not password boxes, so a browser's own
   password manager has no password box here to save from, fill or suggest
   a password for (review of d6fc75b); what is pasted is drawn as dots. */
.bpc-office__stripe-key-box {
	-webkit-text-security: disc;
}

.bpc-office__connections .bpc-office__stripe-key-from,
.bpc-office__stripe-key-from {
	color: var(--text-2);
	font-size: var(--t-meta);
}

/* Said once at the top of the card when what was saved can't be opened
   since the site's own keys changed (review of 7ce78b3). The card sits in
   a Connections row, whose own list rows are a two-column grid: this one
   keeps the warning's own shape. */
.bpc-office__stripe-keys-unreadable {
	margin: 0.75rem 0 0.25rem;
}

.bpc-office__connections .bpc-office__stripe-keys-unreadable li {
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-top: 0;
}

.bpc-office__stripe-key-clear {
	font-size: var(--t-meta);
}

.bpc-office__stripe-keys-form > .bpc-office__help {
	margin: 0.25rem 0 0.875rem;
}

.bpc-office__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.bpc-office__link-list a {
	display: grid;
	gap: 0.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--text);
	text-decoration: none;
	transition: border-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__link-list a:hover {
	border-color: var(--text);
}

.bpc-office__link-list small {
	color: var(--text-2);
}

.bpc-office__theme-pick {
	display: inline-flex;
	margin-bottom: 0.75rem;
}

/* Its room is kept until office.js shows it, so nothing moves when it does. */
.bpc-office__theme-pick[hidden] {
	display: inline-flex;
	visibility: hidden;
}

.bpc-office__theme-pick button {
	min-height: 40px;
	padding: 0.375rem 1rem;
	border: 0;
	border-radius: var(--radius-ctl);
	background: transparent;
	color: var(--text-2);
	font: inherit;
	cursor: pointer;
	transition: background-color var(--o-dur-quick) var(--o-ease), color var(--o-dur-quick) var(--o-ease), transform var(--o-dur-quick) var(--o-ease);
}

.bpc-office__theme-pick button[aria-pressed="true"] {
	background: var(--surface-2);
	color: var(--text);
	box-shadow: inset 0 -2px 0 var(--text);
	font-weight: 600;
}

/* ---- Changing what the sheets say ----------------------------------- */

.bpc-office__doc-h2 {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: space-between;
}

.bpc-office__doc-change {
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
	text-decoration: underline var(--accent);
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.bpc-office__doc-change-line {
	margin: -0.75rem 0 0;
	text-align: right;
	font-size: var(--t-meta);
}

.bpc-office__doc-change-line a {
	color: var(--text);
	text-decoration-color: var(--accent);
	font-weight: 600;
}

.bpc-office__doc-note {
	margin: 0 0 0.75rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--text);
	background: var(--surface-2);
	white-space: normal;
}

.bpc-office .bpc-office__by-hand {
	display: inline-block;
	width: auto;
	white-space: nowrap;
	margin-left: 0.375rem;
	padding: 0 0.375rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-ctl);
	font-size: var(--t-label);
	color: var(--text-2);
}

.bpc-office__head-tools {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
}

.bpc-office__matrix tbody th .bpc-office__doc-change {
	margin-left: 0.25rem;
	font-size: var(--t-label);
}

.bpc-office__panel--notes .bpc-office__day-note {
	margin-bottom: 0.75rem;
	padding: 0.875rem 1rem;
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--wash);
}

.bpc-office__day-note p {
	margin: 0 0 0.25rem;
}

.bpc-office__day-note small {
	color: var(--text-2);
	font-size: var(--t-label);
}

.bpc-office__day-note-edit > summary {
	cursor: pointer;
	color: var(--text);
	font-weight: 600;
	font-size: var(--t-meta);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.bpc-office__day-note-edit[open] > summary {
	margin-bottom: 0.5rem;
}

.bpc-office__action-taken {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--t-meta);
	color: var(--text);
}

.bpc-office__action-form {
	margin-top: 0.375rem;
	flex-wrap: nowrap;
}

.bpc-office .bpc-office__action-field input {
	min-height: 40px;
	width: 100%;
	min-width: 0;
}

.bpc-office__action-field {
	flex: 1;
	min-width: 0;
}

.bpc-office__needs-edit {
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	display: grid;
	gap: 0.75rem;
}

.bpc-office__needs-edit legend {
	padding: 0 0.375rem;
	font-weight: 600;
	font-size: var(--t-meta);
}

.bpc-office__grid--tight {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: 0.625rem;
}

/* ---- Stock and costing ------------------------------------------------ */

.bpc-office__gap {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	margin-top: 0.125rem;
	color: var(--text);
	font-size: var(--t-label);
	font-weight: 600;
}

.bpc-office__gap .bpc-icon {
	width: 14px;
	height: 14px;
}

.bpc-office__uncosted {
	color: var(--text);
	font-weight: 600;
}

.bpc-office .bpc-office__table--costing th {
	white-space: normal;
}

/* A "Do it" link lands on its dish or box below the sticky top bar. */
.bpc-office__dish,
.bpc-office__table--costing [id^="cost-"],
.bpc-office #target {
	scroll-margin-top: 6rem;
}

.bpc-office__table--costing .bpc-office__links li {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.375rem;
	align-items: baseline;
}

.bpc-office .bpc-office__table--count input,
.bpc-office .bpc-office__table--costing input {
	width: 7.5rem;
	min-height: 40px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 45.99rem) {
	.bpc-office .bpc-office__table--count input,
	.bpc-office .bpc-office__table--costing input {
		width: 100%;
		text-align: left;
	}
}

/* The client file: who they are across the top, the relationship in a
   rail, the bookings and the activity in the wide column. */
.bpc-office__crm {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: var(--gap);
	padding: 1rem 1.125rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.bpc-office__crm-who {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	min-width: 0;
}

.bpc-office__crm-who .bpc-office__avatar {
	width: 3rem;
	height: 3rem;
	font-size: 1.125rem;
}

.bpc-office__crm-who > div {
	min-width: 0;
}

.bpc-office__crm .bpc-office__company,
.bpc-office__crm .bpc-office__contacts,
.bpc-office__crm-chips {
	margin: 0.15rem 0;
}

.bpc-office__crm .bpc-office__stats {
	flex: 1 1 16rem;
	margin: 0;
	max-width: 28rem;
}

@media (min-width: 64rem) {
	.bpc-office__columns--crm {
		grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
		align-items: start;
	}
}

/* ---- Print: the event sheet, for the trailer ------------------------- */

@media print {
	.bpc-office__side,
	.bpc-office__top,
	.bpc-office__tabs,
	.bpc-office__no-print,
	.bpc-office__panel--no-print,
	.bpc-office__notice {
		display: none !important;
	}

	body.bpc-office--in {
		display: block;
		background: none;
	}

	body.bpc-office {
		background: #FFFFFF;
		color: #0B0B0B;
	}

	.bpc-office__main {
		padding: 0;
		max-width: none;
	}

	.bpc-office__panel {
		break-inside: avoid;
		box-shadow: none;
		border-color: #B7B8B8;
	}

	.bpc-office__columns {
		grid-template-columns: 1fr 1fr;
	}

	.bpc-office__doc {
		max-width: none;
		padding: 0;
		border: 0;
		box-shadow: none;
		gap: 1rem;
	}

	.bpc-office__doc-cols {
		grid-template-columns: 1fr 1fr;
	}

	.bpc-office__doc-facts {
		grid-template-columns: repeat(4, 1fr);
	}

	.bpc-office__doc-check,
	.bpc-office__doc-cols > section,
	.bpc-office__run,
	.bpc-office__checklist {
		break-inside: avoid;
	}

	.bpc-office__matrix-wrap {
		overflow: visible;
	}

	.bpc-office__matrix {
		font-size: 9pt;
	}

	.bpc-office__step-form,
	.bpc-office__check-steps form {
		display: none !important;
	}

	.bpc-office *,
	.bpc-office *::before,
	.bpc-office *::after {
		animation: none !important;
		transition: none !important;
	}

	.bpc-office__notices,
	.bpc-office__ask {
		display: none !important;
	}
}

/* ---- Motion ---------------------------------------------------------- */

/* Reduced motion: nothing travels. The durations drop to 1ms and the rise
   to 0, so every end state still applies at once. There is no page
   transition here: the office opts in only below, inside no-preference. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--o-dur-quick: 1ms;
		--o-dur: 1ms;
		--o-dur-slow: 1ms;
		--o-dur-reveal: 1ms;
		--o-rise: 0px;
	}

	.bpc-office *,
	.bpc-office *::before,
	.bpc-office *::after {
		animation-duration: 1ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Page steps load as they always have: no page cross-fade. In Chromium
 * (141, measured 6 Oct) every click made while a view transition runs goes
 * to <html>, even with the overlay set to take no pointer events, and
 * the office is clicked straight after every save; a cross-fade on each
 * page would swallow the first ~400ms of clicks. So the only view
 * transition here is the light/dark switch, which the person starts
 * themselves (office.js recolour()): the whole page, bars included,
 * cross-fades as one. All of it lives in this one block, so reduced motion
 * never gets a view transition, whatever the order of the file.
 */
@media (prefers-reduced-motion: no-preference) {
	.bpc-office__side {
		view-transition-name: o-side;
	}

	.bpc-office__top {
		view-transition-name: o-top;
	}

	.bpc-office__tabs {
		view-transition-name: o-tabs;
	}

	::view-transition {
		pointer-events: none;
	}

	::view-transition-old(root),
	::view-transition-old(o-side),
	::view-transition-old(o-top),
	::view-transition-old(o-tabs) {
		animation: var(--o-dur-quick) var(--o-ease) both o-out;
	}

	::view-transition-new(root),
	::view-transition-new(o-side),
	::view-transition-new(o-top),
	::view-transition-new(o-tabs) {
		animation: var(--o-dur) var(--o-ease-out) both o-in;
	}
}

@keyframes o-out {
	to {
		opacity: 0;
	}
}

@keyframes o-in {
	from {
		opacity: 0;
	}
}

/* Light or dark: for the frame of the switch nothing recolours on its own
   clock, and the page cross-fades as one (office.js, recolour()). */
html.o-recolouring *,
html.o-recolouring *::before,
html.o-recolouring *::after {
	transition: none !important;
}

/* Arriving at an anchor: clear of the sticky top bar, and the place washes
   once, after the page has settled. */
.bpc-office__main [id] {
	scroll-margin-top: 6rem;
}

.bpc-office__main [id]:target {
	animation: o-wash var(--o-dur-reveal) var(--o-ease) var(--o-dur-slow) both;
}

@keyframes o-wash {
	from {
		background-color: var(--wash);
	}
}

/*
 * Disclosures: one chevron that turns, and content that fades (and, from a
 * tablet, grows) open and shut. Each ::details-content rule stands alone,
 * because an engine that doesn't know it drops the whole rule. Never "New".
 */
.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below) > summary {
	list-style: none;
}

.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below) > summary::-webkit-details-marker {
	display: none;
}

.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below) > summary::after {
	content: "";
	flex: none;
	display: inline-block;
	width: 0.4375rem;
	height: 0.4375rem;
	margin-inline-start: 0.625rem;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: translateY(-0.1875rem) rotate(45deg);
	transition: transform var(--o-dur) var(--o-ease);
}

.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below)[open] > summary::after {
	transform: translateY(0.0625rem) rotate(225deg);
}

/* "Add a checklist" already shows a plus: one indicator is enough. */
.bpc-office .bpc-office__dish--new > summary::after {
	content: none;
}

.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below)::details-content {
	opacity: 0;
	transition: opacity var(--o-dur) var(--o-ease), content-visibility var(--o-dur) var(--o-ease) allow-discrete;
}

.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below)[open]::details-content {
	opacity: 1;
}

/* From a tablet the content grows too; a phone only fades, so a long drawer
   never lays out again on every frame. The clip's margin keeps a focus
   ring on the first or last control whole. */
@media (min-width: 46rem) {
	@supports (interpolate-size: allow-keywords) {
		.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below) {
			interpolate-size: allow-keywords;
		}

		.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below)::details-content {
			block-size: 0;
			overflow: clip;
			overflow-clip-margin: 0.5rem;
			transition: opacity var(--o-dur) var(--o-ease), block-size var(--o-dur) var(--o-ease), content-visibility var(--o-dur) var(--o-ease) allow-discrete;
		}

		.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__day-note-edit, .bpc-office__add-below)[open]::details-content {
			block-size: auto;
		}
	}
}

/* A summary in quiet words comes up to full colour under the pointer; the
   day note's, already orange, is underlined instead. Never a button's. */
.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__add-below) > summary:not(.bpc-office__button) {
	transition: color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__day-note-edit > summary {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--accent);
	transition: text-decoration-color var(--o-dur-quick) var(--o-ease);
}

/* The newer hovers, only where a pointer hovers. */
@media (hover: hover) {
	.bpc-office :is(.bpc-office__drawer, .bpc-office__dish, .bpc-office__decline, .bpc-office__reply, .bpc-office__message, .bpc-office__as-table, .bpc-office__add-below) > summary:not(.bpc-office__button):hover {
		color: var(--text);
	}

	.bpc-office__day-note-edit > summary:hover {
		text-decoration-color: currentColor;
	}

	.bpc-office__tabs a:hover {
		color: var(--text);
	}

	.bpc-office__tile:hover {
		background: var(--surface-2);
	}

	.bpc-office__segmented a:not([aria-current]):hover,
	.bpc-office__theme-pick button[aria-pressed="false"]:hover {
		background: var(--surface-2);
		color: var(--text);
	}

	.bpc-office__tabs-inline a:not([aria-current]):hover {
		color: var(--text);
	}

	.bpc-office__entry:not(.bpc-office__entry--event, .bpc-office__entry--held, .bpc-office__entry--street):hover {
		background-color: color-mix(in srgb, var(--surface-2) 70%, var(--line));
	}

	.bpc-office__page-row a:hover {
		border-color: var(--line-strong);
	}

	.bpc-office__agenda-body a:hover {
		text-decoration-color: var(--accent);
	}
}

/* ---- Lead replies: what has to be true before anything sends by itself -- */

.bpc-office__gates {
	display: grid;
	gap: 0.375rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.bpc-office__gates li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.bpc-office__gates svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
}

.bpc-office__gates .is-ok svg {
	color: var(--good);
}

.bpc-office__gates .is-not svg {
	color: var(--bad);
}

.bpc-office__gates .is-quiet svg {
	color: var(--muted);
}

/* A letter's Send now and Skip, side by side under its words (the preview, 6 Oct 2026). */
.bpc-office__letter-hand {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.25rem;
}

.bpc-office__letter-hand .bpc-office__form {
	margin: 0;
}

.bpc-office__gates .is-stopped,
.bpc-office__gates .is-no {
	color: var(--text-2);
}

.bpc-office__ticks {
	display: grid;
	gap: 0.25rem;
	margin: 0 0 1rem;
}

.bpc-office__tick {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
}

.bpc-office__rota {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	margin: 0.25rem 0 0;
	color: var(--text-2);
}

.bpc-office__rota svg {
	width: 1rem;
	height: 1rem;
}

/* The weather watch (6 Oct 2026): the forecast for the serving hours, one line. */
.bpc-office__weather {
	display: flex;
	gap: 0.375rem;
	align-items: flex-start;
	margin: 0.25rem 0 0;
	overflow-wrap: anywhere;
}

.bpc-office__weather svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.1875rem;
}

.bpc-office__weather.is-quiet {
	color: var(--text-2);
}

.bpc-office__quote {
	margin: 0.375rem 0 0;
	padding: 0.375rem 0.75rem;
	border-left: 3px solid var(--o-mist);
	color: var(--o-graphite);
	font-size: 0.9375rem;
	white-space: pre-line;
}

.bpc-office__days {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.bpc-office__days legend {
	width: 100%;
	margin-bottom: 0.25rem;
	padding: 0;
	font-weight: 600;
}

.bpc-office__dish-body {
	display: grid;
	gap: 0.75rem;
	padding: 1rem;
}

.bpc-office__dish-body > form,
.bpc-office__dish-body > p,
.bpc-office__dish-body > ul {
	margin: 0;
}

/* ---- Website: page words, business details ------------------------------ */

.bpc-office__error {
	display: block;
	margin-top: 0.25rem;
	color: var(--bad);
	font-weight: 600;
}

.bpc-office__page-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-office__page-row a {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	transition: border-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__page-form {
	display: grid;
	gap: 0.75rem;
}

.bpc-office__block {
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.bpc-office__block--fixed {
	border-style: dashed;
	background: var(--surface-2);
	color: var(--text-2);
	font-size: var(--t-meta);
}

.bpc-office__block--todo {
	border-color: var(--accent);
	background: var(--wash);
}

.bpc-office__block--heading input {
	font-weight: 600;
}

.bpc-office__add-below {
	margin: -0.25rem 0 0 1rem;
	font-size: var(--t-meta);
}

.bpc-office__add-below summary {
	min-height: 32px;
	color: var(--text-2);
	cursor: pointer;
}

.bpc-office__add-below[open] {
	padding: 0.5rem 0.75rem;
	border-left: 2px solid var(--accent);
}

.bpc-office__with-unit {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.bpc-office__with-unit input {
	max-width: 8rem;
}

/* In the order the site shows them, top to bottom, and not numbered (Ollie, 12 Oct: "I don't like the 123 look"). */
.bpc-office__featured {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-office__featured-row {
	padding: 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

/* Each row's fieldset carries its screen-reader legend and nothing on screen. */
.bpc-office__featured-set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Each badge as the site shows it: flat Ink on the site's Paper, whatever
 * its own colours (Ollie, 13 Oct: "The featured on logos should be black").
 * The Paper is the site's ground, kept in dark too, so a black badge never
 * sits on a dark panel. The theme's own PNGs are Ink already, and so is the
 * copy the theme makes of a logo from the Media Library
 * (uploads/brooklyn-featured/); one with no copy goes through the site's
 * Ink filter, printed with the list.
 */
.bpc-office__featured-badge {
	display: inline-block;
	padding: 0.375rem 0.5rem;
	border-radius: var(--radius-sm);
	background-color: var(--o-paper);
}

.bpc-office__featured-badge:empty {
	display: none;
}

.bpc-office__featured-badge img {
	display: block;
	max-height: 40px;
	width: auto;
}

.bpc-office__featured-badge img:not([src*="/assets/images/featured/"][src$=".png"]):not([src*="/brooklyn-featured/"]) {
	filter: url(#bpc-featured-tone);
}

.bpc-featured-on__tone {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.bpc-office__blocked {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-office__blocked li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line);
}

/* On a phone a row of choices scrolls sideways in one line, rather than
   wrapping into a lump. */
@media (max-width: 40rem) {
	.bpc-office__segmented,
	.bpc-office__tabs-inline {
		display: flex;
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bpc-office__segmented a,
	.bpc-office__tabs-inline a {
		flex: none;
		white-space: nowrap;
	}

	/* In a heading's actions the switch takes its own line, the full width, and scrolls. */
	.bpc-office__head-actions > .bpc-office__segmented {
		flex: 1 1 100%;
		min-width: 0;
	}

	.bpc-office__theme-pick[hidden] {
		display: flex;
	}
}

/* ---- A booking's quote ---------------------------------------------------- */

.bpc-office__quote input {
	width: 100%;
	min-width: 4rem;
}

.bpc-office__quote td:first-child input {
	min-width: 12rem;
}

.bpc-office__quote td:nth-child(2) input {
	max-width: 5rem;
}

.bpc-office__quote td:nth-child(3) input {
	max-width: 7rem;
}

.bpc-office__table .is-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---- Kitchen changes and food safety (3 Oct) -------------------------- */

.bpc-office__kchange-lines {
	margin: 0.375rem 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.125rem;
}

.bpc-office__kchange-meta {
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-office__kchange .bpc-office__form {
	margin-top: 0.5rem;
}

.bpc-office__print-only {
	display: none;
}

.bpc-office__missed {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--wash);
}

.bpc-office__missed p {
	margin: 0 0 0.25rem;
}

.bpc-office__check-due {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	margin: 0 0 0.5rem;
}

.bpc-office__record-pick {
	align-items: flex-end;
	gap: 0.75rem;
}

.bpc-office__record-run {
	break-inside: avoid;
}

.bpc-office__record-run .bpc-office__doc-h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.bpc-office__record-state {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--text-2);
}

.bpc-office__record-table th {
	padding: 0.375rem 0.5rem 0.375rem 0;
	text-align: left;
	font-size: var(--t-label);
	color: var(--text-2);
	border-bottom: 1px solid var(--line);
}

.bpc-office__record-table td {
	padding-right: 0.5rem;
	vertical-align: top;
	transition: background-color var(--o-dur-quick) var(--o-ease);
}

.bpc-office__record-table small {
	display: block;
	color: var(--text-2);
}

@media (max-width: 45.99rem) {
	.bpc-office__record-table {
		display: block;
		overflow-x: auto;
	}
}

/*
 * Website → Kind words (6 Oct 2026): each client's words as a quiet quote,
 * where it stands, and the office's hand. Palette and tokens only.
 */
.bpc-office__words-list {
	display: grid;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-office__words {
	padding-block-end: var(--gap);
	border-block-end: 1px solid var(--line);
}

.bpc-office__words:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.bpc-office__words > p {
	margin: 0 0 0.25rem;
}

.bpc-office__words blockquote {
	margin: 0.75rem 0;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--line-strong);
	color: var(--text);
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.bpc-office__words blockquote p {
	margin: 0;
}

.bpc-office__words blockquote footer {
	margin-block-start: 0.375rem;
	color: var(--text-2);
	font-size: var(--t-meta);
	white-space: normal;
}

.bpc-office__words.is-withdrawn blockquote {
	color: var(--text-2);
}

.bpc-office__words .bpc-office__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

.bpc-office__words textarea {
	width: 100%;
	box-sizing: border-box;
}

@media print {
	.bpc-office__print-only {
		display: block;
		font-weight: 700;
	}

	.bpc-office__kchange {
		border: 1px solid #0B0B0B;
	}

	.bpc-office__record-table {
		font-size: 9pt;
	}
}

/* ---- Table cards (Ollie, 6 Oct 2026; the gap study's item 6) ----------
 * Four A6 cards to an A4 sheet, then the allergen board. On screen, the
 * cards as they will print, in a grid that wraps on a phone; on paper,
 * their own A4 with no margin and a hairline to cut along. A dish that
 * can't be printed from its check says "Ask us about allergens" in the
 * accent. No figure on any of it.
 */
.bpc-office__tcards {
	display: block;
}

.bpc-office__tcards > * + * {
	margin-top: 1.5rem;
}

.bpc-office__tcard-sheet {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: 1rem;
}

.bpc-office__tcard {
	box-sizing: border-box;
	aspect-ratio: 105 / 148;
	padding: 1.5rem 1.25rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	overflow-wrap: anywhere;
}

.bpc-card__brand {
	margin: 0 0 1.25rem;
	font-size: var(--t-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-2);
}

.bpc-card__name {
	margin: 0 0 0.5rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--t-panel);
	font-style: italic;
	line-height: 1.15;
}

.bpc-card__diet {
	margin: 0 0 0.75rem;
	color: var(--text-2);
}

.bpc-card__marker {
	display: inline-block;
	padding: 0 0.375rem;
	border: 1px solid var(--text);
	border-radius: var(--radius);
	font-size: var(--t-meta);
	font-weight: 700;
	font-style: normal;
}

.bpc-card__label {
	margin: 0.75rem 0 0.125rem;
	font-size: var(--t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-2);
}

.bpc-card__allergens,
.bpc-card__may {
	margin: 0;
	line-height: 1.4;
}

.bpc-card__may {
	color: var(--text-2);
}

.bpc-card__ask {
	margin: 1rem 0 0;
	font-size: var(--t-body);
	font-weight: 700;
	color: var(--text);
}

.bpc-card__foot {
	margin: 1rem 0 0;
	font-size: var(--t-label);
	color: var(--text-2);
}

.bpc-office__tcard-board {
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.bpc-board__title {
	margin: 0 0 0.25rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--t-panel);
	font-style: italic;
	font-weight: 400;
}

.bpc-board__when,
.bpc-board__key {
	color: var(--text-2);
}

.bpc-board__table {
	width: 100%;
	border-collapse: collapse;
}

.bpc-board__table th,
.bpc-board__table td {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

@page bpc-cards {
	size: A4 portrait;
	margin: 0;
}

@media print {
	.bpc-office__tcards {
		page: bpc-cards;
		gap: 0;
	}

	.bpc-office__tcard-sheet {
		/* A hair under half an A4 each way, so a rounding never spills a sheet onto two pages. */
		grid-template-columns: 104mm 104mm;
		grid-auto-rows: 146mm;
		gap: 0;
		break-after: page;
		break-inside: avoid;
	}

	.bpc-office__tcards > * + * {
		margin-top: 0;
	}

	.bpc-office__tcard {
		aspect-ratio: auto;
		height: 146mm;
		padding: 12mm 10mm;
		border-radius: 0;
		border-color: #B7B8B8;
	}

	.bpc-office__tcard-board {
		padding: 18mm;
		border: 0;
	}
}

/* ---- Special-meal labels -----------------------------------------------
 * One sticker per dietary need ("Coeliac ×2"), eight to an A4 sheet. On
 * screen, the stickers as they will print; on paper, a hairline to cut
 * along. A need with no number says so. No money on any of it.
 */
.bpc-office__meals > * + * {
	margin-top: 1.5rem;
}

.bpc-office__meal-sheet {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
}

.bpc-office__meal {
	box-sizing: border-box;
	min-height: 8rem;
	padding: 1.25rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	overflow-wrap: anywhere;
}

.bpc-meal__brand,
.bpc-meal__when,
.bpc-meal__check {
	margin: 0;
	font-size: var(--t-label);
	color: var(--text-2);
}

.bpc-meal__brand {
	margin-bottom: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bpc-meal__name {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--t-panel);
	font-style: italic;
	line-height: 1.15;
}

.bpc-meal__mark {
	margin: 0.25rem 0 0;
	font-size: var(--t-title);
	font-weight: 700;
	line-height: 1;
}

.bpc-meal__line {
	margin: 0.25rem 0 0;
	line-height: 1.3;
}

.bpc-meal__when,
.bpc-meal__check {
	margin-top: 0.75rem;
}

@page bpc-meals {
	size: A4 portrait;
	margin: 0;
}

@media print {
	.bpc-office__meals {
		page: bpc-meals;
	}

	.bpc-office__meals > * + * {
		margin-top: 0;
	}

	.bpc-office__meal-sheet {
		/* A hair under half an A4 each way, so a rounding never spills a sheet onto two pages. */
		grid-template-columns: 104mm 104mm;
		grid-auto-rows: 72mm;
		gap: 0;
		break-after: page;
		break-inside: avoid;
	}

	.bpc-office__meal {
		height: 72mm;
		min-height: 0;
		padding: 8mm;
		border-radius: 0;
		border-color: #B7B8B8;
		overflow: hidden;
	}
}

/* ---- The Controls row (Ollie, 30 Oct 2026: "I can't delete events I can't
   change status I can't send welcome emails can do this can't do that") ---

   One row under a lead's, a client's and a booking's heading: the stage or
   status, Send a letter, Edit, More. Each is a sheet: a <details> whose
   summary is a 44px button and whose body is a panel. On a phone the body
   is a bottom sheet above the tab bar, with a backdrop; from an iPad up it
   drops in under the row, the row's full width. A sheet inside a sheet
   (Cancel, inside More) opens in place. Nothing here needs the script:
   every sheet is a plain <details> without it. */

.bpc-ctl {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--gap);
}

.bpc-ctl__slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.bpc-ctl__state {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--t-meta);
	color: var(--text-2);
}

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

.bpc-ctl__sheet > summary {
	list-style: none;
	min-height: 44px;
}

.bpc-ctl__sheet > summary::-webkit-details-marker {
	display: none;
}

.bpc-ctl__sheet > summary .bpc-ctl__chev {
	width: 1rem;
	height: 1rem;
	transform: rotate(90deg);
	transition: transform var(--o-dur) var(--o-ease);
}

.bpc-ctl__sheet[open] > summary .bpc-ctl__chev {
	transform: rotate(-90deg);
}

.bpc-ctl__body {
	box-sizing: border-box;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
	box-shadow: var(--shadow-pop);
	max-height: 80vh;
	overflow: auto;
	overscroll-behavior: contain;
	text-align: left;
	white-space: normal;
	font-weight: 400;
}

/* A sheet inside a sheet opens where it stands, inside the outer body. */
.bpc-ctl__body .bpc-ctl__body {
	position: static;
	max-height: none;
	overflow: visible;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0.75rem 0 0;
}

.bpc-ctl__body .bpc-ctl__sheet[open]::before {
	content: none;
}

.bpc-ctl__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.bpc-ctl__head .bpc-office__h2 {
	margin: 0;
}

.bpc-ctl__body .bpc-ctl__body .bpc-ctl__head {
	display: none;
}

.bpc-ctl__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.75rem;
	border-radius: var(--radius-ctl);
}

.bpc-ctl__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpc-ctl__menu > li {
	padding: 0.25rem 0;
	border-top: 1px solid var(--line);
}

.bpc-ctl__menu > li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bpc-ctl__menu > li > form,
.bpc-ctl__menu > li > .bpc-ctl__sheet {
	min-height: 44px;
}

.bpc-ctl__menu > li > form > .bpc-office__button,
.bpc-ctl__menu > li > .bpc-ctl__sheet > summary.bpc-office__button {
	width: 100%;
	justify-content: space-between;
	padding-inline: 0.5rem;
	background: transparent;
	border-color: transparent;
	color: var(--text) !important;
	font-weight: 400;
}

.bpc-ctl__menu > li > .bpc-ctl__why {
	padding: 0.625rem 0.5rem;
}

.bpc-ctl__list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.bpc-ctl__list > li + li {
	border-top: 1px solid var(--line);
}

.bpc-ctl__choice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.25rem 0.75rem;
	align-items: start;
	padding: 0.625rem 0;
	min-height: 44px;
	font-size: var(--t-body);
}

.bpc-ctl__choice > input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	accent-color: var(--accent);
}

.bpc-ctl__choice > :not(input) {
	grid-column: 2;
	min-width: 0;
}

.bpc-ctl__choice small,
.bpc-ctl__sent,
.bpc-ctl__why {
	display: block;
	font-size: var(--t-meta);
	color: var(--text-2);
}

.bpc-ctl__ticks {
	display: grid;
	gap: 0.25rem;
	margin: 0.25rem 0 0;
	padding: 0 0 0 0.25rem;
	border: 0;
}

.bpc-ctl__ticks label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	min-height: 44px;
}

.bpc-ctl__ticks input {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--accent);
}

.bpc-ctl__preview {
	display: block;
	width: 100%;
	height: 28rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-ctl);
	background: var(--surface);
}

/* A disclosure inside a sheet (a letter's Preview, which reuses the office's
   add-below pattern) is a 44px target, as everything in the row is (the
   controls pass merged, 30 Oct 2026). */
.bpc-ctl__body .bpc-office__add-below summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
}

/* The way round a refusal is a link inside a line of meta text ("Money →
   Agreement", "Add one on Edit"). Its hit area is 44px tall, by a
   pseudo-element, without the line growing (the controls pass QA, 30 Oct
   2026). */
.bpc-ctl__why a {
	position: relative;
	display: inline-block;
}

.bpc-ctl__why a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

/* A phone: a bottom sheet above the tab bar, under a backdrop. */
@media (max-width: 45.99rem) {
	.bpc-ctl__sheet[open]::before {
		content: "";
		position: fixed;
		inset: 0;
		/* Over the sticky header and the tab bar (both 20), under the sheet's
		   body (25): a tap anywhere beside the sheet closes it (QA, 30 Oct 2026). */
		z-index: 21;
		background: color-mix(in srgb, var(--o-ink) 32%, transparent);
	}

	.bpc-ctl__body {
		position: fixed;
		left: 0;
		right: 0;
		/* On the tab bar's top edge: its height, its hairline, the safe area. */
		bottom: calc(var(--tabs) + 1px + env(safe-area-inset-bottom));
		z-index: 25;
		border-radius: var(--radius) var(--radius) 0 0;
		border-bottom: 0;
	}
}

/* An iPad and up: a panel that drops in under the row, the row's width. */
@media (min-width: 46rem) {
	.bpc-ctl__body {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 0.5rem);
		z-index: 25;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.bpc-ctl__sheet[open] > .bpc-ctl__body {
		animation: o-arrive var(--o-dur) var(--o-ease-out) both;
	}
}

/* Internal menu builder: these controls exist only inside Brooklyn OS. */
.bpc-office .bpc-menus__stats,
.bpc-office .bpc-menus__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-block: 1rem;
}

.bpc-office .bpc-menus__actions .bpc-office__form {
	margin: 0;
}

.bpc-office .bpc-menus__table small {
	display: block;
	max-width: 32rem;
	overflow-wrap: anywhere;
}

.bpc-office .bpc-menus__table input {
	min-width: 0;
	width: 100%;
}

.bpc-office .bpc-menus__edit summary {
	cursor: pointer;
	min-height: 2.75rem;
	padding-block: 0.75rem;
}

/* Internal quote workspace and progressive line editor. */
.bpc-office__quote-context,
.bpc-office__quote-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
}
.bpc-office__quote-context > div { min-width: 0; }
.bpc-office__quote-context dt { font-size: .85rem; opacity: .75; }
.bpc-office__quote-context dd { margin: .3rem 0 0; overflow-wrap: anywhere; }
.bpc-office__quote-preview { padding: 1rem 0; }
.bpc-office__quote-preview output { display: block; font-size: 1.3rem; font-weight: 700; }
[data-quote-editor] input { min-width: 0; }
[data-quote-editor] [data-quote-line] { white-space: nowrap; }
@media (max-width: 700px) {
  [data-quote-editor].is-enhanced .bpc-office__table-wrap { overflow: visible; }
  [data-quote-editor].is-enhanced table,
  [data-quote-editor].is-enhanced tbody { display: block; width: 100%; }
  [data-quote-editor].is-enhanced thead { display: none; }
  [data-quote-editor].is-enhanced tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  [data-quote-editor].is-enhanced td { display: block; min-width: 0; padding: 0; border: 0; }
  [data-quote-editor].is-enhanced td:first-child { grid-column: 1 / -1; }
  [data-quote-editor].is-enhanced td::before { content: attr(data-label); display: block; margin-bottom: .35rem; font-size: .85rem; }
  [data-quote-editor].is-enhanced td input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
}
[data-quote-editor] [hidden] { display: none !important; }
.bpc-office__quote-preview p { margin: 0; }
[data-quote-editor] .bpc-office__check { min-height: 44px; gap: .5rem; }
[data-quote-editor] .bpc-office__quote input[type=checkbox] { width: 1.25rem; min-width: 1.25rem; flex: 0 0 1.25rem; }
@media (max-width: 700px) {
  .bpc-office__quote-preview { grid-template-columns: 1fr; gap: .5rem; }
  .bpc-office__quote-preview p { display: flex; justify-content: space-between; gap: 1rem; }
  .bpc-office__quote-preview output { font-size: 1.1rem; }
}