/**
 * BoltPress Child: site header (command bar, dropdown panels, mobile sheet,
 * command palette). Markup: template-parts/header-command.php. Behaviour:
 * assets/js/header.js.
 *
 * Every rule is scoped under the .bph wrapper so the theme's element rules
 * (a:hover, p, h3, button) cannot leak in. Radii use only the compiled
 * --boltpress-border-radius-* tokens; colours alias --boltpress-colors-* where
 * a matching token exists.
 *
 * @package BoltPress_Child
 * @since 1.0.9
 */

/* ============ Local tokens ============ */
.bph {
	--bg: var(--boltpress-colors-dark-bg);
	--y: var(--boltpress-colors-accent);
	--yh: #FFE433;
	--o: var(--boltpress-colors-accent-gradient-end);
	--navy: var(--boltpress-colors-primary);
	--cream: var(--boltpress-colors-background-alt);
	--green: var(--boltpress-colors-success);
	--t1: #fff;
	--t2: rgba(255,255,255,.76);
	--t3: rgba(255,255,255,.54);
	--line: rgba(255,255,255,.08);
	--line2: rgba(255,255,255,.14);
	--ink: var(--boltpress-colors-text);
	--muted: var(--boltpress-colors-text-muted);
	--border: var(--boltpress-colors-border);
	--fh: var(--boltpress-typography-font-family-heading);
	--fb: var(--boltpress-typography-font-family-body);
	--mono: ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,monospace;
	--out: cubic-bezier(.16,1,.3,1);
	--io: cubic-bezier(.65,0,.35,1);
	color: var(--t1);
	font-family: var(--fb);
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

/* ============ Base (scoped resets) ============ */
html.bph-is-locked {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* Anchor jumps land below the fixed bar */
html {
	scroll-padding-top: 84px;
}

.bph a {
	color: inherit;
}

.bph button {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.bph :focus-visible {
	outline: 2px solid var(--y);
	outline-offset: 2px;
}

.bph .bph-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bph .bph-ic {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/* ============ Header shell (v1 command bar) ============ */
.bph .bph-hdr {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	padding: 0 16px;
	pointer-events: none;
}

/* auto 1fr auto with the nav centred in the middle track: the leftover width splits evenly on both sides of the nav */
.bph .bph-bar {
	pointer-events: auto;
	position: relative;
	isolation: isolate;
	z-index: 2;
	margin: 0 auto;
	max-width: 1280px;
	height: 60px;
	translate: 0 10px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 16px;
	padding: 0 9px 0 18px;
	border-radius: var(--boltpress-border-radius-lg);
	transition: translate .6s var(--out);
}

/* glass layer + gradient hairline with a pointer-following glow; both fade in when the bar detaches */
.bph .bph-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(8,10,22,.9);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 22px 50px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
	opacity: 0;
	scale: 1.04 1.3;
	transition: opacity .45s,scale .6s var(--out);
}

.bph .bph-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	pointer-events: none;
	background: radial-gradient(200px 70px at var(--mx,50%) 0,rgba(255,220,0,.75),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
	-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	scale: 1.04 1.3;
	transition: opacity .45s,scale .6s var(--out);
}

.bph .bph-hdr.is-scrolled .bph-bar {
	translate: 0 12px;
}

.bph .bph-hdr.is-scrolled .bph-bar::before,
.bph .bph-hdr.is-scrolled .bph-bar::after {
	opacity: 1;
	scale: 1;
}

/* Logo slot: the Customizer logo (the_custom_logo) or the text logo fallback */
.bph .bph-brand {
	justify-self: start;
	display: flex;
	align-items: center;
	min-width: 0;
}

.bph .bph-brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: var(--boltpress-border-radius-md);
}

.bph .bph-brand .custom-logo {
	display: block;
	width: auto;
	height: 34px;
	max-width: 100%;
}

.bph .bph-logo {
	display: inline-flex;
	align-items: center;
	gap: .34em;
	padding: 6px 4px;
	border-radius: var(--boltpress-border-radius-md);
	font-family: var(--fh);
	font-weight: 700;
	font-size: 23px;
	line-height: 1;
	letter-spacing: -.01em;
	color: #fff;
	text-decoration: none;
}

.bph .bph-logo__mark {
	display: inline-grid;
	place-items: center;
	width: 1.22em;
	height: 1.22em;
	background: var(--y);
	box-shadow: .12em -.12em 0 rgba(255,220,0,.42);
	transition: transform .45s var(--out),box-shadow .45s var(--out);
}

.bph .bph-logo__mark svg {
	width: .8em;
	height: .8em;
	fill: #111;
}

.bph .bph-logo:hover .bph-logo__mark {
	transform: translate(1px,-1px);
	box-shadow: .2em -.2em 0 rgba(255,220,0,.3);
}

/* ============ Centre: nav + command trigger ============ */
.bph .bph-nav {
	justify-self: center;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 4px;
}

.bph .bph-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bph .bph-nav__li {
	display: flex;
	align-items: center;
	height: 100%;
}

.bph .bph-nav__item {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 38px;
	padding: 0 13px;
	border-radius: var(--boltpress-border-radius-md);
	font-family: var(--fh);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .005em;
	color: var(--t2);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}

.bph .bph-nav__item:hover,
.bph .bph-nav__item[aria-expanded="true"],
.bph .bph-nav__item:focus-visible {
	color: #fff;
}

.bph .bph-nav__item.is-current::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: var(--boltpress-border-radius-full);
	background: var(--y);
}

.bph .bph-nav__chev {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
	opacity: .6;
	transition: transform .35s var(--out),opacity .2s,color .2s;
}

.bph .bph-nav__item[aria-expanded="true"] .bph-nav__chev {
	transform: rotate(180deg);
	opacity: 1;
	color: var(--y);
}

/* v2's item highlight (soft fill + hairline), on the 4px control radius instead of v2's full pill */
.bph .bph-nav__spot {
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--w,0px);
	height: 38px;
	translate: var(--x,0px) -50%;
	border-radius: var(--boltpress-border-radius-md);
	pointer-events: none;
	opacity: 0;
	background: rgba(255,255,255,.075);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
	transition: translate .35s var(--out),width .35s var(--out),opacity .2s;
}

.bph .bph-nav__spot.is-on {
	opacity: 1;
}

/* first appearance jumps into place instead of gliding from the last spot */
.bph .bph-nav__spot.is-jump {
	transition: none;
}

.bph .bph-nav__sep {
	width: 1px;
	height: 20px;
	margin: 0 10px 0 8px;
	background: var(--line2);
}

/* The "What is broken?" trigger is the hero of the bar: yellow hairline, the logo's square tile,
   and the tile's offset shadow (up and to the right). */
