/**
 * Secondary processes modal: shell, tab bar, rail, stage and Overview pane.
 * Relies on the core stylesheet for the --quoteandcut-* tokens and the
 * quoteandcut-modal-* keyframes.
 */

/* Overlay. */

.quoteandcut-sp-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow: auto;
	background: rgba(15, 23, 42, 0.68);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	animation: quoteandcut-modal-fade-in 0.16s ease-out forwards;
}

.quoteandcut-sp-overlay.is-fullscreen {
	padding: 8px;
}

.quoteandcut-sp-overlay.is-closing {
	animation: quoteandcut-modal-fade-out 0.16s ease-in forwards;
}

.quoteandcut-sp-modal {
	width: min(1360px, calc(100vw - 48px));
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: calc(var(--quoteandcut-radius-lg) + 8px);
	background: var(--quoteandcut-card-bg);
	box-shadow: 0 28px 90px rgba(15, 23, 42, 0.34), var(--quoteandcut-shadow-lg);
	color: var(--quoteandcut-text-primary);
	font-family: var(--quoteandcut-font-body, var(--quoteandcut-default-body-font, var(--quoteandcut-font-family)));
	transform: translateY(10px) scale(0.98);
	animation: quoteandcut-modal-pop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.quoteandcut-sp-overlay.is-fullscreen .quoteandcut-sp-modal {
	width: calc(100vw - 16px);
	height: calc(100vh - 16px);
	height: calc(100dvh - 16px);
	max-height: calc(100vh - 16px);
	max-height: calc(100dvh - 16px);
	border-radius: var(--quoteandcut-radius-lg);
}

.quoteandcut-sp-overlay.is-closing .quoteandcut-sp-modal {
	animation: quoteandcut-modal-pop-out 0.16s ease-in forwards;
}

/* Header. */

.quoteandcut-sp-modal__header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 28px 16px 24px;
	border-bottom: 1px solid var(--quoteandcut-border-color);
	background: var(--quoteandcut-card-bg);
}

/* File type icon: a cube for STEP models, a plate for drawings. */
.quoteandcut-sp-modal__file {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--quoteandcut-accent-soft, #fff1e8);
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
}

.quoteandcut-sp-modal__file .quoteandcut-sp-icon {
	width: 24px;
	height: 24px;
}

.quoteandcut-sp-modal__heading {
	flex: 1 1 auto;
	min-width: 0;
}

.quoteandcut-sp-modal__title {
	margin: 0;
	max-width: min(760px, 58vw);
	overflow: hidden;
	color: var(--quoteandcut-text-primary);
	font-family: var(--quoteandcut-font-heading, var(--quoteandcut-font-body, var(--quoteandcut-font-family)));
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 700;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-modal__subtitle {
	margin: 3px 0 0;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.35;
}

/* "Part 1 of 2" shows in the stepper on desktop and in the subtitle on phones. */
.quoteandcut-sp-modal__subtitle-count {
	display: none;
}

.quoteandcut-sp-modal__header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Previous and next part, so multi-part jobs need not reopen the dialog. */
.quoteandcut-sp-modal__stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 12px;
	background: var(--quoteandcut-card-bg);
}

.quoteandcut-sp-modal__stepper[hidden] {
	display: none;
}

.quoteandcut-sp-modal__step {
	position: relative;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}

.quoteandcut-sp-modal__step::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quoteandcut-sp-modal__step--previous::before {
	transform: scaleX(-1);
}

.quoteandcut-sp-modal__step:hover {
	background: var(--quoteandcut-bg-color);
}

.quoteandcut-sp-modal__step:disabled {
	background: transparent;
	color: var(--quoteandcut-text-muted, #94a3b8);
	cursor: not-allowed;
	opacity: 0.45;
}

.quoteandcut-sp-modal__step:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 0;
}

.quoteandcut-sp-modal__step-count {
	padding: 0 8px;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
}

.quoteandcut-sp-modal__step-count:empty {
	display: none;
}

/* Flat or folded toggle. The stage has a copy for phones, where the header has no room. */
.quoteandcut-sp-modal__mode,
.quoteandcut-sp-stage__mode {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 12px;
	background: var(--quoteandcut-bg-color);
}

.quoteandcut-sp-modal__mode[hidden],
.quoteandcut-sp-stage__mode,
.quoteandcut-sp-stage__mode[hidden] {
	display: none;
}

.quoteandcut-sp-modal__mode-button {
	min-height: 36px;
	/* Fits the longest label ("Drawing") so the width is stable between parts. */
	min-width: 5.25em;
	padding: 0 16px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--quoteandcut-text-secondary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-bold, 700);
	line-height: 1;
	transition: background 0.16s ease, color 0.16s ease;
}