.bph .bph-find {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 264px;
	height: 40px;
	padding: 0 6px;
	border-radius: var(--boltpress-border-radius-md);
	background: linear-gradient(180deg,rgba(255,220,0,.075),rgba(255,220,0,.02)),#0b0d1c;
	border: 1px solid rgba(255,220,0,.5);
	color: rgba(255,255,255,.9);
	font-family: var(--fb);
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	text-align: left;
	box-shadow: 4px -4px 0 rgba(255,220,0,.3);
	transition: color .2s,border-color .2s,box-shadow .35s var(--out);
}

.bph .bph-find:hover,
.bph .bph-find:focus-visible {
	border-color: var(--y);
	color: #fff;
	box-shadow: 6px -6px 0 rgba(255,220,0,.36);
}

.bph .bph-find:focus-visible {
	outline-offset: 4px;
}

.bph .bph-find__tile {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: var(--boltpress-border-radius-sm);
	background: var(--y);
	color: var(--navy);
}

.bph .bph-find__tile .bph-ic {
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
}

.bph .bph-find__ticker {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 22px;
	overflow: hidden;
}

.bph .bph-find__ticker>span {
	position: absolute;
	inset: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 22px;
	transition: translate .55s var(--out),opacity .4s;
}

.bph .bph-find__ticker>.is-sym {
	color: #fff;
}

.bph .bph-find__ticker>.is-enter {
	translate: 0 100%;
	opacity: 0;
	transition: none;
}

.bph .bph-find__ticker>.is-leave {
	translate: 0 -100%;
	opacity: 0;
}

.bph .bph-find .bph-kbd {
	flex: none;
}

.bph .bph-kbd {
	display: inline-grid;
	grid-auto-flow: column;
	gap: 3px;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--boltpress-border-radius-sm);
	background: rgba(255,255,255,.07);
	border: 1px solid var(--line2);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--t2);
}

/* ============ Right: Audit + primary ============ */
.bph .bph-acts {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
}

.bph .bph-aud-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 14px 0 13px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid var(--line2);
	background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
	color: #fff;
	text-decoration: none;
	font-family: var(--fh);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	transition: border-color .2s,background-color .2s,box-shadow .3s;
}

.bph .bph-aud-btn:hover {
	border-color: rgba(255,220,0,.5);
	box-shadow: 0 8px 24px -12px rgba(255,220,0,.55);
}

.bph .bph-aud-btn__wp {
	width: 16px;
	height: 16px;
	fill: currentColor;
	flex: none;
}

.bph .bph-ver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 18px;
	padding-left: 10px;
	border-left: 1px solid var(--line2);
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(255,220,0,.88);
}

.bph .bph-dot {
	width: 7px;
	height: 7px;
	border-radius: var(--boltpress-border-radius-full);
	background: rgba(255,255,255,.3);
	flex: none;
}

.bph .is-live .bph-dot {
	background: var(--green);
	animation: bph-pulse 2.4s ease-out infinite;
}

@keyframes bph-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(72,187,120,.55);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(72,187,120,0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(72,187,120,0);
	}
}

.bph .bph-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 18px;
	border-radius: var(--boltpress-border-radius-md);
	background: var(--y);
	color: var(--navy);
	font-family: var(--fh);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.12),0 8px 24px -10px rgba(255,220,0,.7);
	transition: background-color .2s,translate .25s var(--out);
}

.bph .bph-cta:hover {
	background: var(--yh);
	translate: 0 -1px;
}

.bph .bph-acts .bph-mb {
	display: none;
}

/* ============ Morphing dropdown: one stage morphs, panels cross-fade over it ============ */
.bph .bph-stage {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 2;
	width: var(--sw,400px);
	height: var(--sh,200px);
	translate: var(--sx,0px) 0;
	border-radius: var(--boltpress-border-radius-lg);
	pointer-events: none;
	background: rgba(9,12,26,.96);
	-webkit-backdrop-filter: blur(28px) saturate(160%);
	backdrop-filter: blur(28px) saturate(160%);
	border: 1px solid var(--line2);
	box-shadow: 0 44px 100px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
	opacity: 0;
	scale: .97;
	transform-origin: 50% 0;
	visibility: hidden;
	transition: width .4s var(--out),height .4s var(--out),translate .4s var(--out),opacity .16s,scale .16s,visibility 0s .16s;
}

.bph .bph-stage::before {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg,transparent,rgba(255,220,0,.7),rgba(255,149,0,.55),transparent);
}

.bph .bph-stage.is-open {
	opacity: 1;
	scale: 1;
	visibility: visible;
	transition: width .4s var(--out),height .4s var(--out),translate .4s var(--out),opacity .22s,scale .34s var(--out),visibility 0s;
}

.bph .bph-stage.is-instant {
	transition: opacity .22s,scale .34s var(--out),visibility 0s;
}

/* v2's pointer: a small diamond under the open item that glides with the morph */
.bph .bph-stage__caret {
	position: absolute;
	top: -6px;
	left: 0;
	width: 12px;
	height: 12px;
	background: rgb(9,12,27);
	border-left: 1px solid var(--line2);
	border-top: 1px solid var(--line2);
	border-radius: var(--boltpress-border-radius-sm) 0 0 0;
	translate: var(--cx,0px) 0;
	rotate: 45deg;
	transition: translate .4s var(--out);
}

.bph .bph-stage.is-instant .bph-stage__caret {
	transition: none;
}

.bph .bph-panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 3;
	translate: var(--px,0px) 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .14s,visibility 0s .14s;
}

.bph .bph-panel.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .22s .03s,visibility 0s;
}

.bph .bph-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.bph .bph-panel.is-open .bph-panel__in {
	animation: bph-pIn .36s var(--out) both;
}

.bph .bph-panel.is-open[data-from="right"] .bph-panel__in {
	animation-name: bph-pInR;
}

.bph .bph-panel.is-open[data-from="left"] .bph-panel__in {
	animation-name: bph-pInL;
}

@keyframes bph-pIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@keyframes bph-pInR {
	from {
		opacity: 0;
		transform: translateX(32px);
	}
}

@keyframes bph-pInL {
	from {
		opacity: 0;
		transform: translateX(-32px);
	}
}

.bph .bph-panel--svc {
	width: min(1160px,calc(100vw - 32px));
}

.bph .bph-panel--tools {
	width: 760px;
}

.bph .bph-panel--care {
	width: 440px;
}

.bph .bph-panel--co {
	width: 640px;
}

/* Menu item (one style for every panel, the sheet and the palette tile) */
.bph .bph-mi {
	position: relative;
	display: grid;
	grid-template-columns: 36px minmax(0,1fr);
	gap: 12px;
	align-items: start;
	padding: 9px 10px;
	border-radius: var(--boltpress-border-radius-md);
	color: #fff;
	text-decoration: none;
	transition: background-color .2s;
}

.bph .bph-tile {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--boltpress-border-radius-md);
	background: rgba(255,255,255,.045);
	border: 1px solid var(--line);
	color: var(--t2);
	transition: background-color .2s,color .2s,border-color .2s,box-shadow .3s var(--out),translate .3s var(--out);
}

.bph .bph-tile .bph-ic {
	width: 18px;
	height: 18px;
}

.bph .bph-mi__txt {
	min-width: 0;
	padding-top: 1px;
}

.bph .bph-mi__t {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fh);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.25;
	letter-spacing: .005em;
}

.bph .bph-mi__go {
	width: 14px;
	height: 14px;
	margin-left: auto;
	color: var(--y);
	opacity: 0;
	translate: -6px 0;
	transition: opacity .2s,translate .3s var(--out);
}

.bph .bph-mi__d {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--t3);
	text-wrap: pretty;
	transition: color .2s;
}

.bph .bph-mi:hover,
.bph .bph-mi:focus-visible {
	background: rgba(255,255,255,.055);
}

/* hover turns the icon into the logo's yellow tile, offset shadow included */
.bph .bph-mi:hover .bph-tile,
.bph .bph-mi:focus-visible .bph-tile,
.bph .bph-po[aria-selected="true"] .bph-tile {
	background: var(--y);
	border-color: var(--y);
	color: #111;
	box-shadow: 3px -3px 0 rgba(255,220,0,.32);
	translate: -1px 1px;
}

.bph .bph-mi:hover .bph-mi__go,
.bph .bph-mi:focus-visible .bph-mi__go {
	opacity: 1;
	translate: 0 0;
}

.bph .bph-mi:hover .bph-mi__d,
.bph .bph-mi:focus-visible .bph-mi__d {
	color: var(--t2);
}

/* Preview panels: the yellow tile follows .is-active (the item the preview shows); a focused or hovered item that is not
   driving the preview rests, so the yellow tile never marks two items at once. Services keeps only a quiet tint at rest */
.bph .bph-panel--pv .bph-mi.is-active {
	background: rgba(255,255,255,.035);
}

.bph .bph-panel--pv .bph-mi:not(.is-active):hover {
	background: none;
}

.bph .bph-panel--pv .bph-mi:not(.is-active) .bph-tile {
	background: rgba(255,255,255,.045);
	border-color: var(--line);
	color: var(--t2);
	box-shadow: none;
	translate: 0 0;
}

.bph .bph-panel--pv .bph-mi:not(.is-active) .bph-mi__go {
	opacity: 0;
	translate: -6px 0;
}

.bph .bph-panel--pv .bph-mi:not(.is-active) .bph-mi__d {
	color: var(--t3);
}

/* Tools and Company (v2): the item the preview shows is marked at rest too */
.bph .bph-panel--tools .bph-mi.is-active,
.bph .bph-panel--co .bph-mi.is-active {
	background: rgba(255,255,255,.055);
}

.bph .bph-panel--tools .bph-mi.is-active .bph-tile,
.bph .bph-panel--co .bph-mi.is-active .bph-tile {
	background: var(--y);
	border-color: var(--y);
	color: #111;
	box-shadow: 3px -3px 0 rgba(255,220,0,.32);
	translate: -1px 1px;
}

.bph .bph-panel--tools .bph-mi.is-active .bph-mi__go,
.bph .bph-panel--co .bph-mi.is-active .bph-mi__go {
	opacity: 1;
	translate: 0 0;
}

.bph .bph-panel--tools .bph-mi.is-active .bph-mi__d,
.bph .bph-panel--co .bph-mi.is-active .bph-mi__d {
	color: var(--t2);
}

.bph .bph-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

/* ---- Services mega (v2 "Fixes" mega, kept, plus a separate Ongoing care band) ---- */
/* --svc-pad / --svc-gap are shared by the fix grid, its footer and the care band so every heading and tile line agrees */
.bph .bph-panel--svc {
	--svc-pad: 22px;
	--svc-gap: 22px;
	--pv: 300px;
	--mi-px: 10px;
}

.bph .bph-panel--svc .bph-mi {
	padding-inline: var(--mi-px);
}

.bph .bph-svc__grid {
	display: grid;
	grid-template-columns: minmax(0,1fr) var(--pv);
	gap: var(--svc-gap);
	padding: 20px var(--svc-pad) 0;
}

.bph .bph-sec__h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px 10px;
	font-family: var(--fh);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/* section marker: the logo's square tile in miniature, offset shadow included (bigger than the 6px column dots) */
.bph .bph-sec__h::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	background: var(--y);
	box-shadow: 2px -2px 0 rgba(255,220,0,.35);
}

.bph .bph-sec__h::after {
	content: "";
	flex: 1;
	min-width: 12px;
	height: 1px;
	background: linear-gradient(90deg,var(--line2),transparent);
}

.bph .bph-sec__sub {
	font-family: var(--fb);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--t3);
}

.bph .bph-svc__cols {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 6px 18px;
	align-content: start;
}

.bph .bph-mg__h {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 8px 10px;
	font: 700 11px/1 var(--fb);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--t3);
}

.bph .bph-mg__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--boltpress-border-radius-sm);
}

.bph .bph-mg__dot--yellow {
	background: var(--y);
}

.bph .bph-mg__dot--orange {
	background: var(--o);
}

.bph .bph-mg__dot--cream {
	background: var(--cream);
}

.bph .bph-panel--pv .bph-mg {
	opacity: 0;
	translate: 0 6px;
	transition: opacity .3s,translate .45s var(--out);
}

.bph .bph-panel--pv.is-open .bph-mg {
	opacity: 1;
	translate: 0 0;
}

.bph .bph-panel--pv.is-open .bph-mg:nth-child(2) {
	transition-delay: .04s;
}

.bph .bph-panel--pv.is-open .bph-mg:nth-child(3) {
	transition-delay: .08s;
}

.bph .bph-svc__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding: 12px var(--svc-pad);
	border-top: 1px solid var(--line);
}

.bph .bph-svc__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 12px;
	color: var(--t3);
}

.bph .bph-svc__links {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.bph .bph-flink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px 0 14px;
	border-radius: var(--boltpress-border-radius-md);
	color: var(--navy);
	background: var(--y);
	font: 700 13.5px/1 var(--fh);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s;
}

.bph .bph-flink .bph-ic {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
	transition: translate .25s var(--out);
}

.bph .bph-flink:hover {
	background: var(--yh);
}

.bph .bph-flink:hover .bph-ic {
	translate: 3px 0;
}

.bph .bph-flink--ghost {
	background: transparent;
	color: var(--t2);
	padding: 0 12px;
	font-weight: 600;
}

.bph .bph-flink--ghost:hover {
	background: rgba(255,255,255,.06);
	color: #fff;
}

.bph .bph-flink--line {
	background: rgba(255,255,255,.06);
	color: #fff;
	border: 1px solid var(--line2);
}

.bph .bph-flink--line:hover {
	background: rgba(255,255,255,.1);
}