.quoteandcut-sp-modal__mode-button:hover {
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-modal__mode-button.is-active,
.quoteandcut-sp-modal__mode-button.is-active:hover {
	background: var(--quoteandcut-accent-primary, #ff7618);
	color: var(--quoteandcut-text-on-accent, #ffffff);
}

.quoteandcut-sp-modal__mode-button:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 1px;
}

.quoteandcut-sp-modal__fullscreen,
.quoteandcut-sp-modal__close {
	position: relative;
	display: inline-flex;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 12px;
	background: var(--quoteandcut-card-bg);
	color: var(--quoteandcut-text-secondary);
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.quoteandcut-sp-modal__fullscreen::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quoteandcut-sp-modal__fullscreen[data-sp-fullscreen-on="true"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E");
}

.quoteandcut-sp-modal__fullscreen:hover,
.quoteandcut-sp-modal__fullscreen:focus-visible,
.quoteandcut-sp-modal__close:hover,
.quoteandcut-sp-modal__close:focus-visible {
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	background: var(--quoteandcut-bg-color);
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-modal__close::before,
.quoteandcut-sp-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.quoteandcut-sp-modal__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.quoteandcut-sp-modal__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.quoteandcut-sp-modal__close:focus-visible,
.quoteandcut-sp-modal__fullscreen:focus-visible,
.quoteandcut-sp-modal__done:focus-visible,
.quoteandcut-sp-stage__button:focus-visible,
.quoteandcut-sp-added__item:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

/* Protect the modal's type and box model from theme CSS. */
.quoteandcut-sp-modal *,
.quoteandcut-sp-modal *::before,
.quoteandcut-sp-modal *::after {
	box-sizing: border-box;
}

.quoteandcut-sp-modal button {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	text-shadow: none;
}

.quoteandcut-sp-modal h2,
.quoteandcut-sp-modal h3 {
	padding: 0;
	letter-spacing: normal;
	text-transform: none;
}

.quoteandcut-sp-pane-error {
	margin: 0;
	color: var(--quoteandcut-danger-color, #dc2626);
	font-size: 0.9rem;
	line-height: 1.45;
}

/* Body. */

.quoteandcut-sp-modal__body {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	flex: 1 1 auto;
	min-height: 420px;
	height: min(720px, calc(100vh - 210px));
	height: min(720px, calc(100dvh - 210px));
	overflow: hidden;
	background: var(--quoteandcut-bg-color, #f4f7f6);
}

/* Panes that only preview the part leave more width for their controls. */
.quoteandcut-sp-modal__body[data-sp-stage-size="preview"] {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.quoteandcut-sp-overlay.is-fullscreen .quoteandcut-sp-modal__body {
	height: auto;
	min-height: 0;
}

/* Rail. */

.quoteandcut-sp-rail {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: transparent;
}

.quoteandcut-sp-rail__notices {
	flex: 0 0 auto;
}

/*
 * Tab bar. It sits under the header so the pane keeps the rail's full
 * height. Tabs wrap with a mouse and scroll sideways on touch screens.
 */

.quoteandcut-sp-modal__tabbar {
	position: relative;
	flex: 0 0 auto;
	padding: 0 20px;
	border-bottom: 1px solid var(--quoteandcut-border-color);
	background: var(--quoteandcut-card-bg);
}

/*
 * Fade the overflowing edge so the row reads as scrollable. On touch sizes
 * the scrollbar is hidden, so this is the only cue.
 */
.quoteandcut-sp-modal__tabbar::before,
.quoteandcut-sp-modal__tabbar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 28px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease;
}

.quoteandcut-sp-modal__tabbar::before {
	left: 0;
	background: linear-gradient(to right, var(--quoteandcut-card-bg), rgba(255, 255, 255, 0));
}

.quoteandcut-sp-modal__tabbar::after {
	right: 0;
	background: linear-gradient(to left, var(--quoteandcut-card-bg), rgba(255, 255, 255, 0));
}

.quoteandcut-sp-modal__tabbar.has-overflow-start::before,
.quoteandcut-sp-modal__tabbar.has-overflow-end::after {
	opacity: 1;
}

.quoteandcut-sp-modal__tabbar[hidden] {
	display: none;
}

.quoteandcut-sp-rail__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 0;
	padding: 0;
}

/* Tab: icon tile (a tick once set), name and state, underlined when active. */
.quoteandcut-sp-rail__tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	max-width: 100%;
	min-height: 60px;
	padding: 0 14px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-md, 14px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	line-height: 1.25;
	text-align: left;
	transition: color 0.14s ease, border-color 0.14s ease;
}

/* Names are already dark, so hover darkens the icon instead. */
.quoteandcut-sp-rail__tab:hover .quoteandcut-sp-rail__tab-icon {
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-rail__tab:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: -2px;
}

.quoteandcut-sp-rail__tab.is-active {
	border-bottom-color: var(--quoteandcut-accent-primary, #ff7618);
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-rail__tab.is-active .quoteandcut-sp-rail__tab-label {
	font-weight: var(--quoteandcut-weight-bold, 700);
}

.quoteandcut-sp-rail__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--quoteandcut-bg-color);
	color: var(--quoteandcut-text-secondary);
	transition: background 0.14s ease, color 0.14s ease;
}

.quoteandcut-sp-rail__tab-icon .quoteandcut-sp-icon {
	width: 16px;
	height: 16px;
}

.quoteandcut-sp-rail__tab.is-active .quoteandcut-sp-rail__tab-icon {
	background: var(--quoteandcut-accent-soft, #fff1e8);
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
}

/* Tab icon animations, played once on hover or focus. Drawn strokes use
   pathLength="1" (set in sp-modal.js), so a dash of 1 covers the whole
   stroke. Unavailable tabs and reduced motion stay still. */
.quoteandcut-sp-rail__tab-icon .qc-ico-tick,
.quoteandcut-sp-rail__tab-icon .qc-ico-line,
.quoteandcut-sp-rail__tab-icon .qc-ico-cut,
.quoteandcut-sp-rail__tab-icon .qc-ico-base {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

.quoteandcut-sp-rail__tab-icon .qc-ico-flap,
.quoteandcut-sp-rail__tab-icon .qc-ico-ring,
.quoteandcut-sp-rail__tab-icon .qc-ico-pen,
.quoteandcut-sp-rail__tab-icon .qc-ico-trigger,
.quoteandcut-sp-rail__tab-icon .qc-ico-dot {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.quoteandcut-sp-rail__tab-icon .qc-ico-flap {
	transform-origin: 50% 100%;
}

.quoteandcut-sp-rail__tab-icon .qc-ico-pen {
	transform-origin: 0% 100%;
}

.quoteandcut-sp-rail__tab-icon .qc-ico-trigger {
	transform-origin: 50% 0%;
}

@keyframes qc-ico-tick-redraw {
	0% { stroke-dashoffset: 0; opacity: 1; }
	22% { stroke-dashoffset: 0; opacity: 0; }
	23% { stroke-dashoffset: 1; opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes qc-ico-wipe {
	0% { stroke-dashoffset: 0; }
	1% { stroke-dashoffset: 1; }
	100% { stroke-dashoffset: 0; }
}

/* Overshoots past upright, then settles. */
@keyframes qc-ico-fold {
	0% { transform: scaleY(0.08); }
	70% { transform: scaleY(1.12); }
	100% { transform: scaleY(1); }
}

@keyframes qc-ico-pulse {
	0%, 55% { transform: scale(1); }
	78% { transform: scale(1.09); }
	100% { transform: scale(1); }
}

@keyframes qc-ico-write {
	0% { transform: translate(-3.5px, 0.6px) rotate(-7deg); }
	100% { transform: translate(0, 0) rotate(0); }
}

@keyframes qc-ico-squeeze {
	0% { transform: rotate(0); }
	25% { transform: rotate(24deg); }
	60% { transform: rotate(24deg); }
	100% { transform: rotate(0); }
}

@keyframes qc-ico-spray {
	0% { transform: scale(0); opacity: 0; }
	55% { transform: scale(1.45); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-tick,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-tick {
	animation: qc-ico-tick-redraw 0.65s ease-out both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-line,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-line {
	animation: qc-ico-wipe 0.38s ease-out both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-line--2,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-line--2 {
	animation-delay: 0.11s;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-line--3,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-line--3 {
	animation-delay: 0.22s;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-flap,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-flap {
	animation: qc-ico-fold 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-cut,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-cut {
	animation: qc-ico-wipe 0.6s ease-in-out both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-ring,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-ring {
	animation: qc-ico-pulse 0.75s ease-out both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-base,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-base {
	animation: qc-ico-wipe 0.55s ease-out both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-pen,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-pen {
	animation: qc-ico-write 0.55s ease-out both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-trigger,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-trigger {
	animation: qc-ico-squeeze 0.6s ease-in-out both;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-dot,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-dot {
	animation: qc-ico-spray 0.32s ease-out both;
}

/* Stagger the spray dots, nearest the nozzle first. */
.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-dot--1,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-dot--1 {
	animation-delay: 0.12s;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-dot--2,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-dot--2 {
	animation-delay: 0.19s;
}

.quoteandcut-sp-rail__tab:not(.is-unavailable):hover .qc-ico-dot--3,
.quoteandcut-sp-rail__tab:not(.is-unavailable):focus-visible .qc-ico-dot--3 {
	animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-sp-rail__tab-icon .quoteandcut-sp-icon * {
		animation: none !important;
	}
}

.quoteandcut-sp-rail__tab.is-set:not(.is-pending) .quoteandcut-sp-rail__tab-icon {
	background: var(--quoteandcut-success-soft, #ebf6f0);
	color: var(--quoteandcut-success-color, #38a169);
}

/* Enabled but incomplete, e.g. a powder colour with no finish. */
.quoteandcut-sp-rail__tab.is-pending .quoteandcut-sp-rail__tab-icon {
	background: var(--quoteandcut-warning-soft, #fff7ed);
	color: var(--quoteandcut-warning-text, #b45309);
}

.quoteandcut-sp-rail__tab-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.quoteandcut-sp-rail__tab-label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-rail__tab-state {
	max-width: 260px;
	overflow: hidden;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: var(--quoteandcut-weight-medium, 500);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-rail__tab.is-unavailable {
	color: var(--quoteandcut-text-muted, #94a3b8);
}

.quoteandcut-sp-rail__tab.is-unavailable .quoteandcut-sp-rail__tab-icon {
	color: var(--quoteandcut-text-muted, #94a3b8);
}

.quoteandcut-sp-rail__tab.is-unavailable .quoteandcut-sp-rail__tab-state {
	color: var(--quoteandcut-text-muted, #94a3b8);
}

.quoteandcut-sp-rail__tab.is-pending .quoteandcut-sp-rail__tab-state {
	color: var(--quoteandcut-warning-text, #b45309);
}

.quoteandcut-sp-rail__tab.has-notice .quoteandcut-sp-rail__tab-label::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--quoteandcut-warning-color, #f59e0b);
	vertical-align: middle;
}

.quoteandcut-sp-rail__notices:empty {
	display: none;
}

/* A short action (Undo) sits beside the text and a longer one wraps below.
   The dismiss button stays top right. */
.quoteandcut-sp-rail__notice {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: start;
	gap: 2px 8px;
	margin: 14px 20px 0;
	padding: 10px 10px 10px 12px;
	border: 1px solid var(--quoteandcut-warning-border, #fde68a);
	border-left: 3px solid var(--quoteandcut-warning-color, #f59e0b);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-warning-soft, #fffbeb);
	color: var(--quoteandcut-text-primary);
	font-size: 0.84rem;
	line-height: 1.4;
}

.quoteandcut-sp-rail__notice-text {
	grid-column: 1;
	min-width: 0;
}

.quoteandcut-sp-rail__notice-dismiss {
	grid-column: 3;
	grid-row: 1;
}

/* Short actions sit beside the text; .is-long moves them to their own line. */
.quoteandcut-sp-rail__notice-undo {
	grid-column: 2;
	grid-row: 1;
}

.quoteandcut-sp-rail__notice-undo.is-long {
	grid-column: 1 / 3;
	grid-row: 2;
	justify-self: start;
	padding-left: 0;
}

.quoteandcut-sp-rail__notice-undo {
	flex: 0 0 auto;
	padding: 2px 6px;
	border: 0;
	background: transparent;
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.quoteandcut-sp-rail__notice-dismiss {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--quoteandcut-text-secondary);
	cursor: pointer;
}

.quoteandcut-sp-rail__notice-dismiss::before,
.quoteandcut-sp-rail__notice-dismiss::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.quoteandcut-sp-rail__notice-dismiss::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.quoteandcut-sp-rail__pane {
	flex: 1 1 auto;
	min-height: 0;
	padding: 20px 20px 24px;
	overflow: auto;
	outline: none;
}

/* Overview lays out its own cards; every other pane is a single card. */
.quoteandcut-sp-rail__pane:not([data-sp-active="overview"]) {
	margin: 20px;
	padding: 18px 20px 22px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 14px;
	background: var(--quoteandcut-card-bg, #ffffff);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.quoteandcut-sp-rail__notices:not(:empty) + .quoteandcut-sp-rail__pane {
	margin-top: 12px;
}

/* Join the card to a status bar pinned below it (powder coating). */
.quoteandcut-sp-rail__pane:not([data-sp-active="overview"]):has(+ .quoteandcut-sp-rail__footer:not(:empty)) {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
}

.quoteandcut-sp-rail__footer:not(:empty) {
	margin: 0 20px 20px;
}

.quoteandcut-sp-rail.is-single .quoteandcut-sp-rail__pane {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 26px;
}

/* Overview. */

/* Line icons from sp-modal.js, in the surrounding text colour. */
.quoteandcut-sp-icon {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.quoteandcut-sp-overview {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* Status banner: ready to price, or what needs attention. */
.quoteandcut-sp-status {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 14px;
	padding: 14px 16px;
	border: 1px solid var(--quoteandcut-success-color, #38a169);
	border-radius: 14px;
	background: var(--quoteandcut-success-soft, #ebf6f0);
	color: var(--quoteandcut-success-text, #307d58);
}

.quoteandcut-sp-status--warning {
	border-color: var(--quoteandcut-warning-border, #fed7aa);
	background: var(--quoteandcut-warning-soft, #fff7ed);
	color: var(--quoteandcut-warning-text, #b45309);
}

.quoteandcut-sp-status--error {
	border-color: var(--quoteandcut-danger-color, #e53e3e);
	background: var(--quoteandcut-danger-soft, #fdf0f0);
	color: var(--quoteandcut-danger-text, #c93a3b);
}

.quoteandcut-sp-status__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--quoteandcut-success-color, #38a169);
	color: var(--quoteandcut-text-on-success, #ffffff);
}

.quoteandcut-sp-status--warning .quoteandcut-sp-status__badge {
	background: var(--quoteandcut-warning-color, #f59e0b);
}

.quoteandcut-sp-status--error .quoteandcut-sp-status__badge {
	background: var(--quoteandcut-danger-color, #e53e3e);
	color: var(--quoteandcut-text-on-danger, #ffffff);
}

.quoteandcut-sp-status__icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

.quoteandcut-sp-status__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
}

.quoteandcut-sp-status__title {
	color: inherit;
	font-size: 15px;
	font-weight: var(--quoteandcut-weight-bold, 700);
	line-height: 1.3;
}

.quoteandcut-sp-status__message {
	color: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.4;
	opacity: 0.92;
}

/* Banner button (e.g. Confirm dimensions), below the text. */
.quoteandcut-sp-status__action {
	align-self: flex-start;
	margin-top: 10px;
}

/* A lighter banner button (e.g. Show what's different), as a link. */
.quoteandcut-sp-status__link {
	align-self: flex-start;
	margin: 6px 0 0;
	padding: 2px 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.quoteandcut-sp-status__link:hover {
	text-decoration-thickness: 2px;
}

.quoteandcut-sp-status__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* The customer's confirmation, across the foot of the banner. */
.quoteandcut-sp-status__confirm {
	flex: 1 1 100%;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* In the Folding pane the banner leads, above the part's details. */
.quoteandcut-step-differs {
	margin: 0 0 16px;
}

/* Pointed at: on Go to part, or on leaving before confirming. */
[data-sp-step-box].is-shaking {
	animation: quoteandcut-sp-finish-shake 0.4s ease-in-out;
}

.quoteandcut-sp-status:focus {
	outline: none;
}

.quoteandcut-sp-status:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-status__items {
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--quoteandcut-text-primary);
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.45;
	text-align: left;
}

.quoteandcut-sp-status__items li {
	position: relative;
	padding: 7px 0 7px 14px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.quoteandcut-sp-status__items li::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

/* Overview cards: part facts and added processes. */
.quoteandcut-sp-card {
	padding: 4px 16px 6px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 14px;
	background: var(--quoteandcut-card-bg, #ffffff);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.quoteandcut-sp-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 8px 0;
}

.quoteandcut-sp-card__title {
	margin: 0;
	color: var(--quoteandcut-text-primary);
	font-size: 15px;
	font-weight: var(--quoteandcut-weight-bold, 700);
	line-height: 1.3;
}

/* Source file type tag. */
.quoteandcut-sp-card__tag {
	flex: 0 0 auto;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--quoteandcut-bg-color);
	color: var(--quoteandcut-text-secondary);
	font-size: 11px;
	font-weight: var(--quoteandcut-weight-bold, 700);
	letter-spacing: 0.06em;
	line-height: 1;
}

.quoteandcut-sp-card__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-height: 34px;
	padding: 0 12px 0 10px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 10px;
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-bold, 700);
	line-height: 1;
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.quoteandcut-sp-card__action .quoteandcut-sp-icon {
	width: 16px;
	height: 16px;
}

.quoteandcut-sp-card__action:hover,
.quoteandcut-sp-card__action:focus-visible,
.quoteandcut-sp-card__action[aria-expanded="true"] {
	border-color: var(--quoteandcut-accent-soft-border, var(--quoteandcut-accent-primary, #ff7618));
	background: var(--quoteandcut-accent-soft, #fff1e8);
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
}

.quoteandcut-sp-card__action:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-facts {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--quoteandcut-border-color);
}

.quoteandcut-sp-facts__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 44px;
	padding: 8px 0;
	border-bottom: 1px solid var(--quoteandcut-border-color);
	font-size: var(--quoteandcut-text-md, 14px);
	line-height: 1.35;
}

.quoteandcut-sp-facts__row:last-child {
	border-bottom: 0;
}

.quoteandcut-sp-facts__row dt {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin: 0;
	color: var(--quoteandcut-text-secondary);
}

.quoteandcut-sp-facts__row dt .quoteandcut-sp-icon {
	color: var(--quoteandcut-text-muted, #687281);
}

.quoteandcut-sp-facts__row dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--quoteandcut-text-primary);
	font-weight: var(--quoteandcut-weight-bold, 700);
	text-align: right;
}

.quoteandcut-sp-facts__row dd.is-muted {
	color: var(--quoteandcut-text-muted, #94a3b8);
	font-weight: 500;
}

/* Units: label and select on one line, the unit's source on a full-width line below. */
.quoteandcut-sp-facts__row--units {
	flex-wrap: wrap;
	row-gap: 6px;
}

.quoteandcut-sp-facts__row--units dd.quoteandcut-sp-facts__units {
	display: flex;
	justify-content: flex-end;
}

.quoteandcut-sp-facts__row--units dd.quoteandcut-sp-facts__hint {
	flex: 1 1 100%;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}

/* Units not in the file and not yet confirmed: warning colour, as on the banner. */
.quoteandcut-sp-facts__row--units.is-unconfirmed dd.quoteandcut-sp-facts__hint {
	color: var(--quoteandcut-warning-text, #b45309);
	font-weight: var(--quoteandcut-weight-semibold, 600);
}

.quoteandcut-sp-facts__row--units.is-unconfirmed .quoteandcut-sp-units-select {
	border-color: var(--quoteandcut-warning-color, #f59e0b);
}

/* Added processes, one row each. A row opens its tab and the "..." menu offers
   Edit and Remove. Processes still available are listed below. */
.quoteandcut-sp-added__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quoteandcut-sp-added__row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 6px 6px 8px;
	border-radius: 12px;
	background: var(--quoteandcut-bg-color);
}

.quoteandcut-sp-added__row.is-pending {
	background: var(--quoteandcut-warning-soft, #fff7ed);
}

.quoteandcut-sp-added__item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 2px 4px 2px 2px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	text-align: left;
}

.quoteandcut-sp-added__item:hover .quoteandcut-sp-added__label,
.quoteandcut-sp-added__item:focus-visible .quoteandcut-sp-added__label {
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	text-decoration: underline;
}

.quoteandcut-sp-added__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.quoteandcut-sp-added__row.is-pending .quoteandcut-sp-added__icon {
	color: var(--quoteandcut-warning-text, #b45309);
}

.quoteandcut-sp-added__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.quoteandcut-sp-added__label {
	font-size: var(--quoteandcut-text-md, 14px);
	font-weight: var(--quoteandcut-weight-bold, 700);
	line-height: 1.25;
}

.quoteandcut-sp-added__summary {
	overflow: hidden;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-xs, 12px);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-added__pill {
	flex: 0 0 auto;
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--quoteandcut-success-soft, #ebf6f0);
	color: var(--quoteandcut-success-text, #307d58);
	font-size: 11px;
	font-weight: var(--quoteandcut-weight-bold, 700);
	line-height: 1;
	white-space: nowrap;
}

.quoteandcut-sp-added__pill.is-pending {
	background: var(--quoteandcut-warning-border, #fed7aa);
	color: var(--quoteandcut-warning-text, #b45309);
}

/* Rows without a menu end on the pill. */
.quoteandcut-sp-added__pill:last-child {
	margin-right: 6px;
}

.quoteandcut-sp-added__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--quoteandcut-text-secondary);
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
}

.quoteandcut-sp-added__more:hover,
.quoteandcut-sp-added__more:focus-visible,
.quoteandcut-sp-added__more[aria-expanded="true"] {
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-added__more:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 1px;
}

.quoteandcut-sp-added__available {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 6px;
	padding: 11px 14px;
	border: 1px dashed var(--quoteandcut-border-strong, #8c94a0);
	border-radius: 12px;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.4;
}

.quoteandcut-sp-added__available-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--quoteandcut-text-muted, #687281);
}

.quoteandcut-sp-added__available-icon:empty {
	display: none;
}

/* Dropdown menu: processes to add, or a row's Edit and Remove. */
.quoteandcut-sp-menu-host {
	position: relative;
	flex: 0 0 auto;
}

.quoteandcut-sp-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 180px;
	padding: 6px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 12px;
	background: var(--quoteandcut-card-bg, #ffffff);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.quoteandcut-sp-menu[hidden] {
	display: none;
}

.quoteandcut-sp-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 38px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	line-height: 1.2;
	text-align: left;
	white-space: nowrap;
}

.quoteandcut-sp-menu__item:hover,
.quoteandcut-sp-menu__item:focus-visible {
	background: var(--quoteandcut-bg-color);
	outline: none;
}

.quoteandcut-sp-menu__item.is-danger {
	color: var(--quoteandcut-danger-text, #c93a3b);
}

.quoteandcut-sp-menu__item.is-danger:hover,
.quoteandcut-sp-menu__item.is-danger:focus-visible {
	background: var(--quoteandcut-danger-soft, #fdf0f0);
}

.quoteandcut-sp-menu__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--quoteandcut-text-secondary);
}

.quoteandcut-sp-menu__icon .quoteandcut-sp-icon {
	width: 16px;
	height: 16px;
}

/* Stage. */

.quoteandcut-sp-stage {
	position: relative;
	min-width: 0;
	min-height: 0;
	margin: 20px 20px 20px 0;
	overflow: hidden;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 18px;
	background-color: #f5f7fa;
	cursor: grab;
	touch-action: none;
	user-select: none;
	/* The accent worked out for a light background (older cores only have the theme's). */
	--quoteandcut-sp-accent-ink: var(--quoteandcut-light-accent-ink, var(--quoteandcut-accent-ink, #ad571f));
	--quoteandcut-sp-accent-ink-hover: var(--quoteandcut-light-accent-ink-hover, var(--quoteandcut-accent-ink-hover, #934d21));
	--quoteandcut-sp-accent-soft: var(--quoteandcut-light-accent-soft, var(--quoteandcut-accent-soft, #fff1e8));
}

/* The stage is light in every theme, so what sits on it keeps the default
   palette's text, borders and cards. Zero specificity, so each part's own
   colour still applies. */
:where(.quoteandcut-sp-stage) > * {
	--quoteandcut-bg-color: #f4f7f6;
	--quoteandcut-card-bg: #ffffff;
	--quoteandcut-text-primary: #1a202c;
	--quoteandcut-text-secondary: #4a5568;
	--quoteandcut-text-muted: #687281;
	--quoteandcut-border-color: #e2e8f0;
	--quoteandcut-border-strong: #8c94a0;
	--quoteandcut-warning-soft: #fff7ed;
	--quoteandcut-warning-border: #fed7aa;
	--quoteandcut-warning-text: #b45309;
	--quoteandcut-accent-ink: var(--quoteandcut-sp-accent-ink);
	--quoteandcut-accent-ink-hover: var(--quoteandcut-sp-accent-ink-hover);
	--quoteandcut-accent-soft: var(--quoteandcut-sp-accent-soft);
	color: #1a202c;
}

/* Focus lands here only from pressing on the model, never from the keyboard. */
.quoteandcut-sp-stage:focus {
	outline: none;
}

.quoteandcut-sp-stage.is-panning {
	cursor: grabbing;
}

.quoteandcut-sp-stage__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.quoteandcut-sp-stage__layer-3d {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: transparent;
}

.quoteandcut-sp-stage__layer-3d canvas {
	max-width: 100%;
	max-height: 100%;
}

/* Top-left chips: part size and, on panes with markers, the markers switch.
   They keep clear of the help button (40px wide, 14px in) in the top-right corner. */
.quoteandcut-sp-stage__chips {
	position: absolute;
	top: calc(14px + var(--quoteandcut-sp-bar, 0px));
	left: 14px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 14px - 14px - 40px - 8px);
	pointer-events: none;
}

/* Size, weight and current view. Wraps only at the dots between items. */
.quoteandcut-sp-stage__dims {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	white-space: normal;
	pointer-events: none;
}

.quoteandcut-sp-stage__dims-bit {
	white-space: nowrap;
}

.quoteandcut-sp-stage__dims[hidden] {
	display: none;
}

.quoteandcut-sp-stage__dims .quoteandcut-sp-icon {
	width: 16px;
	height: 16px;
	color: var(--quoteandcut-text-muted, #687281);
}

.quoteandcut-sp-stage__dims strong {
	color: var(--quoteandcut-text-primary);
	font-weight: var(--quoteandcut-weight-bold, 700);
}

.quoteandcut-sp-stage__dims-dot {
	margin: 0 7px;
	opacity: 0.5;
}

/* Hide the size chip while a face label needs the corner. */
.quoteandcut-sp-stage.has-face .quoteandcut-sp-stage__dims {
	display: none;
}

/* Markers switch, with the action in the accent. Long text wraps inside it
   rather than overflowing the stage. The not-cut switch shares these styles. */
.quoteandcut-sp-stage__markers,
.quoteandcut-sp-stage__not-cut {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	max-width: 100%;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--quoteandcut-text-secondary);
	font: inherit;
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	line-height: 1.25;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
	pointer-events: auto;
}

.quoteandcut-sp-stage__markers[hidden],
.quoteandcut-sp-stage__not-cut[hidden] {
	display: none;
}

.quoteandcut-sp-stage__markers:hover,
.quoteandcut-sp-stage__not-cut:hover {
	background: #ffffff;
}

.quoteandcut-sp-stage__markers:focus-visible,
.quoteandcut-sp-stage__not-cut:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-stage__markers-icon {
	display: inline-flex;
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-stage__markers-icon .quoteandcut-sp-icon {
	width: 15px;
	height: 15px;
}

/* Both labels share one grid cell, so the switch keeps its size when toggled. */
.quoteandcut-sp-stage__markers-labels {
	display: inline-grid;
	min-width: 0;
}

.quoteandcut-sp-stage__markers-label {
	grid-area: 1 / 1;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	gap: 2px 8px;
	min-width: 0;
}

.quoteandcut-sp-stage__markers-label[aria-hidden="true"] {
	visibility: hidden;
}

.quoteandcut-sp-stage__markers-dot {
	opacity: 0.5;
}

.quoteandcut-sp-stage__markers-action {
	color: var(--quoteandcut-accent-ink, #c2410c);
}

/* Not-cut lines switch. The model shows only cut geometry, so hide it there. */
.quoteandcut-sp-stage.is-showing-model .quoteandcut-sp-stage__not-cut {
	display: none;
}

.quoteandcut-sp-stage__not-cut-swatch {
	flex: none;
	display: block;
	width: 22px;
	height: 8px;
}

/* Fade the swatch while the lines are hidden. */
.quoteandcut-sp-stage__not-cut[data-sp-not-cut-on="false"] .quoteandcut-sp-stage__not-cut-swatch {
	opacity: 0.35;
}

/* Stacked labels, as for the markers switch. */
.quoteandcut-sp-stage__not-cut-labels {
	display: inline-grid;
	min-width: 0;
}

/* Markers overlay, aligned with the model's box. */
.quoteandcut-sp-stage__model-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.quoteandcut-sp-stage__model-overlay[hidden] {
	display: none;
}

/* The 3D model is showing, folded or flat. */
.quoteandcut-sp-stage.is-showing-model {
	cursor: default;
}

/* The model layer is transparent, so hide the drawing beneath it. */
.quoteandcut-sp-stage.is-showing-model .quoteandcut-sp-stage__canvas {
	visibility: hidden;
}

/* Hide the key when markers are off, or on a model without markers. */
.quoteandcut-sp-stage.is-showing-model:not(.has-model-markers) .quoteandcut-sp-stage__legend,
.quoteandcut-sp-stage.markers-off .quoteandcut-sp-stage__legend {
	display: none;
}

/* 3D navigation hints in the model's top-right corner (built by the viewer). */
.quoteandcut-step-preview__hints {
	color: var(--quoteandcut-text-secondary, #64748b);
	font-size: 12px;
	line-height: 16px;
	transition: opacity 0.2s ease;
}

/* Out of the way while the part is behind them. */
.quoteandcut-step-preview__hints.is-behind-part {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-step-preview__hints {
		transition: none;
	}
}

.quoteandcut-step-preview__hint-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quoteandcut-step-preview__hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style: none;
}

.quoteandcut-step-preview__hint::before,
.quoteandcut-step-preview__hint::marker {
	content: none;
}

.quoteandcut-step-preview__hint svg {
	flex: 0 0 auto;
	width: 12px;
	height: 17px;
}

.quoteandcut-step-preview__hint strong {
	color: var(--quoteandcut-text-primary, #1a202c);
	font-weight: var(--quoteandcut-weight-semibold, 600);
}

.quoteandcut-step-preview__hint-list--touch {
	display: none;
}

/* The 3D layer is a size container, so the bar below can pick its wording
   by the view's width. */
.quoteandcut-sp-stage__layer-3d {
	container-type: inline-size;
}

/* Across the top of the view when parts of the customer's model can't be
   made: the notice and a switch between what we'll make and the model. The
   viewer sets the bar's height as --quoteandcut-sp-bar on the stage, and the
   chips, key, help and 3D hints sit below it. */
.quoteandcut-step-preview__differs {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	box-sizing: border-box;
	padding: 7px 10px 7px 14px;
	border-bottom: 1px solid var(--quoteandcut-warning-border, #fed7aa);
	background: var(--quoteandcut-warning-soft, #fff7ed);
	color: var(--quoteandcut-warning-text, #b45309);
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-medium, 500);
	line-height: 18px;
	pointer-events: auto;
}

.quoteandcut-step-preview__differs-message {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	padding: 4px 0;
}

.quoteandcut-step-preview__differs-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

.quoteandcut-step-preview__differs-icon svg {
	width: 100%;
	height: 100%;
}

.quoteandcut-step-preview__differs-text {
	min-width: 0;
}

/* Shorter wording as the view narrows, so the switch stays on the line. */
.quoteandcut-step-preview__differs-short,
.quoteandcut-step-preview__differs-brief {
	display: none;
}

@container (max-width: 720px) {
	.quoteandcut-step-preview__differs-long {
		display: none;
	}

	.quoteandcut-step-preview__differs-short {
		display: inline;
	}
}

@container (max-width: 560px) {
	.quoteandcut-step-preview__differs-short {
		display: none;
	}

	.quoteandcut-step-preview__differs-brief {
		display: inline;
	}

	.quoteandcut-step-preview__differs {
		gap: 6px 10px;
		padding-left: 10px;
	}

	.quoteandcut-step-preview__differs-option {
		padding: 1px 8px;
	}
}

/* Still too narrow for one line: the switch under the words, lined up with them. */
.quoteandcut-step-preview__differs.is-wrapped .quoteandcut-step-preview__differs-switch {
	margin-left: 24px;
}

.quoteandcut-step-preview__differs-switch {
	display: inline-flex;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 2px;
	border: 1px solid var(--quoteandcut-warning-border, #fed7aa);
	border-radius: 8px;
	background: var(--quoteandcut-card-bg, #ffffff);
}

.quoteandcut-step-preview__differs-option {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	margin: 0;
	padding: 1px 10px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--quoteandcut-warning-text, #b45309);
	cursor: pointer;
	font: inherit;
	font-weight: var(--quoteandcut-weight-medium, 500);
	line-height: 18px;
	white-space: nowrap;
}

.quoteandcut-step-preview__differs-option:hover {
	color: var(--quoteandcut-text-primary, #1a202c);
}

.quoteandcut-step-preview__differs-option[aria-pressed="true"] {
	background: var(--quoteandcut-accent-primary, #ff7618);
	color: var(--quoteandcut-text-on-accent, #ffffff);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	cursor: default;
}

.quoteandcut-step-preview__differs-option:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

@media (pointer: coarse) {
	.quoteandcut-step-preview__differs-option {
		min-height: 32px;
	}
}

@media (hover: none) and (pointer: coarse) {
	.quoteandcut-step-preview__hint-list--mouse {
		display: none;
	}

	.quoteandcut-step-preview__hint-list--touch {
		display: flex;
	}
}

.quoteandcut-sp-stage__layer-3d[hidden] {
	display: none;
}

.quoteandcut-sp-stage__help-toggle {
	position: absolute;
	top: calc(14px + var(--quoteandcut-sp-bar, 0px));
	right: 14px;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	color: var(--quoteandcut-text-secondary);
	cursor: pointer;
}

.quoteandcut-sp-stage__help-toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 20px;
	height: 20px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .9-1 1.7M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quoteandcut-sp-stage__help-toggle:hover,
.quoteandcut-sp-stage__help-toggle[aria-expanded="true"] {
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-stage__help-toggle:focus-visible,
.quoteandcut-sp-stage__legend-toggle:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-stage__help {
	position: absolute;
	top: calc(62px + var(--quoteandcut-sp-bar, 0px));
	right: 14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.3;
	pointer-events: none;
}

/* Label for which face of the part is shown. */
.quoteandcut-sp-stage__face {
	position: absolute;
	top: calc(14px + var(--quoteandcut-sp-bar, 0px));
	left: 14px;
	z-index: 3;
	max-width: calc(100% - 80px);
	margin: 0;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	color: var(--quoteandcut-text-primary);
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	pointer-events: none;
}

.quoteandcut-sp-stage__face[hidden] {
	display: none;
}

/* Flip animation while switching to the other face. */
.quoteandcut-sp-stage.is-turning-out .quoteandcut-sp-stage__canvas {
	transform: scaleX(0.02);
	transition: transform 0.16s ease-in;
}

.quoteandcut-sp-stage.is-turning-in .quoteandcut-sp-stage__canvas {
	animation: quoteandcut-sp-turn-in 0.24s ease-out;
}

@keyframes quoteandcut-sp-turn-in {
	from { transform: scaleX(0.02); }
	to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-sp-stage.is-turning-out .quoteandcut-sp-stage__canvas,
	.quoteandcut-sp-stage.is-turning-in .quoteandcut-sp-stage__canvas {
		transform: none;
		transition: none;
		animation: none;
	}
}

/* Key, below the chips. The drawing is fitted beneath it. */
.quoteandcut-sp-stage__legend {
	position: absolute;
	top: calc(56px + var(--quoteandcut-sp-bar, 0px));
	left: 14px;
	z-index: 3;
	max-width: calc(100% - 80px);
}

/* Over the model, the 3D hints take the top-right corner, so the chips, face
   label and key keep left of them. The JS measures the hints' width into
   --quoteandcut-sp-model-corner. A key below the hints (key-below-corner)
   keeps the drawing's width. */
.quoteandcut-sp-stage.is-showing-model .quoteandcut-sp-stage__chips,
.quoteandcut-sp-stage.is-showing-model .quoteandcut-sp-stage__face,
.quoteandcut-sp-stage.is-showing-model:not(.key-below-corner) .quoteandcut-sp-stage__legend {
	max-width: calc(100% - 14px - var(--quoteandcut-sp-model-corner, 14px));
}

.quoteandcut-sp-stage__legend-toggle {
	display: none;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg);
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
}

.quoteandcut-sp-stage__legend-items {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: var(--quoteandcut-weight-medium, 500);
	pointer-events: none;
}

.quoteandcut-sp-stage__controls {
	position: absolute;
	left: 50%;
	bottom: 28px;
	z-index: 4;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* Centred with left: 50%, so without this it would shrink to half the stage and wrap early. */
	width: max-content;
	max-width: calc(100% - 40px);
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateX(-50%);
	cursor: default;
}

.quoteandcut-sp-stage__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: calc(var(--quoteandcut-radius-md) - 2px);
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.quoteandcut-sp-stage__button:hover,
.quoteandcut-sp-stage__button:focus-visible {
	background: var(--quoteandcut-accent-soft, #fff1e8);
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
}

.quoteandcut-sp-stage__button--text {
	min-width: auto;
	padding-inline: 12px;
	font-size: 0.86rem;
	white-space: nowrap;
}

.quoteandcut-sp-stage__zoom {
	min-width: 54px;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

.quoteandcut-sp-stage__separator {
	width: 1px;
	height: 22px;
	margin-inline: 2px;
	background: var(--quoteandcut-border-color);
}

/* Hover tooltip for holes and hanging points. Wraps beyond 320px; the JS
   keeps it inside the stage. */
.quoteandcut-sp-stage__tooltip {
	position: absolute;
	z-index: 5;
	box-sizing: border-box;
	width: max-content;
	max-width: min(320px, calc(100% - 16px));
	padding: 8px 11px 9px;
	border-radius: var(--quoteandcut-radius-md);
	background: rgba(15, 23, 42, 0.94);
	color: #ffffff;
	font-size: 13px;
	line-height: 1.4;
	/* Follow the page's text direction, not the stage's. */
	text-align: start;
	pointer-events: none;
	white-space: normal;
	overflow-wrap: break-word;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
}

/* Tooltip with a title and one row per line. */
.quoteandcut-sp-stage__tooltip.is-rich {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.quoteandcut-sp-stage__tooltip-title {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.quoteandcut-sp-stage__tooltip-line {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	min-width: 0;
}

.quoteandcut-sp-stage__tooltip-line > span:last-child {
	min-width: 0;
}

/* Operation line, with a dot in its legend colour. */
.quoteandcut-sp-stage__tooltip-line.is-op {
	font-weight: 500;
}

.quoteandcut-sp-stage__tooltip-dot {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}

/* Notes such as a resized hole or an unavailable operation. */
.quoteandcut-sp-stage__tooltip-line.is-note {
	color: rgba(255, 255, 255, 0.78);
}

.quoteandcut-sp-stage__tooltip-line.is-warning {
	gap: 6px;
	color: #fcd34d;
}

.quoteandcut-sp-stage__tooltip-icon {
	flex: none;
	width: 12px;
	height: 12px;
	margin-top: 3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quoteandcut-sp-stage__tooltip[hidden] {
	display: none;
}

.quoteandcut-sp-stage__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 24px;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.95rem;
	text-align: center;
}

.quoteandcut-sp-stage__empty[hidden] {
	display: none;
}

.quoteandcut-sp-stage__help[hidden],
.quoteandcut-sp-stage__help-toggle[hidden],
.quoteandcut-sp-stage__legend[hidden],
.quoteandcut-sp-stage__controls[hidden] {
	display: none;
}

/* Model bar: solid or see-through display and side views. It sits where
   the drawing's zoom bar does. */

.quoteandcut-sp-stage__model-bar {
	position: absolute;
	left: 50%;
	bottom: 28px;
	z-index: 4;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 0;
	/* Centred with left: 50%, so without this it would shrink to half the stage and wrap early. */
	width: max-content;
	max-width: calc(100% - 40px);
	padding: 6px 4px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateX(-50%);
	cursor: default;
}

.quoteandcut-sp-stage__model-bar[hidden] {
	display: none;
}

.quoteandcut-sp-model-bar__group {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 10px;
}

.quoteandcut-sp-model-bar__group + .quoteandcut-sp-model-bar__group {
	border-left: 1px solid var(--quoteandcut-border-color);
}

.quoteandcut-sp-model-bar__label {
	padding-right: 8px;
	color: var(--quoteandcut-text-primary);
	font-size: 11px;
	font-weight: var(--quoteandcut-weight-bold, 700);
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.quoteandcut-sp-model-bar__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: calc(var(--quoteandcut-radius-md) - 2px);
	background: transparent;
	box-shadow: none;
	color: var(--quoteandcut-text-primary);
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.quoteandcut-sp-model-bar__button:hover {
	background: var(--quoteandcut-bg-color, #f4f7f6);
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-model-bar__button[aria-pressed="true"] {
	background: color-mix(in srgb, var(--quoteandcut-accent-primary, #ff7618) 14%, var(--quoteandcut-card-bg, #ffffff));
}

.quoteandcut-sp-model-bar__button:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-cube {
	display: block;
	width: 20px;
	height: 20px;
	overflow: visible;
}

.quoteandcut-sp-cube__edge,
.quoteandcut-sp-cube__hidden {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.quoteandcut-sp-cube__hidden {
	opacity: 0.4;
}

.quoteandcut-sp-cube__lit {
	fill: var(--quoteandcut-accent-primary, #ff7618);
	stroke: none;
}

/* Button label tooltip, on hover and keyboard focus. */
.quoteandcut-sp-model-bar__button::after {
	content: attr(data-sp-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	z-index: 1;
	padding: 5px 10px;
	border-radius: 6px;
	background: #1f2937;
	color: #ffffff;
	font-size: 12px;
	font-weight: var(--quoteandcut-weight-semibold, 600);
	line-height: 1.2;
	white-space: nowrap;
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.quoteandcut-sp-model-bar__button::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 4px);
	z-index: 1;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: #1f2937;
	border-bottom: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.quoteandcut-sp-model-bar__button:focus-visible::after,
.quoteandcut-sp-model-bar__button:focus-visible::before {
	opacity: 1;
}

@media (hover: hover) {
	.quoteandcut-sp-model-bar__button:hover::after,
	.quoteandcut-sp-model-bar__button:hover::before {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-sp-model-bar__button::after,
	.quoteandcut-sp-model-bar__button::before {
		transition: none;
	}
}

/* Clear view. Shows its label beside the icon; narrow screens show the icon
   only, labelled on hover and focus. */
.quoteandcut-sp-model-bar__group[hidden] {
	display: none;
}

.quoteandcut-sp-model-bar__button--text {
	gap: 6px;
	width: auto;
	padding: 0 10px;
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	white-space: nowrap;
}

/* Icon only when the label would wrap the bar (.is-compact, set by JS). */
.quoteandcut-sp-stage__model-bar.is-compact .quoteandcut-sp-model-bar__text {
	display: none;
}

.quoteandcut-sp-stage__model-bar.is-compact .quoteandcut-sp-model-bar__button--text {
	width: 36px;
	padding: 0;
}

/* Skip the tooltip where the label is already visible. */
@media (min-width: 901px) {
	.quoteandcut-sp-stage__model-bar:not(.is-compact) .quoteandcut-sp-model-bar__button--text::after,
	.quoteandcut-sp-stage__model-bar:not(.is-compact) .quoteandcut-sp-model-bar__button--text::before {
		display: none;
	}
}

@media (min-width: 901px) and (orientation: landscape) and (max-height: 520px) {
	.quoteandcut-sp-stage__model-bar:not(.is-compact) .quoteandcut-sp-model-bar__button--text::after,
	.quoteandcut-sp-stage__model-bar:not(.is-compact) .quoteandcut-sp-model-bar__button--text::before {
		display: block;
	}
}

/* Fade out the overlays but keep their layout, so the part is not reframed.
   Hidden items take no clicks or focus. */
.quoteandcut-sp-stage__chips,
.quoteandcut-sp-stage__face,
.quoteandcut-sp-stage__legend,
.quoteandcut-sp-stage .quoteandcut-step-preview__corner {
	transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0s;
}

.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__chips,
.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__face,
.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__legend {
	opacity: 0;
	translate: 0 -8px;
	visibility: hidden;
	transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}

.quoteandcut-sp-stage.is-clear-view .quoteandcut-step-preview__corner {
	opacity: 0;
	translate: 8px 0;
	visibility: hidden;
	transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}

/* The bar shrinks towards the pill in the bottom-left corner. The JS sets the
   offset as --quoteandcut-sp-clear-dx/dy. */
.quoteandcut-sp-stage__model-bar {
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease 0.05s, visibility 0s linear 0s;
}

.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__model-bar {
	transform: translate(calc(-50% + var(--quoteandcut-sp-clear-dx, 0px)), var(--quoteandcut-sp-clear-dy, 0px)) scale(0.2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.2s ease 0.1s, visibility 0s linear 0.3s;
}

/* Show controls pill: accent coloured and always labelled. */
.quoteandcut-sp-stage__show-controls {
	position: absolute;
	left: 14px;
	bottom: 28px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 0 16px 0 12px;
	border: 0;
	border-radius: 999px;
	background: var(--quoteandcut-accent-primary, #ff7618);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.1);
	color: var(--quoteandcut-text-on-accent, #ffffff);
	font: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.6);
	transform-origin: left center;
	visibility: hidden;
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__show-controls {
	opacity: 1;
	transform: scale(1);
	visibility: visible;
	/* Appear once the bar has shrunk. */
	transition: opacity 0.2s ease 0.18s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.2) 0.18s, visibility 0s linear 0s;
}

.quoteandcut-sp-stage__show-controls:hover {
	background: color-mix(in srgb, var(--quoteandcut-accent-primary, #ff7618) 88%, #000000);
	color: var(--quoteandcut-text-on-accent, #ffffff);
}

.quoteandcut-sp-stage__show-controls:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 3px;
}

/* First use: a ring pulses out twice. Only transform and opacity animate, so
   the theme compatibility overrides leave it alone. */
.quoteandcut-sp-stage__show-controls::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--quoteandcut-accent-primary, #ff7618);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}

.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__show-controls.is-pulsing::after {
	animation: quoteandcut-sp-show-controls-pulse 1.1s ease-out 0.5s 2;
}

@keyframes quoteandcut-sp-show-controls-pulse {
	0% { opacity: 0.7; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.3, 1.6); }
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 520px) {
	.quoteandcut-sp-model-bar__text {
		display: none;
	}

	.quoteandcut-sp-model-bar__button--text {
		width: 32px;
		padding: 0;
	}

	.quoteandcut-sp-stage__show-controls {
		left: 10px;
		bottom: 14px;
	}
}

/* Tighten the buttons when that keeps the bar on one row (.is-squeezed). */
.quoteandcut-sp-stage__model-bar.is-squeezed .quoteandcut-sp-model-bar__group {
	padding: 0 1px;
}

.quoteandcut-sp-stage__model-bar.is-squeezed .quoteandcut-sp-model-bar__button,
.quoteandcut-sp-stage__model-bar.is-squeezed.is-compact .quoteandcut-sp-model-bar__button--text {
	width: 30px;
	min-width: 30px;
	height: 30px;
	min-height: 30px;
}

/* When the groups wrap anyway, put Clear view on the shorter row (.is-tucked). */
.quoteandcut-sp-stage__model-bar.is-tucked .quoteandcut-sp-model-bar__group--clear {
	order: 1;
}

.quoteandcut-sp-stage__model-bar.is-tucked .quoteandcut-sp-model-bar__group:not(:first-child):not(.quoteandcut-sp-model-bar__group--clear) {
	order: 2;
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-sp-stage__chips,
	.quoteandcut-sp-stage__face,
	.quoteandcut-sp-stage__legend,
	.quoteandcut-sp-stage .quoteandcut-step-preview__corner,
	.quoteandcut-sp-stage__model-bar,
	.quoteandcut-sp-stage__show-controls,
	.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__chips,
	.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__face,
	.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__legend,
	.quoteandcut-sp-stage.is-clear-view .quoteandcut-step-preview__corner,
	.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__model-bar,
	.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__show-controls {
		translate: none;
		transition: none;
	}

	.quoteandcut-sp-stage.is-clear-view .quoteandcut-sp-stage__show-controls.is-pulsing::after {
		animation: none;
	}
}

/* Footer. */

.quoteandcut-sp-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 28px 14px 24px;
	border-top: 1px solid var(--quoteandcut-border-color);
	background: var(--quoteandcut-card-bg);
}

.quoteandcut-sp-modal__summary {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	min-width: 0;
}

.quoteandcut-sp-modal__added {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quoteandcut-sp-modal__added[hidden] {
	display: none;
}

.quoteandcut-sp-modal__estimate {
	margin: 0;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-sm, 13px);
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.quoteandcut-sp-modal__estimate span {
	display: block;
}

.quoteandcut-sp-modal__estimate span:empty {
	display: none;
}

/* Added process chip: opens its pane; the cross removes it. */
.quoteandcut-sp-added-chip {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-pill, 999px);
	background: var(--quoteandcut-card-bg);
}

.quoteandcut-sp-added-chip.is-pending {
	border-color: var(--quoteandcut-warning-border, #fde68a);
	background: var(--quoteandcut-warning-soft, #fffbeb);
}

.quoteandcut-sp-added-chip__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 38px;
	padding: 0 6px 0 10px;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.25;
	text-align: left;
}

.quoteandcut-sp-added-chip__open:only-child {
	padding-right: 14px;
}

/* Completed processes get a green tick; pending ones do not. */
.quoteandcut-sp-added-chip:not(.is-pending) .quoteandcut-sp-added-chip__open::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--quoteandcut-success-color, #38a169) var(--quoteandcut-tick-on-success, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E")) center / 11px 11px no-repeat;
}

.quoteandcut-sp-added-chip.is-pending .quoteandcut-sp-added-chip__open {
	padding-left: 14px;
}

.quoteandcut-sp-added-chip__label {
	font-weight: var(--quoteandcut-weight-semibold, 600);
	white-space: nowrap;
}

.quoteandcut-sp-added-chip__summary {
	min-width: 0;
	overflow: hidden;
	color: var(--quoteandcut-text-secondary);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-added-chip.is-pending .quoteandcut-sp-added-chip__summary {
	color: var(--quoteandcut-warning-text, #92400e);
}

.quoteandcut-sp-added-chip__price {
	color: var(--quoteandcut-text-primary);
	font-variant-numeric: tabular-nums;
	font-weight: var(--quoteandcut-weight-semibold, 600);
	white-space: nowrap;
}

.quoteandcut-sp-added-chip__remove {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-right: 2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--quoteandcut-text-secondary);
	cursor: pointer;
}

.quoteandcut-sp-added-chip__remove::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 14px;
	height: 14px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quoteandcut-sp-added-chip__remove:hover {
	background: var(--quoteandcut-danger-soft, #fdf3f3);
	color: var(--quoteandcut-danger-text, #a12f2f);
}

.quoteandcut-sp-added-chip__open:hover .quoteandcut-sp-added-chip__label {
	text-decoration: underline;
}

.quoteandcut-sp-added-chip__open:focus-visible,
.quoteandcut-sp-added-chip__remove:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-modal__done {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 30px;
	border: 1px solid var(--quoteandcut-success-color, #38a169);
	border-radius: 12px;
	background: var(--quoteandcut-success-color, #38a169);
	color: var(--quoteandcut-text-on-success, #ffffff);
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: var(--quoteandcut-weight-bold, 700);
	transition: background 0.16s ease, border-color 0.16s ease;
}

.quoteandcut-sp-modal__done:hover,
.quoteandcut-sp-modal__done:focus-visible {
	background: var(--quoteandcut-success-hover, #2f855a);
	border-color: var(--quoteandcut-success-hover, #2f855a);
}

/*
 * A process is on but incomplete, e.g. a powder colour with no finish. Done
 * looks muted but stays clickable, so the pane can show what is missing.
 */
.quoteandcut-sp-modal__done.is-pending,
.quoteandcut-sp-modal__done.is-pending:hover,
.quoteandcut-sp-modal__done.is-pending:focus-visible {
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-secondary);
}

.quoteandcut-sp-modal__done.is-pending:hover,
.quoteandcut-sp-modal__done.is-pending:focus-visible {
	border-color: var(--quoteandcut-text-secondary);
	color: var(--quoteandcut-text-primary);
}

/* Shared pane parts. */

.quoteandcut-sp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.quoteandcut-sp-toggle {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * Custom checkbox, because native ones draw a black tick on the accent.
 */
.quoteandcut-sp-toggle input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	border: 1.5px solid var(--quoteandcut-border-strong, #8c94a0);
	border-radius: 5px;
	background: var(--quoteandcut-card-bg, #ffffff) center / 16px 16px no-repeat;
	cursor: pointer;
	transition: background-color 0.14s ease, border-color 0.14s ease;
}

.quoteandcut-sp-toggle input[type="checkbox"]:checked {
	border-color: var(--quoteandcut-accent-primary, #ff7618);
	background-color: var(--quoteandcut-accent-primary, #ff7618);
	background-image: var(--quoteandcut-tick-on-accent, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"));
}

.quoteandcut-sp-toggle input[type="checkbox"]:hover {
	border-color: var(--quoteandcut-accent-primary, #ff7618);
}

.quoteandcut-sp-toggle input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-toggle input[type="checkbox"]:disabled {
	border-color: var(--quoteandcut-border-color, #e2e8f0);
	background-color: var(--quoteandcut-bg-color, #f8fafc);
	cursor: not-allowed;
}

.quoteandcut-sp-toggle input[type="checkbox"]:disabled:checked {
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	background-color: var(--quoteandcut-border-strong, #8c94a0);
}

.quoteandcut-sp-pane__instructions {
	margin: 0 0 14px;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.88rem;
	line-height: 1.45;
}

.quoteandcut-sp-pane__hint {
	margin: 8px 0 0;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.8rem;
	line-height: 1.4;
}

.quoteandcut-sp-field {
	display: block;
	margin: 16px 0 0;
}

.quoteandcut-sp-field__label {
	display: block;
	margin-bottom: 6px;
	color: var(--quoteandcut-text-primary);
	font-size: 0.86rem;
	font-weight: 600;
}

.quoteandcut-sp-field__select,
.quoteandcut-sp-field__textarea,
.quoteandcut-sp-search__input {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	font: inherit;
	font-size: 0.92rem;
	line-height: 1.4;
	box-shadow: none;
}

.quoteandcut-sp-field__select:focus-visible,
.quoteandcut-sp-field__textarea:focus-visible,
.quoteandcut-sp-search__input:focus-visible {
	outline: none;
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--quoteandcut-accent-primary) 22%, transparent);
}

.quoteandcut-sp-field__select:disabled {
	color: var(--quoteandcut-text-muted, #94a3b8);
	background: var(--quoteandcut-bg-color);
	cursor: not-allowed;
}

.quoteandcut-sp-field__textarea {
	min-height: 120px;
	resize: vertical;
}

.quoteandcut-sp-search {
	display: block;
	margin: 0 0 12px;
}

.quoteandcut-sp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1;
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.quoteandcut-sp-button:hover,
.quoteandcut-sp-button:focus-visible {
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
}

.quoteandcut-sp-button--primary {
	border-color: var(--quoteandcut-accent-primary);
	background: var(--quoteandcut-accent-primary);
	color: var(--quoteandcut-text-on-accent, var(--quoteandcut-on-accent, #ffffff));
}

.quoteandcut-sp-button--primary:hover,
.quoteandcut-sp-button--primary:focus-visible {
	background: var(--quoteandcut-accent-primary-hover, var(--quoteandcut-accent-primary));
	color: var(--quoteandcut-text-on-accent, var(--quoteandcut-on-accent, #ffffff));
}

.quoteandcut-sp-button--quiet {
	border-color: transparent;
	color: var(--quoteandcut-text-secondary);
}

/* Destructive action, e.g. clearing a hole's operations: outlined in the
   danger colour, filled on hover. */
.quoteandcut-sp-button--danger {
	border-color: var(--quoteandcut-danger-color, #e53e3e);
	color: var(--quoteandcut-danger-text, #c93a3b);
}

.quoteandcut-sp-button--danger:hover,
.quoteandcut-sp-button--danger:focus-visible {
	border-color: var(--quoteandcut-danger-hover, var(--quoteandcut-danger-color, #e53e3e));
	background: var(--quoteandcut-danger-color, #e53e3e);
	color: var(--quoteandcut-text-on-danger, var(--quoteandcut-on-danger, #ffffff));
}

.quoteandcut-sp-button[hidden] {
	display: none;
}

.quoteandcut-sp-notice {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--quoteandcut-border-color);
	border-left: 3px solid var(--quoteandcut-accent-primary);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-bg-color);
	font-size: 0.88rem;
	line-height: 1.45;
}

/* Notices holding several sentences or a button. */
.quoteandcut-sp-notice > p {
	margin: 0;
}

.quoteandcut-sp-notice > p + p,
.quoteandcut-sp-notice > p + .quoteandcut-sp-button {
	margin-top: 6px;
}

.quoteandcut-sp-notice[hidden] {
	display: none;
}

.quoteandcut-sp-unavailable {
	padding: 14px;
	border: 1px dashed var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	color: var(--quoteandcut-text-secondary);
	font-size: 0.9rem;
	line-height: 1.45;
}

.quoteandcut-sp-unavailable strong {
	display: block;
	margin-bottom: 4px;
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-unavailable p {
	margin: 0;
}

/* Powder coating. */

.quoteandcut-sp-powder__body.is-off {
	opacity: 0.72;
}

.quoteandcut-sp-powder__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 12px 8px;
}

/* Colour tile, large enough to judge, with the name below. */
.quoteandcut-sp-powder__swatch {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: var(--quoteandcut-weight-medium, 500);
	line-height: 1.25;
	text-align: center;
}

.quoteandcut-sp-powder__swatch:focus-visible {
	outline: none;
}

.quoteandcut-sp-powder__dot {
	display: block;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: var(--quoteandcut-radius-md);
	transition: box-shadow 0.14s ease;
}

.quoteandcut-sp-powder__swatch:hover .quoteandcut-sp-powder__dot {
	box-shadow: 0 0 0 2px var(--quoteandcut-border-strong, #8c94a0);
}

.quoteandcut-sp-powder__swatch:focus-visible .quoteandcut-sp-powder__dot,
.quoteandcut-sp-powder__swatch.is-selected .quoteandcut-sp-powder__dot {
	box-shadow: 0 0 0 2px var(--quoteandcut-card-bg, #ffffff), 0 0 0 4px var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
}

.quoteandcut-sp-powder__swatch.is-selected {
	font-weight: var(--quoteandcut-weight-bold, 700);
}

.quoteandcut-sp-powder__dot--other {
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: dashed;
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	background: var(--quoteandcut-bg-color, #f8fafc);
	color: var(--quoteandcut-text-secondary, #475569);
	font-size: var(--quoteandcut-text-lg, 16px);
	font-weight: var(--quoteandcut-weight-bold, 700);
}

.quoteandcut-sp-powder__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-powder__no-match {
	margin: 8px 0 0;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.86rem;
}

.quoteandcut-sp-powder__no-match[hidden] {
	display: none;
}

/* Engraving. */

.quoteandcut-sp-field__input {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	font: inherit;
	font-size: 0.92rem;
	line-height: 1.4;
	box-shadow: none;
}

.quoteandcut-sp-field__input:focus-visible {
	outline: none;
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--quoteandcut-accent-primary) 22%, transparent);
}

.quoteandcut-sp-notice--warn {
	border-color: var(--quoteandcut-warning-border, #fde68a);
	border-left-color: var(--quoteandcut-warning-color, #f59e0b);
	background: var(--quoteandcut-warning-soft, #fffbeb);
}

/* Equal 14px spacing between the two dividers. */
.quoteandcut-sp-engrave > .quoteandcut-sp-pane__instructions {
	margin: 14px 0;
}

.quoteandcut-sp-engrave__text {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--quoteandcut-border-color);
}

.quoteandcut-sp-engrave__text-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.quoteandcut-sp-engrave__title {
	margin: 0;
	color: var(--quoteandcut-text-primary);
	font-size: 0.95rem;
	font-weight: 600;
}

.quoteandcut-sp-engrave__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.quoteandcut-sp-engrave__items:empty,
.quoteandcut-sp-engrave__items[hidden] {
	display: none;
}

.quoteandcut-sp-engrave__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-bottom: 6px;
	padding: 8px 10px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: 0.88rem;
	text-align: left;
	transition: border-color 0.14s ease, background 0.14s ease;
}

.quoteandcut-sp-engrave__item:hover,
.quoteandcut-sp-engrave__item:focus-visible {
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline: none;
}

.quoteandcut-sp-engrave__item.is-selected {
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	background: var(--quoteandcut-bg-color);
	box-shadow: inset 3px 0 0 var(--quoteandcut-accent-primary);
	font-weight: 600;
}

.quoteandcut-sp-engrave__item.is-invalid {
	border-style: dashed;
	border-color: var(--quoteandcut-danger-color, #dc2626);
}

.quoteandcut-sp-engrave__item-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-engrave__item-meta {
	flex: 0 0 auto;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.78rem;
	font-weight: 500;
}

.quoteandcut-sp-engrave__editor {
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-bg-color);
}

.quoteandcut-sp-engrave__editor[hidden] {
	display: none;
}

.quoteandcut-sp-engrave__editor .quoteandcut-sp-field:first-child {
	margin-top: 0;
}

.quoteandcut-sp-engrave__row {
	display: grid;
	/* Font names are long; the height box needs only a few digits. */
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 10px;
	margin-top: 16px;
}

.quoteandcut-sp-engrave__row .quoteandcut-sp-field {
	min-width: 0;
	margin-top: 0;
}

.quoteandcut-sp-engrave__placement {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.quoteandcut-sp-engrave__placement .quoteandcut-sp-field__label {
	flex: 0 0 100%;
	margin-bottom: 0;
}

.quoteandcut-sp-engrave__placement .quoteandcut-sp-button {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline: 10px;
	white-space: nowrap;
}

/* Side picker: two options, the selected one in the accent. */
.quoteandcut-sp-engrave__face {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--quoteandcut-border-color);
}

.quoteandcut-sp-engrave__face-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.quoteandcut-sp-engrave__face-option {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--quoteandcut-border-strong, #8c94a0);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-md, 14px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.quoteandcut-sp-engrave__face-option:hover:not(:disabled) {
	border-color: var(--quoteandcut-accent-primary, #ff7618);
}

.quoteandcut-sp-engrave__face-option:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-engrave__face-option.is-selected {
	border-color: var(--quoteandcut-accent-primary, #ff7618);
	background: var(--quoteandcut-accent-primary, #ff7618);
	color: var(--quoteandcut-text-on-accent, #ffffff);
	font-weight: var(--quoteandcut-weight-bold, 700);
}

.quoteandcut-sp-engrave__face-option:disabled:not(.is-selected) {
	border-color: var(--quoteandcut-border-color);
	background: var(--quoteandcut-bg-color, #f8fafc);
	color: var(--quoteandcut-text-muted, #687281);
	cursor: not-allowed;
}

.quoteandcut-sp-engrave__face .quoteandcut-sp-pane__hint {
	margin: 0;
}

/* Match the toggle's spacing above to its spacing below. */
.quoteandcut-sp-engrave__face + .quoteandcut-sp-toggle {
	margin-top: 14px;
}

.quoteandcut-sp-engrave__angle {
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	height: 40px;
	overflow: hidden;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
}

.quoteandcut-sp-engrave__angle:focus-within {
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--quoteandcut-accent-primary) 22%, transparent);
}

.quoteandcut-sp-engrave__angle .quoteandcut-sp-engrave__angle-step {
	/* A theme's sizes, margins and shadows for buttons and inputs would
	   stretch the control, so the parts that matter are set here. */
	box-sizing: border-box;
	width: auto;
	min-width: 36px;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	transition: background 0.14s ease, color 0.14s ease;
}

.quoteandcut-sp-engrave__angle .quoteandcut-sp-engrave__angle-step:hover,
.quoteandcut-sp-engrave__angle .quoteandcut-sp-engrave__angle-step:focus-visible {
	background: var(--quoteandcut-bg-color);
	color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline: none;
}

.quoteandcut-sp-engrave__angle .quoteandcut-sp-engrave__angle-input {
	box-sizing: border-box;
	width: 50px;
	max-width: none;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0 2px 0 8px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: normal;
	border-left: 1px solid var(--quoteandcut-border-color);
	background: transparent;
	color: var(--quoteandcut-text-primary);
	font: inherit;
	font-size: 0.92rem;
	text-align: right;
	-moz-appearance: textfield;
}

.quoteandcut-sp-engrave__angle-input::-webkit-outer-spin-button,
.quoteandcut-sp-engrave__angle-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.quoteandcut-sp-engrave__angle .quoteandcut-sp-engrave__angle-input:focus {
	outline: none;
}

.quoteandcut-sp-engrave__angle .quoteandcut-sp-engrave__angle-unit {
	display: flex;
	align-items: center;
	margin: 0;
	padding-right: 8px;
	border-right: 1px solid var(--quoteandcut-border-color);
	color: var(--quoteandcut-text-secondary);
	font-size: 0.92rem;
}

.quoteandcut-sp-engrave__editor-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

.quoteandcut-sp-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--quoteandcut-text-secondary);
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	text-decoration: underline;
}

.quoteandcut-sp-link:hover,
.quoteandcut-sp-link:focus-visible {
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-link--danger:hover,
.quoteandcut-sp-link--danger:focus-visible {
	color: var(--quoteandcut-danger-color, #dc2626);
}

.quoteandcut-sp-engrave__editor [data-sp-engrave-remove] {
	margin-top: 10px;
}

/*
 * Powder finish panel. It opens inside the colour grid, spanning the row
 * below the clicked swatch; sp-pane-powder.js moves it there and sets
 * --quoteandcut-sp-caret to the swatch centre. It is prominent while the
 * finish is missing, quieter once chosen and red after a blocked close.
 */

.quoteandcut-sp-powder__finish {
	grid-column: 1 / -1;
	position: relative;
	margin-top: 2px;
	padding: 14px 14px 16px;
	border: 1px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-accent-soft, color-mix(in srgb, var(--quoteandcut-accent-primary, #ff7618) 10%, #ffffff));
	scroll-margin: 12px 0;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

/* Caret pointing at the chosen swatch. */
.quoteandcut-sp-powder__finish::before {
	content: "";
	position: absolute;
	top: -7px;
	left: calc(var(--quoteandcut-sp-caret, 50%) - 6px);
	width: 12px;
	height: 12px;
	border-top: 1px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	border-left: 1px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	background: inherit;
	transform: rotate(45deg);
	transition: border-color 0.16s ease;
}

/* Finish chosen: show it as a summary. */
.quoteandcut-sp-powder__finish.is-set,
.quoteandcut-sp-powder__finish.is-other {
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	background: var(--quoteandcut-card-bg, #ffffff);
}

.quoteandcut-sp-powder__finish.is-set::before,
.quoteandcut-sp-powder__finish.is-other::before {
	border-color: var(--quoteandcut-border-strong, #8c94a0);
}

/* A close was blocked: red until a finish is picked. */
.quoteandcut-sp-powder__finish.is-invalid {
	border-color: var(--quoteandcut-danger-color, #dc2626);
	background: var(--quoteandcut-danger-soft, #fdf0f0);
}

.quoteandcut-sp-powder__finish.is-invalid::before {
	border-color: var(--quoteandcut-danger-color, #dc2626);
}

.quoteandcut-sp-powder__finish.is-opening {
	animation: quoteandcut-sp-finish-open 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.quoteandcut-sp-powder__finish.is-shaking,
.quoteandcut-sp-powder__colour-needed.is-shaking {
	animation: quoteandcut-sp-finish-shake 0.4s ease-in-out;
}

@keyframes quoteandcut-sp-finish-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes quoteandcut-sp-finish-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

.quoteandcut-sp-powder__finish-colour {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: var(--quoteandcut-weight-semibold, 600);
	color: var(--quoteandcut-text-primary);
}

.quoteandcut-sp-powder__finish-dot {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 50%;
}

.quoteandcut-sp-powder__finish-dot--other {
	border-style: dashed;
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	background: var(--quoteandcut-bg-color, #f8fafc);
}

.quoteandcut-sp-powder__finish-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-powder__finish-ask {
	margin: 10px 0 8px;
}

.quoteandcut-sp-powder__finish-title {
	display: block;
	color: var(--quoteandcut-text-primary);
	font-size: 0.98rem;
	font-weight: var(--quoteandcut-weight-bold, 700);
	line-height: 1.3;
}

/* Once chosen, the title is a plain field label. */
.quoteandcut-sp-powder__finish.is-set .quoteandcut-sp-powder__finish-title {
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
}

.quoteandcut-sp-powder__finish-sub {
	display: block;
	margin-top: 2px;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.8rem;
	line-height: 1.4;
}

.quoteandcut-sp-powder__finish-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.quoteandcut-sp-powder__finish-pill {
	flex: 1 1 auto;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--quoteandcut-border-strong, #8c94a0);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: 0.86rem;
	font-weight: var(--quoteandcut-weight-semibold, 600);
	line-height: 1.2;
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.quoteandcut-sp-powder__finish-pill:hover:not(:disabled) {
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
}

.quoteandcut-sp-powder__finish-pill:focus-visible {
	outline: none;
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	box-shadow: 0 0 0 3px var(--quoteandcut-focus-ring, rgba(255, 118, 24, 0.35));
}

/* Form-wide selection style: accent outline and soft tint. Solid accent is for actions. */
.quoteandcut-sp-powder__finish-pill.is-selected {
	border-color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	background: var(--quoteandcut-accent-soft, color-mix(in srgb, var(--quoteandcut-accent-primary, #ff7618) 10%, #ffffff));
	box-shadow: inset 0 0 0 1px var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	font-weight: var(--quoteandcut-weight-bold, 700);
}

.quoteandcut-sp-powder__finish-pill:disabled {
	border-style: dashed;
	border-color: var(--quoteandcut-border-color);
	color: var(--quoteandcut-text-muted, #94a3b8);
	cursor: not-allowed;
}

.quoteandcut-sp-powder__finish.is-invalid .quoteandcut-sp-powder__finish-pill:not(:disabled) {
	border-color: var(--quoteandcut-danger-color, #dc2626);
}

.quoteandcut-sp-powder__finish-note {
	margin: 8px 0 0;
	color: var(--quoteandcut-text-secondary);
	font-size: 0.84rem;
	line-height: 1.45;
}

.quoteandcut-sp-powder__finish-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.quoteandcut-sp-powder__finish-error {
	margin: 10px 0 0;
	color: var(--quoteandcut-danger-text, var(--quoteandcut-danger-color, #dc2626));
	font-size: 0.84rem;
	line-height: 1.45;
}

.quoteandcut-sp-powder__finish-error[hidden] {
	display: none;
}

/* Inline link, e.g. "Remove powder coating instead". */
.quoteandcut-sp-powder__link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.quoteandcut-sp-powder__link:hover,
.quoteandcut-sp-powder__link:focus-visible {
	outline: none;
	color: var(--quoteandcut-text-primary);
}

/* Enabled with no colour when the customer tries to close. */
.quoteandcut-sp-powder__colour-needed {
	margin: -4px 0 14px;
	padding: 10px 12px;
	border: 1px solid var(--quoteandcut-danger-color, #dc2626);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-danger-soft, #fdf0f0);
	color: var(--quoteandcut-danger-text, var(--quoteandcut-danger-color, #dc2626));
	font-size: 0.86rem;
	line-height: 1.45;
	outline: none;
	scroll-margin: 12px 0;
}

.quoteandcut-sp-powder__colour-needed[hidden] {
	display: none;
}

/* Status line below the grid. A sibling of the scrolling pane, not sticky inside it. */
.quoteandcut-sp-rail__footer {
	flex: 0 0 auto;
}

.quoteandcut-sp-rail__footer:empty {
	display: none;
}

.quoteandcut-sp-finishbar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 20px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: 0 0 14px 14px;
	background: var(--quoteandcut-card-bg);
	box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
	font-size: 0.86rem;
	font-weight: var(--quoteandcut-weight-semibold, 600);
	color: var(--quoteandcut-text-primary);
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease-out, border-color 0.16s ease;
}

.quoteandcut-sp-finishbar.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.quoteandcut-sp-finishbar.no-anim {
	transition: none;
}

.quoteandcut-sp-finishbar.is-invalid {
	border-top-color: var(--quoteandcut-danger-color, #dc2626);
	box-shadow: inset 0 2px 0 var(--quoteandcut-danger-color, #dc2626), 0 -6px 16px rgba(220, 38, 38, 0.1);
}

.quoteandcut-sp-finishbar__dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 50%;
}

.quoteandcut-sp-finishbar__dot--other {
	border-style: dashed;
	border-color: var(--quoteandcut-border-strong, #8c94a0);
	background: var(--quoteandcut-bg-color, #f8fafc);
}

.quoteandcut-sp-finishbar__name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The separator is aria-hidden so screen readers skip it. */
.quoteandcut-sp-finishbar__sep {
	flex: 0 0 auto;
	color: var(--quoteandcut-text-muted, #94a3b8);
	font-weight: var(--quoteandcut-weight-regular, 400);
}

.quoteandcut-sp-finishbar__state {
	flex: 0 0 auto;
	color: var(--quoteandcut-text-secondary);
	white-space: nowrap;
}

/* Link back to the finish panel, which may be scrolled out of view. */
.quoteandcut-sp-finishbar__jump {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--quoteandcut-warning-text, #b45309);
	cursor: pointer;
	font: inherit;
	white-space: nowrap;
}

.quoteandcut-sp-finishbar__jump::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 4px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quoteandcut-sp-finishbar__jump:hover,
.quoteandcut-sp-finishbar__jump:focus-visible {
	outline: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.quoteandcut-sp-finishbar.is-invalid .quoteandcut-sp-finishbar__jump {
	color: var(--quoteandcut-danger-text, var(--quoteandcut-danger-color, #dc2626));
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-sp-finishbar {
		transition: none;
		transform: none;
		opacity: 1;
	}

	.quoteandcut-sp-powder__finish,
	.quoteandcut-sp-powder__finish::before,
	.quoteandcut-sp-powder__finish.is-opening,
	.quoteandcut-sp-powder__finish.is-shaking,
	.quoteandcut-sp-powder__colour-needed.is-shaking {
		animation: none;
		transition: none;
	}
}

/* Notes and drawing. */

.quoteandcut-sp-notes .quoteandcut-sp-field:first-child {
	margin-top: 0;
}

.quoteandcut-sp-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px 8px 12px;
	border: 1px solid var(--quoteandcut-border-color);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
}

.quoteandcut-sp-file__name {
	min-width: 0;
	overflow: hidden;
	color: var(--quoteandcut-text-primary);
	font-size: 0.88rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quoteandcut-sp-file__name.is-empty {
	color: var(--quoteandcut-text-secondary);
}

.quoteandcut-sp-file__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

/* Responsive. */

@media (max-width: 900px) {
	.quoteandcut-sp-overlay {
		padding: 12px;
	}

	/* Fixed height, so the dialog does not resize between parts. */
	.quoteandcut-sp-modal {
		width: calc(100vw - 24px);
		height: calc(100vh - 24px);
		height: calc(100dvh - 24px);
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}

	.quoteandcut-sp-modal__header {
		gap: 10px;
		padding: 12px 12px 12px 16px;
	}

	.quoteandcut-sp-modal__file {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}

	.quoteandcut-sp-modal__file .quoteandcut-sp-icon {
		width: 20px;
		height: 20px;
	}

	.quoteandcut-sp-modal__title {
		max-width: 100%;
		font-size: 1.05rem;
	}

	.quoteandcut-sp-modal__subtitle {
		font-size: var(--quoteandcut-text-xs, 12px);
	}

	/* "Part 1 of 2" moves to the subtitle; the stepper keeps only its arrows. */
	.quoteandcut-sp-modal__subtitle-count {
		display: inline;
	}

	.quoteandcut-sp-modal__subtitle-count:not(:empty)::after {
		content: "·";
		margin: 0 5px;
	}

	.quoteandcut-sp-modal__step-count {
		display: none;
	}

	.quoteandcut-sp-modal__header-actions {
		gap: 8px;
	}

	.quoteandcut-sp-modal__stepper {
		padding: 2px;
	}

	.quoteandcut-sp-modal__step {
		width: 34px;
		height: 34px;
	}

	.quoteandcut-sp-modal__fullscreen {
		display: none;
	}

	/*
	 * One scrolling column. The drawing stays pinned at the top, the same
	 * size on every pane, leaving most of the screen to the pane.
	 */
	.quoteandcut-sp-modal__body {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
		overflow: auto;
	}

	/* Content height, so the column scrolls rather than the rail. A short pane's rail fills the remaining space. */
	.quoteandcut-sp-rail {
		flex: 1 0 auto;
		border-right: 0;
	}

	.quoteandcut-sp-modal__tabbar {
		padding: 0 12px;
	}

	.quoteandcut-sp-rail__tabs {
		gap: 0 2px;
	}

	.quoteandcut-sp-rail__tab {
		min-height: 54px;
		padding: 0 10px;
	}

	.quoteandcut-sp-rail__pane,
	.quoteandcut-sp-rail.is-single .quoteandcut-sp-rail__pane {
		flex: 0 0 auto;
		padding: 14px 14px 18px;
		overflow: visible;
	}

	.quoteandcut-sp-rail__pane:not([data-sp-active="overview"]) {
		margin: 12px;
		padding: 14px 16px 18px;
	}

	.quoteandcut-sp-rail__notices:not(:empty) + .quoteandcut-sp-rail__pane {
		margin-top: 10px;
	}

	.quoteandcut-sp-rail__footer:not(:empty) {
		margin: 0 12px 12px;
	}

	.quoteandcut-sp-rail__notice {
		margin: 12px 12px 0;
	}

	/* Keep the powder status line in reach while the colours scroll. */
	.quoteandcut-sp-rail__footer {
		position: sticky;
		bottom: 0;
		z-index: 1;
	}

	/* When scrolled into view, clear the pinned status line. */
	.quoteandcut-sp-powder__finish,
	.quoteandcut-sp-powder__colour-needed {
		scroll-margin: 12px 0 60px;
	}

	.quoteandcut-sp-stage {
		position: sticky;
		top: 0;
		z-index: 2;
		order: -1;
		flex: 0 0 auto;
		height: clamp(220px, 38vh, 340px);
		margin: 0;
		border: 0;
		border-bottom: 1px solid var(--quoteandcut-border-color);
		border-radius: 0;
	}

	.quoteandcut-sp-modal__footer {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 10px 14px 12px;
	}

	.quoteandcut-sp-modal__done {
		min-height: 44px;
		padding: 0 24px;
	}

	/* Chips get their own swipeable line; the estimate shares the next with Done. */
	.quoteandcut-sp-modal__summary {
		display: contents;
	}

	.quoteandcut-sp-modal__added {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.quoteandcut-sp-modal__added::-webkit-scrollbar {
		display: none;
	}

	.quoteandcut-sp-added-chip {
		flex: 0 0 auto;
		max-width: none;
	}

	.quoteandcut-sp-modal__estimate {
		flex: 1 1 0;
		min-width: 0;
	}
}

/*
 * Short stage: narrow screens, or landscape phones where the stage sits on
 * the right. Hide the size chip, help button, 3D hints and zoom read-out, and
 * open the key from a button, to leave room for the part.
 */
@media (max-width: 900px), (orientation: landscape) and (max-height: 520px) {
	/* The size chip would cover the part; the markers switch stays. */
	.quoteandcut-sp-stage__dims {
		display: none;
	}

	.quoteandcut-sp-stage__chips {
		top: calc(8px + var(--quoteandcut-sp-bar, 0px));
		left: 8px;
	}

	.quoteandcut-sp-stage__face {
		top: calc(8px + var(--quoteandcut-sp-bar, 0px));
		left: 8px;
	}

	/* With no help button or 3D hints, the chips and face label keep clear of
	   the key button instead. The JS sets its width as --quoteandcut-sp-key-room. */
	.quoteandcut-sp-stage__chips,
	.quoteandcut-sp-stage.is-showing-model .quoteandcut-sp-stage__chips {
		max-width: calc(100% - 8px - var(--quoteandcut-sp-key-room, 20px));
	}

	.quoteandcut-sp-stage.is-showing-model .quoteandcut-sp-stage__face {
		max-width: calc(100% - 80px);
	}

	.quoteandcut-sp-stage__model-bar {
		bottom: 14px;
		max-width: calc(100% - 20px);
		padding: 4px 2px;
	}

	.quoteandcut-sp-model-bar__group {
		padding: 0 6px;
	}

	/* Drop the zoom read-out to save toolbar space; pinch zoom still works. */
	.quoteandcut-sp-stage__zoom {
		display: none;
	}

	/* Touch has its own gestures, so the mouse hints do not apply. */
	.quoteandcut-sp-stage__help-toggle,
	.quoteandcut-sp-stage__help {
		display: none;
	}

	/* The view is too small to spare a corner for the 3D hints. */
	.quoteandcut-step-preview__hints {
		display: none;
	}

	/* The viewer's corner (the turn over control) takes its own row under the
	   chips and key. The JS sets the row's top as --quoteandcut-sp-notice-top;
	   the viewer places its corner inline, hence the importance. */
	.quoteandcut-sp-stage .quoteandcut-step-preview__corner {
		top: var(--quoteandcut-sp-notice-top, 60px) !important;
		right: 8px !important;
		left: 8px !important;
		max-width: none !important;
		align-items: stretch !important;
	}

	/* The key would cover a small drawing, so it opens from a button in the top
	   right. The box has a fixed width (starting 72px in) so the button stays
	   put, and taps elsewhere in it pass through to the stage. Overrides the
	   wider-stage rule over the model, as the 3D hints are hidden here. */
	.quoteandcut-sp-stage__legend,
	.quoteandcut-sp-stage.is-showing-model .quoteandcut-sp-stage__legend,
	.quoteandcut-sp-stage.is-showing-model:not(.key-below-corner) .quoteandcut-sp-stage__legend {
		top: 8px;
		right: 8px;
		left: auto;
		width: calc(100% - 80px);
		max-width: calc(100% - 80px);
		pointer-events: none;
	}

	/* Let a long translation of "Key" wrap rather than take the chips' row. */
	.quoteandcut-sp-stage__legend-toggle {
		display: flex;
		width: max-content;
		max-width: min(100%, 7.5em);
		margin-left: auto;
		line-height: 1.15;
		text-align: center;
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		hyphens: auto;
		pointer-events: auto;
	}

	.quoteandcut-sp-stage__legend-items {
		position: absolute;
		top: 100%;
		right: 0;
		display: none;
		justify-content: flex-end;
		width: max-content;
		max-width: 100%;
		margin-top: 6px;
	}

	/* An open key captures taps so they do not reach holes beneath it. */
	.quoteandcut-sp-stage__legend.is-open .quoteandcut-sp-stage__legend-items {
		display: flex;
		pointer-events: auto;
	}

	.quoteandcut-sp-stage__controls {
		bottom: 14px;
		gap: 2px;
		padding: 6px;
	}
}

@media (max-width: 400px) {
	.quoteandcut-sp-stage__button[data-sp-reset] {
		display: none;
	}
}

/* Phones: hide group names and tighten buttons to keep the bar on one row. */
@media (max-width: 600px) {
	/* No room in the header, so the Flat / Folded toggle moves to the start
	   of the stage's chips row. */
	.quoteandcut-sp-modal__mode {
		display: none;
	}

	/* Let the toggle narrow and wrap (hyphenated where supported) when a long
	   translation leaves little room beside the Key button. */
	.quoteandcut-sp-stage__mode:not([hidden]) {
		display: inline-flex;
		flex: 0 1 auto;
		min-width: 0;
		background: rgba(255, 255, 255, 0.88);
		box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
		pointer-events: auto;
	}

	.quoteandcut-sp-stage__mode .quoteandcut-sp-modal__mode-button {
		min-height: 34px;
		min-width: 4.5em;
		padding: 2px 12px;
		line-height: 1.15;
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	/* Drop the face label below the toggle (42px tall, 8px down). */
	.quoteandcut-sp-stage.with-view-toggle .quoteandcut-sp-stage__face {
		top: 54px;
	}

	/* Markers switch: icon only (struck through when hidden), as tall as the
	   toggle. The label stays for screen readers. */
	.quoteandcut-sp-stage__markers {
		position: relative;
		justify-content: center;
		width: 42px;
		min-width: 42px;
		height: 42px;
		min-height: 42px;
		padding: 0;
	}

	.quoteandcut-sp-stage__markers-icon .quoteandcut-sp-icon {
		width: 18px;
		height: 18px;
	}

	.quoteandcut-sp-stage__markers-labels {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.quoteandcut-sp-model-bar__label {
		display: none;
	}

	.quoteandcut-sp-model-bar__group {
		padding: 0 4px;
	}

	.quoteandcut-sp-model-bar__button {
		width: 32px;
		min-width: 32px;
		height: 32px;
		min-height: 32px;
	}
}

/* Smallest phones: the groups wrap onto two rows, so drop the divider. */
@media (max-width: 360px) {
	.quoteandcut-sp-model-bar__group + .quoteandcut-sp-model-bar__group {
		border-left: 0;
	}
}

/*
 * Narrow touch screens: one swipeable line of tabs. Narrow screens with a
 * mouse keep the wrapping row, as the scrollbar is hidden and a vertical
 * wheel would scroll the overlay instead.
 */
@media (max-width: 900px) and (pointer: coarse) {
	.quoteandcut-sp-modal__tabbar {
		padding: 10px 12px;
	}

	.quoteandcut-sp-rail__tabs {
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.quoteandcut-sp-rail__tabs::-webkit-scrollbar {
		display: none;
	}

	/* Tabs become chips: icon and name. */
	.quoteandcut-sp-rail__tab {
		gap: 8px;
		min-height: 42px;
		padding: 0 14px 0 7px;
		border: 1px solid var(--quoteandcut-border-color);
		border-radius: 999px;
		background: var(--quoteandcut-card-bg);
	}

	.quoteandcut-sp-rail__tab.is-active {
		border-color: var(--quoteandcut-accent-soft-border, var(--quoteandcut-accent-primary, #ff7618));
		background: var(--quoteandcut-accent-soft, #fff1e8);
		color: var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	}

	.quoteandcut-sp-rail__tab:focus-visible {
		outline-offset: 2px;
	}

	.quoteandcut-sp-rail__tab-icon {
		width: 26px;
		height: 26px;
		border-radius: 50%;
	}

	.quoteandcut-sp-rail__tab-icon .quoteandcut-sp-icon {
		width: 14px;
		height: 14px;
	}

	.quoteandcut-sp-rail__tab.is-active .quoteandcut-sp-rail__tab-icon {
		background: var(--quoteandcut-card-bg);
	}

	/* Hide the status text, which is what overflows the row. The tick still
	   shows what is set. */
	.quoteandcut-sp-rail__tab-state {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-sp-overlay,
	.quoteandcut-sp-overlay.is-closing,
	.quoteandcut-sp-modal,
	.quoteandcut-sp-overlay.is-closing .quoteandcut-sp-modal {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/*
 * Short landscape windows (laptops, zoomed browsers, phones on their side):
 * the dialog fills the height, the header, tabs and footer tighten, and the
 * panel scrolls so Done and the model bar stay visible.
 */
@media (orientation: landscape) and (max-height: 680px) {
	.quoteandcut-sp-overlay {
		padding: 8px;
	}

	.quoteandcut-sp-modal {
		height: calc(100vh - 16px);
		height: calc(100dvh - 16px);
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
	}

	.quoteandcut-sp-modal__header {
		gap: 10px;
		padding: 8px 12px 8px 14px;
	}

	.quoteandcut-sp-modal__file {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.quoteandcut-sp-modal__file .quoteandcut-sp-icon {
		width: 18px;
		height: 18px;
	}

	.quoteandcut-sp-modal__tabbar {
		padding-top: 0;
		padding-bottom: 0;
	}

	.quoteandcut-sp-rail__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.quoteandcut-sp-rail__tabs::-webkit-scrollbar {
		display: none;
	}

	.quoteandcut-sp-rail__tab {
		min-height: 48px;
	}

	.quoteandcut-sp-modal__footer {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.quoteandcut-sp-modal__done {
		min-height: 40px;
	}
}

/* Wide short windows: the body takes the remaining height and the panel
   scrolls inside it. */
@media (min-width: 901px) and (max-height: 680px) {
	.quoteandcut-sp-modal__body {
		min-height: 0;
		height: auto;
	}

	.quoteandcut-sp-stage {
		margin: 12px 12px 12px 0;
	}

	.quoteandcut-sp-rail__pane:not([data-sp-active="overview"]) {
		margin: 12px;
	}
}

/*
 * Landscape phones: the stage takes the right side at full height so the
 * part is not squeezed. Tabs, panel and footer share the left.
 */
@media (orientation: landscape) and (max-height: 520px) {
	.quoteandcut-sp-overlay {
		padding: 0;
	}

	.quoteandcut-sp-modal {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		grid-template-areas:
			"header header"
			"tabs stage"
			"rail stage"
			"footer stage";
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	.quoteandcut-sp-modal__header {
		grid-area: header;
		padding: 6px 10px 6px 14px;
	}

	.quoteandcut-sp-modal__file {
		display: none;
	}

	.quoteandcut-sp-modal__tabbar {
		grid-area: tabs;
		padding: 6px 10px;
	}

	.quoteandcut-sp-rail__tabs {
		gap: 6px;
	}

	.quoteandcut-sp-rail__tab {
		min-height: 40px;
	}

	.quoteandcut-sp-rail__tab-state {
		display: none;
	}

	.quoteandcut-sp-modal__body {
		display: contents;
	}

	.quoteandcut-sp-rail {
		grid-area: rail;
		min-height: 0;
		overflow: auto;
		border-right: 0;
	}

	.quoteandcut-sp-stage {
		grid-area: stage;
		position: relative;
		top: auto;
		order: 0;
		height: auto;
		min-height: 0;
		margin: 0;
		border: 0;
		border-left: 1px solid var(--quoteandcut-border-color);
		border-radius: 0;
	}

	/* One row: added chips (swipeable), the estimate and Done. */
	.quoteandcut-sp-modal__footer {
		grid-area: footer;
		flex-wrap: nowrap;
		gap: 8px;
		padding: 6px 10px;
	}

	.quoteandcut-sp-modal__summary {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		min-width: 0;
	}

	.quoteandcut-sp-modal__added {
		flex: 0 1 auto;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.quoteandcut-sp-modal__added::-webkit-scrollbar {
		display: none;
	}

	.quoteandcut-sp-modal__estimate {
		flex: 1 1 0;
		min-width: 0;
		font-size: var(--quoteandcut-text-xs, 12px);
	}

	.quoteandcut-sp-modal__done {
		min-height: 40px;
		padding: 0 18px;
	}

	/* Keep the model bar on one row: hide group names and tighten buttons. */
	.quoteandcut-sp-model-bar__label {
		display: none;
	}

	.quoteandcut-sp-model-bar__group {
		padding: 0 4px;
	}

	.quoteandcut-sp-model-bar__button {
		width: 32px;
		min-width: 32px;
		height: 32px;
		min-height: 32px;
	}
}

/* Landscape phones under 680px wide: no room for Reset view (Fit stays). */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 680px) {
	.quoteandcut-sp-stage__button[data-sp-reset] {
		display: none;
	}
}

/* Finish pane: finished face and grain direction, using the etching pane's
   two-button choice. */
.quoteandcut-sp-finish {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.quoteandcut-sp-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-top: 6px;
}

.quoteandcut-sp-choice {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--quoteandcut-border-strong, #8c94a0);
	border-radius: var(--quoteandcut-radius-md);
	background: var(--quoteandcut-card-bg, #ffffff);
	color: var(--quoteandcut-text-primary);
	cursor: pointer;
	font: inherit;
	font-size: var(--quoteandcut-text-md, 14px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.quoteandcut-sp-choice:hover:not(:disabled) {
	border-color: var(--quoteandcut-accent-primary, #ff7618);
}

.quoteandcut-sp-choice:focus-visible {
	outline: 2px solid var(--quoteandcut-accent-ink, var(--quoteandcut-accent-primary, #ff7618));
	outline-offset: 2px;
}

.quoteandcut-sp-choice.is-selected {
	border-color: var(--quoteandcut-accent-primary, #ff7618);
	background: var(--quoteandcut-accent-primary, #ff7618);
	color: var(--quoteandcut-text-on-accent, #ffffff);
	font-weight: var(--quoteandcut-weight-bold, 700);
}

/* A choice that can't be taken, with the reason under the buttons. */
.quoteandcut-sp-choice.is-locked {
	border-style: dashed;
	color: var(--quoteandcut-text-muted, #687281);
	cursor: not-allowed;
}

.quoteandcut-sp-choice.is-locked:hover:not(:disabled) {
	border-color: var(--quoteandcut-border-strong, #8c94a0);
}

.quoteandcut-sp-field--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.quoteandcut-sp-field--inline .quoteandcut-sp-field__input {
	width: 6em;
}

.quoteandcut-sp-field__suffix {
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-sm, 13px);
}

.quoteandcut-sp-notes-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding-left: 18px;
	color: var(--quoteandcut-text-secondary);
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.5;
}

/* Amber in-pane warning, matching the notes under a part. */
.quoteandcut-sp-pane__warning {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--quoteandcut-warning-color, #f59e0b);
	border-radius: var(--quoteandcut-radius-md, 8px);
	background: var(--quoteandcut-warning-soft, #fff7ed);
	color: var(--quoteandcut-warning-text, #b45309);
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.5;
}

/* Finish pane choices while powder coating overrides them. */
.quoteandcut-sp-finish.is-covered .quoteandcut-sp-field,
.quoteandcut-sp-finish.is-covered .quoteandcut-sp-notes-list {
	opacity: 0.5;
}

/* Overview units select: sized to its text and right aligned. */
.quoteandcut-sp-overview .quoteandcut-sp-units-select {
	width: auto;
	min-width: 10em;
	max-width: 100%;
}

/* Finish warning at the top of the powder pane. */
.quoteandcut-sp-powder__finish-warning {
	margin: 12px 0 16px;
}

/* Hanging holes section of the powder coating pane (hanging-holes.js).
   Amber while holes need confirming, green once added. */

.quoteandcut-sp-hanging {
	margin: 12px 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--quoteandcut-border-color, #e2e8f0);
	border-radius: var(--quoteandcut-radius-md, 8px);
	background: var(--quoteandcut-card-bg, #fff);
	font-size: var(--quoteandcut-text-sm, 13px);
	line-height: 1.5;
}

.quoteandcut-sp-hanging.is-pending,
.quoteandcut-sp-hanging.is-placing {
	border-color: var(--quoteandcut-warning-border, #f0c36d);
	background: var(--quoteandcut-warning-soft, #fffbeb);
}

.quoteandcut-sp-hanging.is-invalid {
	border-color: var(--quoteandcut-danger-color, #dc2626);
}

.quoteandcut-sp-hanging.is-shaking {
	animation: quoteandcut-sp-finish-shake 0.4s ease-in-out;
}

.quoteandcut-sp-hanging__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 12px;
	flex-wrap: wrap;
	color: var(--quoteandcut-text-primary, #1f2937);
}

.quoteandcut-sp-hanging__state {
	font-size: var(--quoteandcut-text-xs, 12px);
	font-weight: var(--quoteandcut-weight-semibold, 600);
	color: var(--quoteandcut-text-secondary, #4a5568);
}

.quoteandcut-sp-hanging__state.is-pending {
	color: var(--quoteandcut-warning-text, #92400e);
}

.quoteandcut-sp-hanging__state.is-set {
	color: var(--quoteandcut-success-text, var(--quoteandcut-success-color, #15803d));
}

.quoteandcut-sp-hanging__text,
.quoteandcut-sp-hanging__hint {
	margin: 6px 0 0;
	color: var(--quoteandcut-text-secondary, #4a5568);
}

.quoteandcut-sp-hanging__spacing {
	margin: 6px 0 0;
	font-weight: var(--quoteandcut-weight-medium, 500);
	color: var(--quoteandcut-text-secondary, #4a5568);
}

.quoteandcut-sp-hanging__spacing.is-ok {
	color: var(--quoteandcut-success-text, var(--quoteandcut-success-color, #15803d));
}

.quoteandcut-sp-hanging__spacing.is-short {
	color: var(--quoteandcut-danger-color, #dc2626);
}

.quoteandcut-sp-hanging__error {
	margin: 8px 0 0;
	color: var(--quoteandcut-danger-color, #dc2626);
	font-weight: var(--quoteandcut-weight-medium, 500);
}

.quoteandcut-sp-hanging__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

/* Hole choosers for keyboard placement. */
.quoteandcut-sp-hanging__picks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.quoteandcut-sp-hanging__pick[aria-pressed="true"] {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	font-weight: var(--quoteandcut-weight-medium, 500);
}

.quoteandcut-sp-hanging__keys {
	margin: 6px 0 0;
	font-size: 0.85em;
}

/* Hide the colour grid while placing, to give the drawing room. */
.quoteandcut-sp-powder__body.is-placing {
	display: none;
}

/* Legend dots for the hanging-hole markers drawn on the stage. */
.quoteandcut-sp-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.quoteandcut-sp-legend__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
}

.quoteandcut-sp-legend__dot.is-dashed {
	border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
	.quoteandcut-sp-hanging.is-shaking {
		animation: none;
	}
}

.quoteandcut-sp-hanging__note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--quoteandcut-text-secondary, #4a5568);
}

/* Confirm buttons: bold, in the text colour set for the accent. */
.quoteandcut-sp-hanging .quoteandcut-sp-button--primary,
.quoteandcut-sp-hanging .quoteandcut-sp-button--primary:hover,
.quoteandcut-sp-hanging .quoteandcut-sp-button--primary:focus-visible,
.quoteandcut-sp-status .quoteandcut-sp-button--primary,
.quoteandcut-sp-status .quoteandcut-sp-button--primary:hover,
.quoteandcut-sp-status .quoteandcut-sp-button--primary:focus-visible {
	color: var(--quoteandcut-text-on-accent, #ffffff);
	font-weight: var(--quoteandcut-weight-bold, 700);
}