/* Ongoing care: its own band, visibly apart from the one-off fixes above it */
/* The first track is one fix column plus its gap (100% minus --mi-px is the fix grid width), so the Care plans tile lands on
   column 2's tile line; the right padding leaves room for the link's own padding so the Compare cue lines up with All fixes */
.bph .bph-care {
	display: grid;
	grid-template-columns: calc((100% - var(--mi-px) - var(--pv) - var(--svc-gap) - 36px) / 3 + 18px) minmax(0,1fr);
	align-items: center;
	padding: 10px calc(var(--svc-pad) - var(--mi-px)) 10px var(--svc-pad);
	border-top: 1px solid var(--line2);
	border-radius: 0 0 var(--boltpress-border-radius-lg) var(--boltpress-border-radius-lg);
	background: linear-gradient(90deg,rgba(255,220,0,.07),rgba(255,246,219,.025) 45%,rgba(255,149,0,.05));
}

.bph .bph-care .bph-sec__h {
	margin: 0 0 0 10px;
}

.bph .bph-care .bph-sec__h::after {
	display: none;
}

.bph .bph-mi--care {
	grid-template-columns: 36px minmax(0,1fr) auto;
	align-items: center;
}

.bph .bph-mi--care .bph-mi__txt {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 0;
}

.bph .bph-mi--care .bph-mi__d {
	margin: 0;
}

.bph .bph-mi__cue {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 12px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid rgba(255,220,0,.35);
	color: var(--y);
	font: 700 13.5px/1 var(--fh);
	white-space: nowrap;
	transition: background-color .2s,border-color .2s;
}

.bph .bph-mi__cue .bph-ic {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
	transition: translate .25s var(--out);
}

.bph .bph-mi--care.is-active:hover .bph-mi__cue,
.bph .bph-mi--care:focus-visible .bph-mi__cue {
	background: rgba(255,220,0,.1);
	border-color: var(--y);
}

.bph .bph-mi--care.is-active:hover .bph-mi__cue .bph-ic,
.bph .bph-mi--care:focus-visible .bph-mi__cue .bph-ic {
	translate: 3px 0;
}

/* Product UI preview card (v2) */
.bph .bph-pv {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	border-radius: var(--boltpress-border-radius-lg);
	overflow: hidden;
	background: radial-gradient(90% 70% at 105% 100%,rgba(255,149,0,.32),transparent 60%),radial-gradient(60% 50% at 0% 0%,rgba(255,220,0,.10),transparent 70%), radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(160deg,#002650,#00132a 70%);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}

.bph .bph-pv__stage {
	position: relative;
	flex: 1;
	min-height: 196px;
	perspective: 900px;
}

.bph .bph-pv__layer {
	position: absolute;
	inset: 0;
	animation: bph-pvIn .5s var(--out) both;
}

.bph .bph-pv__layer.is-leaving {
	animation: bph-pvOut .25s ease both;
}

@keyframes bph-pvIn {
	from {
		opacity: 0;
		transform: translate3d(14px,8px,0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bph-pvOut {
	to {
		opacity: 0;
		transform: translate3d(-10px,-4px,0);
	}
}

.bph .bph-pv__cap {
	position: relative;
	min-height: 84px;
	padding: 0 16px 16px;
}

.bph .bph-pv__kick {
	margin: 0 0 6px;
	font: 600 10px/1 var(--mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--y);
}

.bph .bph-pv__title {
	margin: 0;
	font: 700 16px/1.2 var(--fh);
	color: #fff;
}

.bph .bph-pv__desc {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--t2);
}

.bph .bph-pw {
	position: absolute;
	left: 20px;
	right: -34px;
	top: 22px;
	height: 168px;
	border-radius: var(--boltpress-border-radius-lg);
	background: #fff;
	color: var(--ink);
	font-family: var(--fb);
	font-size: 9.5px;
	line-height: 1.3;
	transform: rotateY(-13deg) rotateX(5deg) rotateZ(-2.5deg);
	transform-origin: 0 50%;
	box-shadow: 0 30px 50px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.4);
}

.bph .bph-pw__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--boltpress-border-radius-lg) var(--boltpress-border-radius-lg) 0 0;
	background: #F1F3F7;
	border-bottom: 1px solid #E2E8F0;
}

.bph .bph-pw__dots {
	display: inline-flex;
	gap: 4px;
}

.bph .bph-pw__dots i {
	width: 6px;
	height: 6px;
	border-radius: var(--boltpress-border-radius-full);
	background: #CBD2DC;
}

.bph .bph-pw__url {
	flex: 1;
	min-width: 0;
	height: 13px;
	padding: 0 6px;
	border-radius: var(--boltpress-border-radius-sm);
	background: #fff;
	border: 1px solid #E2E8F0;
	font: 500 8px/12px var(--mono);
	color: #718096;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bph .bph-pw__body {
	position: relative;
	padding: 11px 48px 11px 13px;
}

.bph .bph-pw__h {
	margin: 0 0 8px;
	font: 700 11.5px/1 var(--fh);
	color: #1a202c;
}

.bph .bph-sk {
	display: block;
	height: 6px;
	margin: 7px 0 0;
	border-radius: var(--boltpress-border-radius-sm);
	background: #EDF0F5;
}

.bph .bph-sk--10 {
	width: 10%;
}

.bph .bph-sk--22 {
	width: 22%;
}

.bph .bph-sk--40 {
	width: 40%;
}

.bph .bph-sk--54 {
	width: 54%;
}

.bph .bph-sk--60 {
	width: 60%;
}

.bph .bph-sk--70 {
	width: 70%;
}

.bph .bph-sk--100 {
	width: 100%;
}

.bph .bph-sk--r {
	margin: 0 0 0 auto;
}

.bph .bph-sk--field {
	height: 14px;
	border-radius: var(--boltpress-border-radius-sm);
	background: #fff;
	border: 1px solid #E2E8F0;
	margin: 0 0 5px;
}

.bph .bph-pg-nav {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-bottom: 10px;
}

.bph .bph-pg-nav .bph-sk {
	margin: 0;
}

.bph .bph-pg-nav .bph-sk--r {
	margin-left: auto;
}

.bph .bph-pg-nav .bph-sk--r+.bph-sk--r {
	margin-left: 0;
}

.bph .bph-pe {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 9px 10px;
	border-radius: var(--boltpress-border-radius-md);
	background: #FFF5F5;
	border: 1px solid #FED7D7;
	color: #742A2A;
	font-weight: 700;
	font-size: 10px;
	line-height: 1.35;
}

.bph .bph-pe__m {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bph .bph-pe__ic {
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	flex: none;
	border-radius: var(--boltpress-border-radius-sm);
	background: #E53E3E;
	color: #fff;
	font: 800 9px/1 var(--fh);
}

.bph .bph-pe--banner {
	margin: 6px 0;
}

.bph .bph-pb {
	position: relative;
	height: 112px;
	display: grid;
	place-items: center;
}

.bph .bph-pb__cursor {
	position: absolute;
	left: 30%;
	top: 40%;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 12px solid #1a202c;
	transform: rotate(-30deg);
}

.bph .bph-pb__m {
	font: 600 9px/1 var(--mono);
	color: #A0AEC0;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bph .bph-pb .bph-loop {
	left: 22%;
	top: 30%;
	width: 56%;
	height: 40%;
}

.bph .bph-pf {
	margin-bottom: 2px;
}

.bph .bph-pbtn {
	display: inline-block;
	margin-top: 2px;
	padding: 5px 10px;
	border-radius: var(--boltpress-border-radius-sm);
	background: #A0AEC0;
	color: #fff;
	font: 700 9px/1 var(--fh);
}

.bph .bph-prow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid #EDF0F5;
	margin-bottom: 5px;
	color: #4A5568;
}

.bph .bph-prow b {
	font: 700 9.5px/1 var(--fh);
	color: #1a202c;
}

.bph .bph-prow em {
	margin-left: auto;
}

.bph .bph-prow--hl {
	background: #FFFAF0;
}

.bph .bph-pgroup {
	position: relative;
}

.bph .bph-pchip {
	display: inline-flex;
	align-items: center;
	height: 15px;
	padding: 0 6px;
	white-space: nowrap;
	border-radius: var(--boltpress-border-radius-sm);
	font: 700 8px/1 var(--fb);
	font-style: normal;
	letter-spacing: .02em;
}

.bph .bph-pchip--bad {
	background: #FED7D7;
	color: #9B2C2C;
}

.bph .bph-pchip--warn {
	background: #FEEBC8;
	color: #9C4221;
}

.bph .bph-pchip--ok {
	background: #C6F6D5;
	color: #22543D;
}

.bph .bph-pm {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr 58px;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
}

.bph .bph-pm b {
	font: 700 9.5px/1 var(--mono);
	color: #1a202c;
}

.bph .bph-pm em {
	font: 700 9px/1 var(--fb);
	font-style: normal;
	text-align: right;
}

.bph .bph-pm__bar {
	height: 6px;
	border-radius: var(--boltpress-border-radius-sm);
	background: #EDF0F5;
	overflow: hidden;
}

.bph .bph-pm__bar i {
	display: block;
	height: 100%;
}

.bph .bph-pm--bad .bph-pm__bar i {
	width: 88%;
	background: #E53E3E;
}

.bph .bph-pm--bad em {
	color: #C53030;
}

.bph .bph-pm--mid .bph-pm__bar i {
	width: 55%;
	background: var(--o);
}

.bph .bph-pm--mid em {
	color: #C05621;
}

.bph .bph-pm--ok .bph-pm__bar i {
	width: 22%;
	background: var(--green);
}

.bph .bph-pm--ok em {
	color: #2F855A;
}

.bph .bph-pd {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 6px;
	margin-bottom: 4px;
}

.bph .bph-pd__t {
	position: relative;
	padding: 7px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid #E2E8F0;
	font: 700 10.5px/1.2 var(--fh);
	color: #1a202c;
}

.bph .bph-pd__t b {
	display: block;
	font: 500 7.5px/1 var(--mono);
	color: var(--muted);
	margin-bottom: 4px;
}

.bph .bph-pd__t span {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 5px;
	font: 600 7.5px/1.2 var(--fb);
	color: #4A5568;
}

.bph .bph-pd__t .bph-ic {
	width: 8px;
	height: 8px;
	color: var(--green);
	stroke-width: 3;
}

.bph .bph-pd__t .bph-dot {
	width: 5px;
	height: 5px;
	background: var(--green);
}

.bph .bph-pd__t--hl {
	border-color: #9AE6B4;
}

/* yellow hand-drawn loop marker (SVG stroke, no radius) */
.bph .bph-loop {
	position: absolute;
	left: -12px;
	top: -9px;
	width: calc(100% + 24px);
	height: calc(100% + 18px);
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}

.bph .bph-loop path {
	fill: none;
	stroke: var(--y);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: bph-draw .75s .18s var(--io) forwards;
	filter: drop-shadow(0 0 3px rgba(255,220,0,.35));
}

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

.bph .bph-pt {
	position: absolute;
	left: 12px;
	bottom: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 9px;
	border-radius: var(--boltpress-border-radius-md);
	background: #fff;
	border-left: 3px solid var(--green);
	box-shadow: 0 16px 34px -10px rgba(0,0,0,.6);
	opacity: 0;
	transform: translateY(10px) scale(.96);
	animation: bph-ptIn .55s .55s var(--out) forwards;
}

@keyframes bph-ptIn {
	to {
		opacity: 1;
		transform: none;
	}
}

.bph .bph-pt__ic {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: var(--boltpress-border-radius-sm);
	background: #F0FFF4;
	color: #2F855A;
	box-shadow: inset 0 0 0 1px #9AE6B4;
}

.bph .bph-pt__ic .bph-ic {
	width: 10px;
	height: 10px;
	stroke-width: 3;
}

.bph .bph-pt__t {
	display: block;
	font: 700 11px/1.15 var(--fh);
	color: #1a202c;
}

.bph .bph-pt__s {
	display: block;
	font: 500 9px/1.2 var(--fb);
	color: var(--muted);
	margin-top: 2px;
}

/* ---- Tools and Company: v2's dropdown (group heading, list, preview card, footer) on the token radii ---- */
.bph .bph-panel--tools {
	--svc-pad: 22px;
	--svc-gap: 22px;
	--pv: 320px;
}

.bph .bph-panel--co {
	--svc-pad: 22px;
	--svc-gap: 22px;
	--pv: 280px;
}

.bph .bph-panel--tools .bph-mi {
	padding-block: 12px;
}

.bph .bph-svc__grid--one {
	padding-top: 22px;
	padding-bottom: 0;
}

.bph .bph-panel--tools .bph-svc__foot,
.bph .bph-panel--co .bph-svc__foot {
	padding-block: 14px;
	background: rgba(255,255,255,.022);
	border-radius: 0 0 var(--boltpress-border-radius-lg) var(--boltpress-border-radius-lg);
}

/* one caption height for one- and two-line descriptions, so the panel does not jump between items */
.bph .bph-panel--tools .bph-pv__cap,
.bph .bph-panel--co .bph-pv__cap {
	min-height: 91px;
}

/* v2's green live badge on the menu item (the bar and palette keep the yellow chip) */
.bph .bph-panel .bph-mi .bph-vchip {
	height: 18px;
	background: rgba(72,187,120,.14);
	border-color: rgba(72,187,120,.3);
	color: #c6f6d5;
	font-size: 10px;
}

.bph .bph-flink--ghost .bph-ic {
	color: var(--t3);
}

.bph .bph-flink--ghost:hover .bph-ic {
	translate: 0 0;
}

/* v2 preview scenes used by Tools and Company */
.bph .bph-pw__h small {
	margin-left: 6px;
	font: 600 8px/1 var(--mono);
	letter-spacing: .04em;
	color: var(--muted);
}

.bph .bph-prow--lead em {
	margin-left: 0;
	min-width: 40px;
	justify-content: center;
}

.bph .bph-pchip--mid {
	background: #FEFCBF;
	color: #744210;
}

.bph .bph-pu {
	position: relative;
	margin-bottom: 9px;
}

.bph .bph-pu b {
	display: block;
	margin-bottom: 4px;
	font: 700 9.5px/1 var(--fh);
	color: #1a202c;
}

.bph .bph-pu__bars {
	display: flex;
	gap: 2px;
}

.bph .bph-pu__bars i {
	flex: 1;
	height: 14px;
	border-radius: var(--boltpress-border-radius-sm);
	background: #68D391;
}

.bph .bph-pu__bars i.is-down {
	background: #E53E3E;
}

.bph .bph-pa {
	position: relative;
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 8px;
	margin-bottom: 6px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid #E2E8F0;
}

.bph .bph-pa__av {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--boltpress-border-radius-full);
	background: var(--cream);
	color: var(--navy);
}

.bph .bph-pa__av .bph-ic {
	width: 14px;
	height: 14px;
}

.bph .bph-pa b {
	display: block;
	font: 700 10.5px/1.2 var(--fh);
	color: #1a202c;
}

.bph .bph-pa span {
	font-size: 8.5px;
	color: var(--muted);
}

.bph .bph-pl {
	position: relative;
	padding: 6px 8px;
	margin-bottom: 5px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid #EDF0F5;
}

.bph .bph-pl b {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 700 9.5px/1.25 var(--fh);
	color: #1a202c;
}

.bph .bph-pc p {
	position: relative;
	display: flex;
	gap: 8px;
	margin: 0 0 5px;
	padding: 0 0 5px;
	border-bottom: 1px solid #EDF0F5;
	font-weight: 700;
	font-size: 9.5px;
	color: #1a202c;
}

.bph .bph-pc p span {
	width: 40px;
	color: var(--muted);
	font-weight: 600;
}

.bph .bph-sk--50 {
	width: 50%;
}

.bph .bph-sk--64 {
	width: 64%;
}

.bph .bph-sk--76 {
	width: 76%;
}

.bph .bph-sk--80 {
	width: 80%;
}

.bph .bph-sk--90 {
	width: 90%;
}

/* ---- Care plans dropdown ---- */
.bph .bph-dd {
	padding: 12px;
}

.bph .bph-dd .bph-mi {
	padding-block: 11px;
}

.bph .bph-tip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 12px 22px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--t3);
}

.bph .bph-tip .bph-kbd {
	min-width: 22px;
	height: 22px;
}

.bph .bph-tip a {
	color: #fff;
	font-weight: 700;
	text-decoration-color: rgba(255,220,0,.6);
	text-underline-offset: 3px;
}

.bph .bph-vchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 7px;
	border-radius: var(--boltpress-border-radius-sm);
	background: rgba(255,220,0,.08);
	border: 1px solid rgba(255,220,0,.2);
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	color: rgba(255,220,0,.9);
}

.bph .bph-vchip .bph-dot {
	width: 6px;
	height: 6px;
}

/* ============ Command palette ============ */
.bph .bph-pal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 12vh 16px 16px;
}

.bph .bph-pal[hidden] {
	display: none;
}

.bph .bph-pal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(3,4,12,.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .22s;
}

.bph .bph-pal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(680px,100%);
	max-height: min(580px,78vh);
	border-radius: var(--boltpress-border-radius-lg);
	overflow: hidden;
	background: rgba(12,14,30,.96);
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 60px 120px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
	opacity: 0;
	translate: 0 -10px;
	scale: .98;
	transition: opacity .2s,translate .34s var(--out),scale .34s var(--out);
}

.bph .bph-pal.is-open .bph-pal__scrim {
	opacity: 1;
}

.bph .bph-pal.is-open .bph-pal__box {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

.bph .bph-pal__field {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 66px;
	padding: 0 14px 0 20px;
	border-bottom: 1px solid var(--line);
}

.bph .bph-pal__field::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg,transparent,rgba(255,220,0,.7),transparent);
	opacity: 0;
	transition: opacity .3s;
}

.bph .bph-pal__field:focus-within::after {
	opacity: 1;
}

/* the input has no outline of its own, so the whole field row carries a clear focus ring (WCAG 2.4.7) */
.bph .bph-pal__field:focus-within {
	box-shadow: inset 0 0 0 2px var(--y);
}

.bph .bph-pal__field>.bph-ic {
	width: 20px;
	height: 20px;
	color: var(--y);
}

.bph .bph-pal__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: none;
	color: #fff;
	font-family: var(--fh);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -.005em;
	margin: 0;
	padding: 1px 2px;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.bph .bph-pal__input::placeholder {
	color: var(--t3);
	font-weight: 500;
}

.bph .bph-pal__input::-webkit-search-cancel-button {
	display: none;
}

.bph .bph-pal__esc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 9px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid var(--line2);
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--t3);
}

.bph .bph-pal__esc:hover {
	color: #fff;
}

.bph .bph-pal__esc-x {
	display: none;
}

.bph .bph-pal__esc .bph-ic {
	width: 16px;
	height: 16px;
}

.bph .bph-pal__list {
	flex: 1;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 6px 8px 10px;
}

.bph .bph-pal__gh {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--t3);
}

.bph .bph-po {
	position: relative;
	display: grid;
	grid-template-columns: 36px minmax(0,1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 8px 12px 8px 10px;
	border-radius: var(--boltpress-border-radius-md);
	cursor: pointer;
}

.bph .bph-po[aria-selected="true"] {
	background: rgba(255,255,255,.06);
}

.bph .bph-po[aria-selected="true"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 2px;
	border-radius: var(--boltpress-border-radius-sm);
	background: var(--y);
	box-shadow: 0 0 10px rgba(255,220,0,.8);
}

.bph .bph-po__txt {
	min-width: 0;
}

.bph .bph-po__t {
	display: block;
	overflow: hidden;
	font-family: var(--fh);
	font-weight: 600;
	font-size: 15.5px;
	color: #fff;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bph .bph-po__d {
	display: block;
	overflow: hidden;
	font-size: 13px;
	color: var(--t3);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bph .bph-po__go {
	opacity: 0;
	transition: opacity .15s;
}

.bph .bph-po[aria-selected="true"] .bph-po__go {
	opacity: 1;
}

.bph .bph-po mark {
	background: none;
	color: var(--y);
}

.bph .bph-pal__empty {
	padding: 28px 24px 30px;
	text-align: center;
}

.bph .bph-pal__empty[hidden] {
	display: none;
}

.bph .bph-pal__empty h3 {
	margin: 0 0 6px;
	font-family: var(--fh);
	font-size: 20px;
	font-weight: 700;
	line-height: inherit;
	color: #fff;
}

.bph .bph-pal__empty p {
	margin: 0 auto 18px;
	max-width: 380px;
	font-size: 14px;
	color: var(--t2);
}

.bph .bph-pal__empty-acts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.bph .bph-pal__empty .bph-flink {
	height: 40px;
	padding: 0 16px;
}

.bph .bph-pal__foot {
	flex: none;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 16px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--t3);
}

.bph .bph-pal__foot span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bph .bph-pal__foot .bph-kbd {
	min-width: 22px;
	height: 22px;
	font-size: 11px;
}

.bph .bph-pal__foot .bph-pal__alt {
	margin-left: auto;
}

/* ============ Mobile sheet ============ */
.bph .bph-sheet {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding-top: 76px;
	pointer-events: auto;
	background: radial-gradient(120% 55% at 100% 0%,rgba(255,149,0,.14),transparent 55%),radial-gradient(110% 50% at 0% 100%,rgba(0,31,63,.95),transparent 70%),var(--bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s,visibility 0s .28s;
}

.bph .bph-sheet.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .28s,visibility 0s;
}

.bph .bph-sheet__scroll {
	flex: 1;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 10px 20px 28px;
}

.bph .bph-sheet__find {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: calc(100% - 5px);
	height: 56px;
	margin-top: 5px;
	padding: 0 10px;
	border-radius: var(--boltpress-border-radius-md);
	background: linear-gradient(180deg,rgba(255,220,0,.075),rgba(255,220,0,.02)),#0b0d1c;
	border: 1px solid rgba(255,220,0,.5);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-align: left;
	box-shadow: 5px -5px 0 rgba(255,220,0,.3);
}

.bph .bph-sheet__find .bph-find__tile {
	width: 36px;
	height: 36px;
}

.bph .bph-sheet__find .bph-find__tile .bph-ic {
	width: 18px;
	height: 18px;
}

.bph .bph-sheet__find>span:not(.bph-find__tile) {
	flex: 1;
}

.bph .bph-sx {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.bph .bph-sx>li {
	border-bottom: 1px solid var(--line);
	opacity: 0;
	translate: 0 12px;
	transition: opacity .2s,translate .2s;
}

.bph .bph-sheet.is-open .bph-sx>li {
	opacity: 1;
	translate: 0 0;
	transition: opacity .45s var(--d,80ms),translate .6s var(--out) var(--d,80ms);
}

.bph .bph-sx>li:nth-child(2) {
	--d: 120ms;
}

.bph .bph-sx>li:nth-child(3) {
	--d: 160ms;
}

.bph .bph-sx>li:nth-child(4) {
	--d: 200ms;
}

.bph .bph-sx__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 68px;
	font-family: var(--fh);
	font-weight: 700;
	font-size: 31px;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: #fff;
	text-align: left;
}

.bph .bph-sx__btn .bph-ic {
	width: 22px;
	height: 22px;
	color: var(--t3);
	transition: transform .4s var(--out),color .2s;
}

.bph .bph-sx__btn[aria-expanded="true"] .bph-ic {
	transform: rotate(45deg);
	color: var(--y);
}

.bph .bph-sx__btn[aria-expanded="true"] {
	color: var(--y);
}

.bph .bph-sx__panel {
	margin: 0 -20px;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s var(--out);
}

.bph .bph-sx__panel>div {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s .4s;
}

.bph .bph-sx__panel.is-open {
	grid-template-rows: 1fr;
}

.bph .bph-sx__panel.is-open>div {
	visibility: visible;
	transition: visibility 0s;
}

.bph .bph-sx__inner {
	padding: 0 20px 18px;
}

.bph .bph-sx .bph-mi {
	padding: 9px 0;
}

.bph .bph-sx .bph-mi:hover {
	background: none;
}

.bph .bph-sx .bph-sec__h {
	margin: 4px 0 12px;
}

.bph .bph-sx .bph-mg__h {
	margin: 14px 0 4px;
}

.bph .bph-sx__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 8px;
	margin-top: 12px;
}

.bph .bph-sx__links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.bph .bph-care--m {
	display: block;
	margin-top: 18px;
	padding: 12px 12px 4px;
	border: 1px solid var(--line2);
	border-radius: var(--boltpress-border-radius-md);
	background: linear-gradient(120deg,rgba(255,220,0,.07),rgba(255,149,0,.04));
}

.bph .bph-care--m .bph-sec__h {
	margin: 2px 0 6px;
}

.bph .bph-care--m .bph-mi--care .bph-mi__txt {
	display: block;
}

.bph .bph-care--m .bph-mi--care .bph-mi__d {
	margin-top: 3px;
}

.bph .bph-care--m .bph-mi__go {
	opacity: 1;
	translate: 0 0;
	width: 18px;
	height: 18px;
}

/* in the sheet the caption drops under its heading instead of running past the edge */
.bph .bph-sx .bph-sec__h {
	flex-wrap: wrap;
	row-gap: 6px;
	white-space: normal;
}

.bph .bph-sx .bph-sec__h::after {
	display: none;
}

.bph .bph-sx .bph-sec__sub {
	flex-basis: 100%;
	padding-left: 19px;
}

.bph .bph-sheet__mail {
	margin: 22px 0 0;
	font-size: 15px;
	color: var(--t3);
}

.bph .bph-sheet__mail a {
	color: #fff;
	font-weight: 700;
	text-decoration-color: rgba(255,220,0,.6);
	text-underline-offset: 3px;
}

.bph .bph-sheet__acts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: rgba(5,5,16,.86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.bph .bph-sheet__acts .bph-aud-btn,
.bph .bph-sheet__acts .bph-cta {
	justify-content: center;
	height: 50px;
	font-size: 16px;
}

.bph .bph-burger {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--boltpress-border-radius-md);
}

.bph .bph-burger span {
	position: absolute;
	left: 13px;
	width: 18px;
	height: 2px;
	border-radius: var(--boltpress-border-radius-sm);
	background: #fff;
	transition: translate .4s var(--out),rotate .4s var(--out);
}

.bph .bph-burger span:nth-child(1) {
	translate: 0 -4px;
}

.bph .bph-burger span:nth-child(2) {
	translate: 0 4px;
}

.bph .bph-burger[aria-expanded="true"] span:nth-child(1) {
	translate: 0 0;
	rotate: 45deg;
}

.bph .bph-burger[aria-expanded="true"] span:nth-child(2) {
	translate: 0 0;
	rotate: -45deg;
}

.bph .bph-icon-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-right: 6px;
	border-radius: var(--boltpress-border-radius-md);
	border: 1px solid rgba(255,220,0,.5);
	background: #0b0d1c;
	color: var(--y);
	box-shadow: 3px -3px 0 rgba(255,220,0,.3);
}

.bph .bph-icon-btn .bph-ic {
	width: 18px;
	height: 18px;
	stroke-width: 2.2;
}

/* the open sheet has its own large What is broken? button; hidden (not just faded) keeps it out of the Tab order */
.bph .bph-hdr.is-sheet .bph-acts .bph-icon-btn {
	visibility: hidden;
}

/* ============ Responsive ============ */
@media (max-width:1279px) {
	.bph .bph-bar {
		column-gap: 12px;
	}

	/* keep the "What is broken?" label; recover the room from the version chip, the shortcut hint and item padding */
	.bph .bph-find {
		width: 200px;
		padding-right: 12px;
	}

	.bph .bph-find .bph-kbd {
		display: none;
	}

	.bph .bph-bar .bph-ver {
		display: none;
	}

	.bph .bph-nav__item {
		padding: 0 10px;
	}

	.bph .bph-nav__sep {
		margin: 0 8px 0 4px;
	}
}

@media (max-width:1239px) {
	.bph .bph-panel--svc {
		--pv: 250px;
	}

	.bph .bph-panel--svc .bph-mi__go {
		display: none;
	}

	.bph .bph-panel--svc {
		--mi-px: 8px;
	}

	.bph .bph-panel--svc .bph-mi {
		gap: 10px;
	}

	/* narrower preview: less bleed past the card edge so banners stay inside it, banners capped at three lines (all clear the toast),
	   and one checkout field fewer so Place order clears the success toast */
	.bph .bph-panel--svc .bph-pw {
		right: -12px;
	}

	.bph .bph-panel--svc .bph-pw__body {
		padding-right: 22px;
	}

	.bph .bph-panel--svc .bph-pf .bph-sk--field+.bph-sk--field {
		display: none;
	}
}

@media (max-width:1139px) {
	.bph .bph-find {
		width: 176px;
	}

	.bph .bph-nav__item {
		padding: 0 8px;
	}

	.bph .bph-acts {
		gap: 6px;
	}

	.bph .bph-aud-btn {
		padding: 0 12px;
	}

	.bph .bph-cta {
		padding: 0 15px;
	}

	.bph .bph-panel--svc {
		--pv: 216px;
	}

	.bph .bph-panel--svc {
		--svc-pad: 16px;
		--svc-gap: 16px;
	}
}

@media (max-width:1023px) {
	.bph .bph-hdr {
		padding: 0 8px;
	}

	.bph .bph-bar {
		grid-template-columns: 1fr auto;
		height: 56px;
		padding: 0 4px 0 14px;
		translate: 0 6px;
	}

	/* one fewer live blur on phones: the detached bar goes near-opaque instead */
	.bph .bph-bar::before {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(8,10,22,.96);
	}

	.bph .bph-pal__esc-k {
		display: none;
	}

	.bph .bph-pal__esc-x {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.bph .bph-pal__esc {
		height: 36px;
		padding: 0 12px;
		font-family: var(--fb);
		font-size: 14px;
		font-weight: 700;
		color: #fff;
	}

	.bph .bph-pal__foot,
	.bph .bph-po__go {
		display: none;
	}

	.bph .bph-hdr.is-scrolled .bph-bar {
		translate: 0 8px;
	}

	.bph .bph-nav,
	.bph .bph-acts>.bph-aud-btn,
	.bph .bph-acts>.bph-cta {
		display: none;
	}

	.bph .bph-acts .bph-mb {
		display: grid;
	}

	.bph .bph-logo {
		font-size: 21px;
	}

	.bph .bph-brand .custom-logo {
		height: 30px;
	}

	.bph .bph-acts {
		gap: 2px;
	}
}

@media (max-width:640px) {
	.bph .bph-pal {
		padding: 0;
	}

	.bph .bph-pal__box {
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
		border: 0;
		background: #0a0c1b;
	}

	.bph .bph-pal__field {
		height: 64px;
		padding-top: env(safe-area-inset-top);
	}
}

@media (max-width:359px) {
	.bph .bph-sx__btn {
		font-size: 27px;
	}

	.bph .bph-sheet__acts .bph-ver {
		display: none;
	}
}

@media (min-width:1024px) {
	.bph .bph-sheet {
		display: none;
	}
}

/* touch: a tap must not leave an item looking hovered */
@media (hover:none) {
	.bph .bph-mi:hover:not(:focus-visible) {
		background: none;
	}

	.bph .bph-mi:hover:not(:focus-visible) .bph-tile {
		background: rgba(255,255,255,.045);
		border-color: var(--line);
		color: var(--t2);
		box-shadow: none;
		translate: 0 0;
	}

	.bph .bph-mi:hover:not(:focus-visible) .bph-mi__go {
		opacity: 0;
	}

	.bph .bph-care--m .bph-mi:hover .bph-mi__go {
		opacity: 1;
	}
}

@media (prefers-reduced-motion:reduce) {
	.bph *,
	.bph *::before,
	.bph *::after {
		animation-duration: .001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
	}

	.bph .is-live .bph-dot {
		animation: none;
	}
}

/* ============ Theme integration ============ */
/* WordPress admin bar: the fixed header, sheet and palette sit below it */
.admin-bar .bph .bph-hdr,
.admin-bar .bph .bph-sheet,
.admin-bar .bph .bph-pal {
	top: 32px;
}

@media screen and (max-width:782px) {
	.admin-bar .bph .bph-hdr,
	.admin-bar .bph .bph-sheet,
	.admin-bar .bph .bph-pal {
		top: 46px;
	}
}

html:has(body.admin-bar) {
	scroll-padding-top: 116px;
}

@media screen and (max-width:782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: 122px;
	}
}

/* Without header.js (disabled, blocked or not run yet) the bar keeps its glass so it stays readable over white sections */
.bph:not(.bph--js) .bph-bar::before,
.bph:not(.bph--js) .bph-bar::after {
	opacity: 1;
	scale: 1;
}

/* ...and the dropdowns open on hover and keyboard focus. Do not hide .bph-find or show the mobile CTAs here: header.js would reflow the bar on load (CLS). */
.bph:not(.bph--js) .bph-nav__li:hover > .bph-panel,
.bph:not(.bph--js) .bph-nav__li:focus-within > .bph-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .22s .03s,visibility 0s;
}

.bph:not(.bph--js) .bph-panel__in {
	background: rgba(9,12,26,.98);
	border: 1px solid var(--line2);
	border-radius: var(--boltpress-border-radius-lg);
}

.bph:not(.bph--js) .bph-panel--pv .bph-mg {
	opacity: 1;
	translate: none;
}

/* fixed resolves against .bph-bar (its translate makes it the containing block), so the wide panel centres on the bar, not the nav */
.bph:not(.bph--js) .bph-panel--svc {
	position: fixed;
	left: 50%;
	translate: -50% 0;
}

.bph:not(.bph--js) .bph-pv {
	display: none;
}