/* ==========================================================================
   Pezzo — unified hero search entrance (PZ1B, inside Page 54's hero left
   column via #brxe-hp01sr), dedicated /pezzo/ workspace (PZ1A), and
   account Saved Projects/workspace (PZ1). Built on hp-tokens.css's
   canonical vocabulary and the site's existing .hp-card-* card recipe
   (homepezzo-section-colors.css) — no parallel design language.
   Loaded on Page 54, Page 8, and /pezzo/ (includes/hp-pezzo-homepage.php).
   ========================================================================== */

/* -- Homepage hero: unified search entrance (PZ1B) --------------------------
   The PEZZO mark and "What are you working on?" heading/subtext are now
   Bricks-native elements (hp01pz/hp01h1/hp01tx) reusing the hero's own
   typography, so this block owns only the interactive field/button/chips —
   no panel chrome (background/border/shadow/padding), it sits directly in
   the hero's left column. `width: 100%` is required so it isn't shrunk to
   content size when hp01lc switches to `align-items: center` on mobile;
   text-align intentionally inherits from hp01lc (left on desktop, centered
   on mobile) rather than being set here, matching how hp01h1/hp01tx behave. */

.hp-pezzo-search {
	width: 100%;
}

.hp-pezzo-search__form {
	display: flex;
	align-items: stretch;
	gap: var(--hp-space-2, 8px);
}

.hp-pezzo-search__input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	font-family: var(--hp-font-sans);
	font-size: var(--hp-type-body-size, 16px);
	padding: 0 18px;
	border: 1px solid var(--hp-line-strong, #CFC9BC);
	border-radius: var(--hp-radius-md, 4px);
	background: var(--hp-surface, #FFFFFF);
}
.hp-pezzo-search__input:focus-visible {
	outline: 2px solid var(--hp-green-power-text, #126834);
	outline-offset: 2px;
}

.hp-pezzo-search__submit {
	flex-shrink: 0;
	min-height: 52px;
	padding: 0 28px;
	background: var(--hp-green-power-text, #126834);
	color: #FFFFFF;
	border: none;
	border-radius: var(--hp-radius-md, 4px);
	font-size: var(--hp-type-button-size, 15px);
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.hp-pezzo-search__submit:hover { filter: brightness(0.92); }
.hp-pezzo-search__submit:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 3px; }
.hp-pezzo-search__submit:disabled { opacity: 0.6; cursor: default; }

.hp-pezzo-search__examples {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2, 8px);
	justify-content: flex-start; /* left-aligned under the hero's left-aligned field; centered on mobile below */
	margin-top: var(--hp-space-3, 12px);
}
.hp-pezzo-search__chip {
	min-height: 32px;
	padding: 4px 14px;
	background: transparent;
	border: 1px solid var(--hp-line-strong, #CFC9BC);
	border-radius: var(--hp-radius-pill, 999px);
	color: var(--hp-ink-muted, #565D69);
	font-size: 13px;
	cursor: pointer;
}
.hp-pezzo-search__chip:hover { border-color: var(--hp-green-power-text, #126834); color: var(--hp-green-power-text, #126834); }
.hp-pezzo-search__chip:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }

.hp-pezzo-search__secondary {
	margin: var(--hp-space-3, 12px) 0 0;
	font-size: var(--hp-type-small-size, 14px);
	color: var(--hp-ink-muted, #565D69);
}
.hp-pezzo-search__secondary a { color: var(--hp-green-power-text, #126834); }

/* -- Shared: status/spinner/turns/blocks/reply/save — used by both the
   dedicated /pezzo/ workspace and (spinner aside) nowhere else now that
   the old large homepage form is gone. ------------------------------- */

.hp-pezzo__status {
	min-height: 1.2em;
	font-size: var(--hp-type-small-size, 14px);
	color: var(--hp-ink-muted, #565D69);
	margin: var(--hp-space-3, 12px) 0;
	text-align: center;
}
.hp-pezzo__status--error { color: var(--hp-danger-text, #B42318); }

.hp-pezzo__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hp-pezzo-spin 0.7s linear infinite;
}
.hp-pezzo__spinner--standalone {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--hp-line-strong, #CFC9BC);
	border-top-color: var(--hp-green-power-text, #126834);
	margin: var(--hp-space-6, 32px) auto;
}
.hp-pezzo-loading-shell { text-align: center; }
[data-state="loading"] .hp-pezzo__spinner { display: inline-block; }

@keyframes hp-pezzo-spin { to { transform: rotate(360deg); } }

.hp-pezzo-turn { margin-bottom: var(--hp-space-4, 16px); line-height: 1.6; }
.hp-pezzo-turn--assistant { white-space: pre-line; }

.hp-pezzo-block { margin: 0 0 var(--hp-space-4, 16px); }
.hp-pezzo-block h4 {
	font-size: var(--hp-type-small-size, 14px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hp-ink-muted, #565D69);
	margin: 0 0 var(--hp-space-2, 8px);
}
.hp-pezzo-block ul, .hp-pezzo-block ol { margin: 0; padding-left: 20px; }
.hp-pezzo-block--safety {
	background: var(--hp-danger-soft, #FDECEA);
	border: 1px solid var(--hp-danger-line, #F4C7C3);
	border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-4, 16px);
}
.hp-pezzo-block--safety h4 { color: var(--hp-danger-text, #B42318); }

/* PZ-SHOPPING-TRUST-UX-1 — "added_by" (system-completeness-proposed)
   requirements render in their own block, visually secondary to what the
   shopper actually asked for, with a one-line explanation of why it's
   there — never merged into the same flat list. */
.hp-pezzo-block--added {
	background: var(--hp-surface-warm, #FAF7F1);
	border: 1px solid var(--hp-line, #E0DCD2);
	border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-3, 12px) var(--hp-space-4, 16px);
}
.hp-pezzo-block__hint {
	margin: 0 0 var(--hp-space-2, 8px);
	font-size: var(--hp-type-small-size, 14px);
	color: var(--hp-ink-muted, #565D69);
}

/* PZ-FLOW-QTY1 — "caution"-severity safety_flags (ladder safety, possible
   lead paint, weather/ventilation, ordinary property protection): compact,
   muted, ALWAYS visible (never hidden by default — the task's explicit
   requirement) but deliberately NOT styled like the red hazard block above
   — an ordinary painting project must not read as dominated by a critical
   alert the way a genuine electrical/structural hazard should. */
.hp-pezzo-workspace__caution {
	background: var(--hp-surface-warm, #FAF7F1);
	border: 1px solid var(--hp-line, #E0DCD2);
	border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-3, 12px) var(--hp-space-4, 16px);
	margin: 0 0 var(--hp-space-4, 16px);
}
.hp-pezzo-workspace__caution-heading {
	margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--hp-ink-muted, #565D69);
}
.hp-pezzo-workspace__caution-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-workspace__caution-list li { margin-bottom: 4px; }
.hp-pezzo-workspace__caution-list li:last-child { margin-bottom: 0; }

/* Collapsible-but-open-by-default panels for potentially-long, non-critical
   lists (known facts / assumptions) — safety content is NEVER wrapped in
   these, matching the brief's "must not be hidden by default" rule. */
.hp-pezzo-details { margin: 0 0 var(--hp-space-4, 16px); border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px); padding: 10px 14px; }
.hp-pezzo-details summary {
	cursor: pointer;
	font-size: var(--hp-type-small-size, 14px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hp-ink-muted, #565D69);
	font-weight: 700;
}
.hp-pezzo-details summary:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-details ul { margin: 10px 0 0; padding-left: 20px; }

/* PZ-FLOW-QTY1 — the quantity-calculation basis (hp_pezzo_render_quantity_calculations(),
   hp-pezzo-quantity-render.php): always visible once present, each number
   tagged with its own provenance badge so a homeowner-stated figure, a
   derived one, and an assumed one are never visually indistinguishable. */
.hp-pezzo-quantities__card {
	border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-3, 12px) var(--hp-space-4, 16px); margin-bottom: var(--hp-space-3, 12px);
}
.hp-pezzo-quantities__card:last-of-type { margin-bottom: 0; }
.hp-pezzo-quantities__label { margin: 0 0 6px; font-weight: 700; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-quantities__inputs, .hp-pezzo-quantities__derived, .hp-pezzo-quantities__assumptions {
	list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; color: var(--hp-ink-strong, #14171C);
	display: flex; flex-direction: column; gap: 4px;
}
.hp-pezzo-quantities__formula {
	margin: 0 0 8px; font-family: monospace; font-size: 12px; color: var(--hp-ink-muted, #565D69);
	background: var(--hp-surface-warm, #FAF7F1); padding: 6px 8px; border-radius: var(--hp-radius-sm, 3px); overflow-wrap: anywhere;
}
.hp-pezzo-quantities__badge {
	display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--hp-radius-pill, 999px);
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.hp-pezzo-quantities__badge--homeowner_stated { background: #E7F3EA; color: var(--hp-green-power-text, #126834); }
.hp-pezzo-quantities__badge--derived { background: #E8EEF7; color: var(--hp-accent-text, #315E9E); }
.hp-pezzo-quantities__badge--assumed { background: var(--hp-surface-warm, #FAF7F1); color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-quantities__result { margin: 8px 0 0; font-size: 14px; }
.hp-pezzo-quantities__rounding { display: block; margin-top: 2px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-quantities__unresolved { margin: 8px 0 0; font-size: 12px; color: var(--hp-ink-muted, #565D69); font-style: italic; }
.hp-pezzo-quantities__disclaimer { margin: var(--hp-space-2, 8px) 0 0; font-size: 12px; color: var(--hp-ink-muted, #565D69); }

.hp-pezzo__reply-form { display: flex; gap: var(--hp-space-2, 8px); margin-top: var(--hp-space-4, 16px); }
.hp-pezzo__reply-input {
	flex: 1;
	min-height: 44px;
	max-height: 220px;
	padding: 10px 14px;
	border: 1px solid var(--hp-line-strong, #CFC9BC);
	border-radius: var(--hp-radius-md, 4px);
	font-family: var(--hp-font-sans);
	font-size: var(--hp-type-body-size, 16px);
	line-height: 1.4;
	resize: vertical;
}
/* PZ-FEEDBACK1 — every other Pezzo button already dims/greys out when
   disabled (.hp-pezzo-search__submit, .hp-pezzo-evidence__analyze,
   .hp-pezzo-research__submit, the rail buttons, etc.); this one never had
   the rule, so `sendBtn.disabled = true` was already correctly preventing
   a duplicate submit but looked pixel-identical to enabled — the reported
   "Send button appeared unchanged." */
.hp-pezzo__reply-input:disabled {
	opacity: 0.6;
	cursor: default;
	background-color: var(--hp-surface-warm, #FAF7F1);
}
.hp-pezzo__reply-send:disabled {
	opacity: 0.6;
	cursor: default;
}
.hp-pezzo__reply-send {
	min-height: 44px;
	min-width: 44px;
	padding: 0 20px;
	background: var(--hp-green-power-text, #126834);
	color: #fff;
	border: none;
	border-radius: var(--hp-radius-md, 4px);
	font-weight: 700;
	cursor: pointer;
}

.hp-pezzo__reply-status {
	min-height: 1.2em;
	margin: var(--hp-space-2, 8px) 0 0;
	font-size: var(--hp-type-small-size, 14px);
	color: var(--hp-ink-muted, #565D69);
}
.hp-pezzo__reply-status--error { color: var(--hp-danger-text, #B42318); }
.hp-pezzo__reply-retry {
	margin-left: var(--hp-space-2, 8px);
	padding: 2px 10px;
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--hp-radius-md, 4px);
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	cursor: pointer;
}

.hp-pezzo__save {
	margin-top: var(--hp-space-5, 24px);
	padding: var(--hp-space-5, 24px);
	background: var(--hp-surface-warm, #FAF7F1);
	border-radius: var(--hp-radius-md, 4px);
	text-align: center;
}
.hp-pezzo__save p { margin: 0 0 var(--hp-space-3, 12px); font-weight: 700; }
.hp-pezzo__save-actions { display: flex; gap: var(--hp-space-3, 12px); justify-content: center; flex-wrap: wrap; }
.hp-pezzo__save-actions a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--hp-radius-pill, 999px);
	text-decoration: none;
	font-weight: 600;
}
.hp-pezzo__save-actions a.hp-pezzo__save-login { background: var(--hp-green-power-text, #126834); color: #fff; }
.hp-pezzo__save-actions a.hp-pezzo__save-register { border: 1px solid var(--hp-green-power-text, #126834); color: var(--hp-green-power-text, #126834); }

/* -- Dedicated /pezzo/ workspace page (PZ1A) -------------------------------- */

/* PZ3A.1: widened from the shared --hp-measure-wide (920px, a global
   editorial-content token used elsewhere on the site and deliberately
   left untouched) to fit the product rail beside a genuinely comfortable
   main column — live-confirmed the 920px cap was the actual bottleneck
   even after widening the outer #brxe-pzwkct Bricks container, since this
   inner max-width was the tighter of the two. Scoped to this selector
   only; the shared token itself is not modified, so nothing else on the
   site using --hp-measure-wide is affected. */
.hp-pezzo-workspace { max-width: 1080px; margin: 0 auto; }
/* PZ1C: mode label (PEZZO · PROJECT PLAN / PRODUCT SEARCH / GUIDE SEARCH /
   SEARCH RESULTS) — more prominent than a small eyebrow, smaller than the
   title below it; wraps naturally (no white-space:nowrap) on mobile. */
/* PZ-GUEST-1 — the title block and the Start-new-project trigger share
   one row; wraps to its own line on narrow viewports rather than
   squeezing the title. */
.hp-pezzo-workspace-view__header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hp-space-3, 12px); flex-wrap: wrap; }
.hp-pezzo-workspace-view__label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hp-green-power-text, #126834); margin: 0 0 6px; }
.hp-pezzo-workspace-view__title { font-size: var(--hp-type-h2-size, 28px); margin: 0 0 var(--hp-space-3, 12px); color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-workspace-view__goal { color: var(--hp-ink-muted, #565D69); margin: 0 0 var(--hp-space-4, 16px); }
.hp-pezzo-workspace-view__clarification { font-size: 18px; margin: 0 0 var(--hp-space-4, 16px); }
.hp-pezzo-workspace-view__empty { color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-workspace__reason { color: var(--hp-ink-muted, #565D69); }

.hp-pezzo-search__form--refine { margin: var(--hp-space-5, 24px) 0 0; max-width: none; }

/* Result cards — the existing site-wide .hp-card-* recipe
   (homepezzo-section-colors.css), same pattern already reused for VP5's
   Installation Guides cards; only grid/link-wrapper rules are new here. */
.hp-pezzo-results-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hp-space-4, 16px);
}
.hp-pezzo-result-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hp-pezzo-result-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.hp-pezzo-result-card:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-result-card .hp-card-badge { margin: 14px 0 0 14px; align-self: flex-start; }
.hp-pezzo-result-card .hp-card-title { padding: 8px 14px 4px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-result-card__summary { padding: 0 14px 14px; font-size: var(--hp-type-small-size, 14px); color: var(--hp-ink-muted, #565D69); margin: 0; }

/* -- Account: Saved Projects list (PZ1, unchanged) -------------------------- */

.hp-pezzo-projects__heading { margin: 0 0 var(--hp-space-4, 16px); }
.hp-pezzo-projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hp-space-4, 16px); }
.hp-pezzo-projects__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--hp-space-4, 16px);
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	min-height: 44px;
}
.hp-pezzo-projects__item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.hp-pezzo-projects__item:focus-visible { outline: 2px solid var(--hp-accent, #315E9E); outline-offset: 2px; }
.hp-pezzo-projects__title { font-weight: 700; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-projects__meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-projects__status { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #F1F5F9; font-weight: 600; }
.hp-pezzo-projects__status--active { background: #DCFCE7; color: #166534; }
.hp-pezzo-projects__empty { color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-projects__add-btn {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: 0 20px;
	background: var(--hp-accent, #315E9E);
	color: #fff;
	border-radius: var(--hp-radius-pill, 999px);
	text-decoration: none;
	margin-top: 8px;
}

/* -- Account: single project workspace (PZ1, unchanged) --------------------- */

.hp-pezzo-workspace__back { display: inline-block; margin-bottom: var(--hp-space-3, 12px); color: var(--hp-accent-text, #315E9E); text-decoration: none; }
.hp-pezzo-workspace__title { margin: 0 0 4px; }
.hp-pezzo-workspace__updated { color: var(--hp-ink-muted, #565D69); font-size: 13px; margin: 0 0 var(--hp-space-5, 24px); }
.hp-pezzo-workspace__section { margin-bottom: var(--hp-space-5, 24px); }
.hp-pezzo-workspace__section h3 { font-size: 16px; margin: 0 0 8px; }
.hp-pezzo-workspace__phases { padding-left: 20px; }
.hp-pezzo-workspace__safety { background: var(--hp-danger-soft, #FDECEA); border: 1px solid var(--hp-danger-line, #F4C7C3); border-radius: var(--hp-radius-md, 4px); padding: var(--hp-space-4, 16px); }

/* -- Evidence: photos and documents (PZ2) -----------------------------------
   Shared by both /pezzo/ and /account/ (hp_pezzo_render_evidence_section(),
   homepezzo-pezzo-evidence.js) — one set of rules for both surfaces.
   Deliberately NOT chat-styled: a bordered utility panel using the same
   tokens as the rest of Pezzo, compact by default. --------------------- */

.hp-pezzo-evidence {
	margin-top: var(--hp-space-6, 32px);
	padding-top: var(--hp-space-5, 24px);
	border-top: 1px solid var(--hp-line, #E0DCD2);
}
.hp-pezzo-evidence__heading { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-evidence__intro { margin: 0 0 var(--hp-space-3, 12px); color: var(--hp-ink-muted, #565D69); font-size: var(--hp-type-small-size, 14px); }

.hp-pezzo-evidence__dropzone {
	border: 2px dashed var(--hp-line-strong, #CFC9BC);
	border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-4, 16px);
	text-align: center;
	cursor: pointer;
	background: var(--hp-surface-warm, #FAF7F1);
}
.hp-pezzo-evidence__dropzone:focus-visible,
.hp-pezzo-evidence__dropzone--over { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; border-color: var(--hp-green-power-text, #126834); }
.hp-pezzo-evidence__file-label { display: inline-block; font-weight: 700; color: var(--hp-green-power-text, #126834); cursor: pointer; margin-bottom: 4px; }
.hp-pezzo-evidence__file-input {
	/* Visually hidden but still keyboard/screen-reader operable — never display:none. */
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hp-pezzo-evidence__hint { margin: 4px 0 0; font-size: 13px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-evidence__submit-nojs { margin-top: var(--hp-space-2, 8px); min-height: 44px; padding: 0 20px; background: var(--hp-green-power-text, #126834); color: #fff; border: none; border-radius: var(--hp-radius-md, 4px); font-weight: 700; cursor: pointer; }

.hp-pezzo-evidence__status { min-height: 1.2em; font-size: var(--hp-type-small-size, 14px); color: var(--hp-ink-muted, #565D69); margin: var(--hp-space-2, 8px) 0; }
.hp-pezzo-evidence__status--error { color: var(--hp-danger-text, #B42318); }

.hp-pezzo-evidence__queue { list-style: none; margin: var(--hp-space-3, 12px) 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-pezzo-evidence__item {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px);
	padding: 8px 10px;
}
.hp-pezzo-evidence__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.hp-pezzo-evidence__doc-icon {
	width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	background: var(--hp-ink-strong, #14171C); color: #fff; font-size: 10px; font-weight: 700; border-radius: 4px;
}
.hp-pezzo-evidence__item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hp-pezzo-evidence__item-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-pezzo-evidence__item-size { font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-evidence__item-download,
.hp-pezzo-evidence__item-remove {
	flex-shrink: 0; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--hp-line-strong, #CFC9BC); border-radius: 50%; background: #fff; color: var(--hp-ink-strong, #14171C);
	text-decoration: none; cursor: pointer; font-size: 16px;
}
.hp-pezzo-evidence__item-remove:focus-visible,
.hp-pezzo-evidence__item-download:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }

.hp-pezzo-evidence__analyze {
	min-height: 44px; padding: 0 24px; background: var(--hp-green-power-text, #126834); color: #fff;
	border: 2px solid transparent; border-radius: var(--hp-radius-pill, 999px); font-weight: 700; cursor: pointer;
}
/* Disabled state is signaled by more than color alone: a flat grey fill,
   a visible border, and a not-allowed cursor — matches "do not communicate
   disabled state through color alone" (PZ2A). */
.hp-pezzo-evidence__analyze:disabled {
	background: var(--hp-surface-warm, #FAF7F1);
	color: var(--hp-ink-muted, #565D69);
	border-color: var(--hp-line-strong, #CFC9BC);
	cursor: not-allowed;
}
.hp-pezzo-evidence__analyze:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 3px; }
.hp-pezzo-evidence__analyze-hint { margin: 6px 0 0; font-size: 13px; color: var(--hp-ink-muted, #565D69); min-height: 1.2em; }

.hp-pezzo-evidence__findings { margin-top: var(--hp-space-4, 16px); }
.hp-pezzo-evidence__findings-heading { margin: 0 0 4px; }
.hp-pezzo-evidence__findings-hint { margin: 0 0 var(--hp-space-3, 12px); font-size: 13px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-evidence__finding {
	border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px);
	padding: 10px 14px; margin-bottom: 10px;
}
.hp-pezzo-evidence__finding-accept { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.hp-pezzo-evidence__finding-badge {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
	padding: 2px 8px; border-radius: var(--hp-radius-pill, 999px);
}
.hp-pezzo-evidence__finding-badge--observed { background: #DCFCE7; color: #166534; }
.hp-pezzo-evidence__finding-badge--likely { background: #FEF9C3; color: #854D0E; }
.hp-pezzo-evidence__finding-badge--could_not_confirm { background: #F1F5F9; color: #475569; }
.hp-pezzo-evidence__finding-desc,
.hp-pezzo-evidence__finding-excerpt { margin: 6px 0 0; font-size: 13px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-evidence__finding-excerpt { font-style: italic; }
.hp-pezzo-evidence__finding-correct { display: block; margin-top: 8px; font-size: 13px; }
.hp-pezzo-evidence__finding-correction { display: block; width: 100%; margin-top: 4px; min-height: 36px; padding: 0 10px; border: 1px solid var(--hp-line-strong, #CFC9BC); border-radius: var(--hp-radius-md, 4px); box-sizing: border-box; }
.hp-pezzo-evidence__conflict { margin-top: 8px; font-size: 13px; background: var(--hp-danger-soft, #FDECEA); border: 1px solid var(--hp-danger-line, #F4C7C3); border-radius: var(--hp-radius-md, 4px); padding: 8px 10px; }
.hp-pezzo-evidence__conflict label { margin-right: 10px; font-weight: 400; }

/* PZ-EVIDENCE-REVIEW — exception-driven review: a compact, low-friction
   list for straightforward observed findings (default-selected), and a
   visually separated, prominent "Needs your attention" block for
   conflicts/uncertain findings — reuses the exact same .hp-pezzo-evidence__finding
   card and .hp-pezzo-evidence__conflict treatment PZ2/PZ-EVIDENCE-QUALITY
   already established, just grouped and, for the compact case, collapsed
   by default. */
.hp-pezzo-evidence__section-heading { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hp-ink-muted, #565D69); margin: var(--hp-space-3, 12px) 0 8px; }
.hp-pezzo-evidence__straightforward { margin-bottom: var(--hp-space-3, 12px); }
.hp-pezzo-evidence__finding--compact { padding: 8px 14px; }
.hp-pezzo-evidence__finding-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-pezzo-evidence__finding-edit-toggle {
	flex-shrink: 0; background: none; border: none; color: var(--hp-green-power-text, #126834);
	font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px;
}
.hp-pezzo-evidence__finding-edit-toggle:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-evidence__finding-edit-panel { margin-top: 8px; }
.hp-pezzo-evidence__attention {
	background: var(--hp-surface-warm, #FAF7F1); border: 1px solid var(--hp-line-strong, #CFC9BC);
	border-radius: var(--hp-radius-md, 4px); padding: 10px 14px var(--hp-space-2, 8px);
}
.hp-pezzo-evidence__attention .hp-pezzo-evidence__section-heading { margin-top: 0; }
.hp-pezzo-evidence__attention .hp-pezzo-evidence__finding:last-child { margin-bottom: 0; }

.hp-pezzo-evidence__unreadable { margin-top: var(--hp-space-3, 12px); font-size: 13px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-evidence__pages-note { font-size: 13px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-evidence__confirm {
	min-height: 44px; padding: 0 24px; background: var(--hp-green-power-text, #126834); color: #fff;
	border: none; border-radius: var(--hp-radius-pill, 999px); font-weight: 700; cursor: pointer; margin-top: 8px;
}
.hp-pezzo-evidence__confirm:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 3px; }

.hp-pezzo-evidence__confirmed { margin-top: var(--hp-space-4, 16px); padding: var(--hp-space-3, 12px); background: var(--hp-surface-warm, #FAF7F1); border-radius: var(--hp-radius-md, 4px); }
.hp-pezzo-evidence__confirmed h4 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-evidence__fact-desc { color: var(--hp-ink-muted, #565D69); font-size: 13px; }
.hp-pezzo-evidence__empty { color: var(--hp-ink-muted, #565D69); font-size: 14px; }

/* -- Research: product comparison and shortlist (PZ3) -----------------------
   Shared by both /pezzo/ and /account/ (hp_pezzo_render_research_section(),
   homepezzo-pezzo-research.js). Same bordered-panel language as the
   evidence section above, not chat-styled. Candidate cards stack on
   mobile — no forced wide table. ------------------------------------- */

.hp-pezzo-research {
	margin-top: var(--hp-space-6, 32px);
	padding-top: var(--hp-space-5, 24px);
	border-top: 1px solid var(--hp-line, #E0DCD2);
}
.hp-pezzo-research__heading { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-research__intro { margin: 0 0 var(--hp-space-3, 12px); color: var(--hp-ink-muted, #565D69); font-size: var(--hp-type-small-size, 14px); }
.hp-pezzo-research__will-use { font-size: 13px; color: var(--hp-ink-muted, #565D69); margin-bottom: var(--hp-space-3, 12px); }
.hp-pezzo-research__will-use-missing { color: var(--hp-ink-muted, #565D69); }

.hp-pezzo-research__form { display: flex; flex-direction: column; gap: var(--hp-space-3, 12px); max-width: 480px; }
.hp-pezzo-research__field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.hp-pezzo-research__field input[type="text"],
.hp-pezzo-research__field input[type="number"],
.hp-pezzo-research__field select {
	width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--hp-line-strong, #CFC9BC);
	border-radius: var(--hp-radius-md, 4px); box-sizing: border-box; background: #fff;
}
.hp-pezzo-research__field--row { display: flex; gap: var(--hp-space-3, 12px); }
.hp-pezzo-research__field--row > div { flex: 1; }
.hp-pezzo-research__field--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; }

.hp-pezzo-research__submit {
	min-height: 44px; padding: 0 24px; background: var(--hp-green-power-text, #126834); color: #fff;
	border: 2px solid transparent; border-radius: var(--hp-radius-pill, 999px); font-weight: 700; cursor: pointer; align-self: flex-start;
}
/* Disabled state signaled by more than color alone, matching PZ2A's rule. */
.hp-pezzo-research__submit:disabled {
	background: var(--hp-surface-warm, #FAF7F1);
	color: var(--hp-ink-muted, #565D69);
	border-color: var(--hp-line-strong, #CFC9BC);
	cursor: not-allowed;
}
.hp-pezzo-research__submit:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 3px; }
.hp-pezzo-research__hint { margin: 6px 0 0; font-size: 13px; color: var(--hp-ink-muted, #565D69); min-height: 1.2em; }

.hp-pezzo-research__status { min-height: 1.2em; font-size: var(--hp-type-small-size, 14px); color: var(--hp-ink-muted, #565D69); margin: var(--hp-space-2, 8px) 0; }
.hp-pezzo-research__status--error { color: var(--hp-danger-text, #B42318); }
.hp-pezzo-research__error { color: var(--hp-danger-text, #B42318); }
.hp-pezzo-research__outdated,
.hp-pezzo-research__provisional { font-size: 13px; background: var(--hp-surface-warm, #FAF7F1); border: 1px solid var(--hp-line-strong, #CFC9BC); border-radius: var(--hp-radius-md, 4px); padding: 8px 10px; margin: var(--hp-space-3, 12px) 0; }
.hp-pezzo-research__summary { font-weight: 600; }
.hp-pezzo-research__missing { margin: var(--hp-space-3, 12px) 0; font-size: 13px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-research__disclaimer { margin-top: var(--hp-space-4, 16px); font-size: 12px; color: var(--hp-ink-muted, #565D69); }

.hp-pezzo-research__candidates {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--hp-space-4, 16px);
	margin: var(--hp-space-3, 12px) 0;
}
.hp-pezzo-research__card {
	border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-4, 16px); display: flex; flex-direction: column; gap: 8px;
	/* PZ3A.1: found live at 390px — the badge's own `white-space: nowrap`
	   (below) has no `min-width: 0` escape hatch on its flex ancestors, so
	   a long badge like "Strongest documented match" was forcing this
	   card (and its grid cell) wider than the viewport. min-width:0 is
	   the standard fix: it lets a flex/grid item shrink below its
	   content's intrinsic width instead of overflowing. Pre-existing PZ3
	   issue, fixed here only because it blocks this phase's own
	   "no horizontal overflow" requirement. */
	min-width: 0;
}
.hp-pezzo-research__card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; flex-wrap: wrap; }
.hp-pezzo-research__card-title { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.hp-pezzo-research__card-model,
.hp-pezzo-research__card-availability { font-size: 13px; color: var(--hp-ink-muted, #565D69); margin: 0; overflow-wrap: anywhere; }
.hp-pezzo-research__card-price { font-weight: 700; margin: 0; }
.hp-pezzo-research__card-checked { font-size: 11px; color: var(--hp-ink-muted, #565D69); margin: 0; }

/* Status is never signaled by color alone — a text label is always present
   (the badge text itself); color is purely a secondary reinforcement. */
.hp-pezzo-research__badge {
	font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
	padding: 3px 10px; border-radius: var(--hp-radius-pill, 999px); white-space: nowrap; flex-shrink: 0;
	border: 1px solid transparent;
}
.hp-pezzo-research__badge--matches { background: #DCFCE7; color: #166534; border-color: #166534; }
.hp-pezzo-research__badge--possible { background: #FEF9C3; color: #854D0E; border-color: #854D0E; }
.hp-pezzo-research__badge--does_not_match { background: #FDECEA; color: #B42318; border-color: #B42318; }

.hp-pezzo-research__specs { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.hp-pezzo-research__req-group { font-size: 13px; }
.hp-pezzo-research__req-group h6 { margin: 8px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-research__req-group ul { margin: 0; padding-left: 18px; }
.hp-pezzo-research__conflicts { font-size: 13px; background: var(--hp-danger-soft, #FDECEA); border: 1px solid var(--hp-danger-line, #F4C7C3); border-radius: var(--hp-radius-md, 4px); padding: 8px 10px; }
.hp-pezzo-research__conflicts h6 { margin: 0 0 4px; }
.hp-pezzo-research__pro-verify,
.hp-pezzo-research__reason { font-size: 12px; color: var(--hp-ink-muted, #565D69); margin: 0; }

.hp-pezzo-research__sources summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.hp-pezzo-research__sources ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-pezzo-research__sources a { color: var(--hp-accent-text, #315E9E); word-break: break-word; }
.hp-pezzo-research__source-meta,
.hp-pezzo-research__unverified-label { display: block; font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-research__source--unverified .hp-pezzo-research__unverified-label { color: var(--hp-danger-text, #B42318); }

.hp-pezzo-research__shortlist-btn {
	min-height: 40px; padding: 0 18px; margin-top: 6px; align-self: flex-start;
	background: #fff; color: var(--hp-green-power-text, #126834); border: 2px solid var(--hp-green-power-text, #126834);
	border-radius: var(--hp-radius-pill, 999px); font-weight: 700; cursor: pointer;
}
.hp-pezzo-research__shortlist-btn--saved { background: var(--hp-green-power-text, #126834); color: #fff; }
.hp-pezzo-research__shortlist-btn:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 3px; }

.hp-pezzo-research__shortlist-heading { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hp-ink-muted, #565D69); margin: var(--hp-space-4, 16px) 0 8px; }
.hp-pezzo-research__shortlist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-pezzo-research__shortlist-list li {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px); padding: 8px 10px;
}
.hp-pezzo-research__shortlist-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-pezzo-research__shortlist-link { font-size: 13px; color: var(--hp-accent-text, #315E9E); }
.hp-pezzo-research__shortlist-remove {
	flex-shrink: 0; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--hp-line-strong, #CFC9BC); border-radius: 50%; background: #fff; color: var(--hp-ink-strong, #14171C);
	cursor: pointer; font-size: 16px;
}
.hp-pezzo-research__shortlist-remove:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }

/* -- Products for your project rail (PZ3A, widened + de-cramped in PZ3A.1) ---
   Shared by both /pezzo/ and /account/. Uses a CSS CONTAINER query (not a
   viewport media query) keyed to .hp-pezzo-project-layout's own measured
   width, not the browser window — required because the SAME markup sits
   inside two very differently-sized real containers: /pezzo/'s wide,
   near-full-width single column, and /account/'s narrower ~2fr sidebar
   grid column (Page 8's own `#brxe-dbgrd { grid-template-columns: 3fr 2fr }`,
   live-measured 417–832px across common viewports). A viewport breakpoint
   alone would incorrectly try to lay out two columns inside the cramped
   account sidebar on a wide monitor; a container query correctly stacks
   there while still going two-column on the wider /pezzo/ page — one
   shared ruleset, no page-specific CSS needed. --------------------------- */

/* PZ3A.1: /pezzo/'s own Bricks page container (#brxe-pzwkct, set in
   hp_pezzo_maybe_create_workspace_page()) was capped at max-width:1000px —
   live-confirmed as the direct cause of "workspace doesn't use enough
   available width" (main content measured only 588px wide next to a
   300px rail). Widened here via an override in this stylesheet rather
   than editing the page's stored Bricks JSON — lower risk, same pattern
   already used elsewhere in this codebase for container-width fixes.
   /account/'s own grid width is intentionally left alone; the container
   query below already adapts to whatever space it actually has. */
#brxe-pzwkct { max-width: 1200px !important; }

.hp-pezzo-project-layout {
	/* The container itself — CSS container queries cannot restyle the
	   container element based on its OWN size, only its descendants, so
	   the actual flex row/column switch lives on .hp-pezzo-project-layout__row
	   below, one level in. (Confirmed live: an earlier version of this rule
	   put flex-direction directly on this element and the query silently
	   never matched — this two-level structure is required, not cosmetic.) */
	container-type: inline-size;
	container-name: pzrail;
}
.hp-pezzo-project-layout__row {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-5, 24px);
}
.hp-pezzo-project-layout__main { min-width: 0; }

.hp-pezzo-product-rail {
	width: 100%;
	border: 1px solid var(--hp-line, #E0DCD2);
	border-radius: var(--hp-radius-md, 4px);
	padding: var(--hp-space-4, 16px);
	background: var(--hp-surface-warm, #FAF7F1);
	box-sizing: border-box;
}
.hp-pezzo-product-rail:empty { display: none; border: none; padding: 0; background: none; }

@container pzrail (min-width: 700px) {
	.hp-pezzo-project-layout__row { flex-direction: row; align-items: flex-start; gap: var(--hp-space-6, 32px); }
	.hp-pezzo-project-layout__main { flex: 1; min-width: 0; }
	.hp-pezzo-product-rail {
		width: 320px;
		flex-shrink: 0;
		position: sticky;
		/* PZ3A.1: live-measured — /pezzo/ (guest) has no fixed header, but
		   /account/ (logged in) has a genuinely fixed #wpadminbar, 32px
		   tall, z-index 99999. `top` alone can't safely differ per page
		   from one shared rule, so the extra clearance is added via the
		   `body.admin-bar` hook WordPress itself already sets — never
		   overlaps the admin bar, and costs nothing when it's absent. */
		top: 24px;
		/* Explicitly NOT height/max-height/overflow-y here — the rail
		   must never scroll independently of the page (confirmed live as
		   a real cause of the cramped feel: content taller than the
		   viewport got clipped into its own internal scrollbar). The page
		   itself scrolls normally; `position: sticky` alone already stops
		   following once the rail's own bottom would go off-screen. */
	}
	body.admin-bar .hp-pezzo-product-rail { top: 56px; } /* 24px + the 32px fixed admin bar. */
}

.hp-pezzo-rail__heading { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-rail__intro { margin: 0 0 var(--hp-space-3, 12px); font-size: 13px; color: var(--hp-ink-muted, #565D69); }

.hp-pezzo-rail__rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--hp-space-3, 12px); }

.hp-pezzo-rail-row {
	display: flex; gap: 10px;
	background: #fff; border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px);
	padding: 10px 12px;
}
.hp-pezzo-rail-row__image {
	width: 40px; height: 40px; flex-shrink: 0; border-radius: 4px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; background: var(--hp-surface-warm, #FAF7F1);
}
.hp-pezzo-rail-row__image img { width: 100%; height: 100%; object-fit: cover; }
.hp-pezzo-rail-row__image-placeholder { font-size: 14px; font-weight: 700; color: var(--hp-ink-muted, #565D69); text-transform: uppercase; }

.hp-pezzo-rail-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hp-pezzo-rail-row__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.hp-pezzo-rail-row__category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hp-ink-muted, #565D69); }

/* Badge state is never color-alone — the text itself always names the state. */
.hp-pezzo-rail-row__badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--hp-radius-pill, 999px); white-space: nowrap; border: 1px solid transparent; }
.hp-pezzo-rail-row__badge--pezzo_pick { background: #EEF2F6; color: #315E9E; border-color: #315E9E; }
.hp-pezzo-rail-row__badge--user_choice { background: #DCFCE7; color: #166534; border-color: #166534; }

/* Name and price are the two most scannable facts in a row — deliberately
   the largest/heaviest text in the rail besides the total itself. Long
   names/manufacturers wrap onto their own lines rather than overflowing
   or forcing a narrow single-word column. */
.hp-pezzo-rail-row__name { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
/* PZ-QUALITY1A (Task B) — the COMPACT card's own name clamps to 2 lines;
   the dialog's copy of the same element (no --clamp class there) wraps
   normally, since the whole product name matters once a shopper has
   deliberately opened details. */
.hp-pezzo-rail-row__name--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-pezzo-rail-row__note { display: block; font-size: 12px; color: var(--hp-ink-muted, #565D69); overflow-wrap: anywhere; }
.hp-pezzo-rail-row__preliminary { display: block; font-size: 12px; color: var(--hp-ink-muted, #565D69); overflow-wrap: anywhere; }
.hp-pezzo-rail-row__variant { display: block; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__buy-link, .hp-pezzo-rail-row__manufacturer-link { display: inline-block; font-size: 12px; font-weight: 600; color: var(--hp-green-power-text, #126834); margin-top: 2px; }
.hp-pezzo-rail-row__manufacturer-link { color: var(--hp-ink-muted, #565D69); font-weight: 400; text-decoration: underline; }

/* PZ-VENDOR-CATALOG-3 — local-catalog provenance (vendor name + source
   badge + match explanation). Only ever rendered when a candidate came from
   the HomePezzo vendor catalog; absent for every external-research item. */
.hp-pezzo-rail-row__provenance { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.hp-pezzo-rail-row__provenance-badge {
	font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--hp-radius-pill, 999px);
	background: var(--hp-green-power-soft, #E2ECE0); color: var(--hp-green-power-deep, #126834); white-space: nowrap;
}
.hp-pezzo-rail-row__vendor { font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__match-explanation { font-size: 12px; color: var(--hp-ink-muted, #565D69); margin: 4px 0 0; overflow-wrap: anywhere; }

/* PZ-HERMES-SHOPPING-1A — the "Pezzo searched HomePezzo first" explanation
   shown on a category that fell through to external research, and the
   honest "no verified link" / "Supporting documents" states that replace a
   possibly-misleading purchase link when none could be verified. */
.hp-pezzo-rail-row__provenance-note { font-size: 12px; color: var(--hp-ink-muted, #565D69); margin: 2px 0 0; overflow-wrap: anywhere; }
.hp-pezzo-rail-row__no-verified-link { font-size: 12px; color: var(--hp-danger-text, #B42318); margin: 2px 0 0; overflow-wrap: anywhere; }
.hp-pezzo-rail-row__documents { margin-top: 8px; }
.hp-pezzo-rail-row__documents h5 { font-size: 12px; font-weight: 700; margin: 0 0 4px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-rail-row__documents ul { margin: 0; padding: 0; list-style: none; }
.hp-pezzo-rail-row__document-link { display: inline-block; font-size: 12px; color: var(--hp-ink-muted, #565D69); text-decoration: underline; margin: 0 0 2px; }

/* PZ-QUALITY1A (Task B/G) — the one compact status badge every card
   shows: never color-alone (the label text always names the state, same
   posture as .hp-pezzo-rail-row__badge above), so it reads correctly
   even to a screen-reader user or in high-contrast mode. */
.hp-pezzo-rail-row__status-badge {
	font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--hp-radius-pill, 999px);
	white-space: nowrap; border: 1px solid transparent;
}
.hp-pezzo-rail-row__status-badge--priced { background: #DCFCE7; color: #166534; border-color: #166534; }
.hp-pezzo-rail-row__status-badge--unpriced { background: var(--hp-surface-sunken, #EDEAE3); color: var(--hp-ink-muted, #565D69); border-color: var(--hp-line-strong, #CFC9BC); }
.hp-pezzo-rail-row__status-badge--allowance { background: #FEF3C7; color: #92400E; border-color: #92400E; }
.hp-pezzo-rail-row__status-badge--conflict { background: #FBECEA; color: var(--hp-danger-text, #B42318); border-color: var(--hp-danger-text, #B42318); }

.hp-pezzo-rail-row__summary-line { font-size: 13px; font-weight: 600; color: var(--hp-ink-strong, #14171C); }

/* One clamped warning line — the FULL explanation lives in "View details"
   (Task B: "do not allow one summary card to become several screens
   tall"); 2 lines is enough to be legible without a long paragraph
   reflowing the whole card. */
.hp-pezzo-rail-row__warning-compact {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 12px; overflow-wrap: anywhere;
}
.hp-pezzo-rail-row__warning-compact--conflict { color: var(--hp-danger-text, #B42318); font-weight: 600; }
.hp-pezzo-rail-row__warning-compact--priced,
.hp-pezzo-rail-row__warning-compact--unpriced,
.hp-pezzo-rail-row__warning-compact--allowance { color: var(--hp-ink-muted, #565D69); }

.hp-pezzo-rail-row__details-toggle {
	align-self: flex-start; margin-top: 3px; font-size: 12px; font-weight: 700; padding: 4px 12px; min-height: 30px;
	border-radius: var(--hp-radius-pill, 999px); border: 1px solid var(--hp-green-power-text, #126834);
	background: #fff; color: var(--hp-green-power-text, #126834); cursor: pointer;
}
.hp-pezzo-rail-row__details-toggle:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }

/* PZ-QUALITY1 — grouped-assembly / allowance tags, next to the role badge. */
.hp-pezzo-rail-row__assembly-tag {
	display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--hp-radius-pill, 999px);
	background: #EEF2F6; color: #315E9E; border: 1px solid #315E9E;
}
.hp-pezzo-rail-row__assembly-tag--allowance { background: #FEF3C7; color: #92400E; border-color: #92400E; }

/* PZ-QUALITY1 (Task B.3) — pairing-compatibility notes: a genuine
   deterministic conflict reads as a warning (amber/red), a preliminary-
   pairing verification note reads as neutral informational text — never
   the same visual weight, so a shopper can't miss the difference. */
.hp-pezzo-rail-row__pairing { display: block; font-size: 12px; overflow-wrap: anywhere; }
.hp-pezzo-rail-row__pairing--conflict { color: var(--hp-danger-text, #B42318); font-weight: 600; }
.hp-pezzo-rail-row__pairing--preliminary { color: var(--hp-ink-muted, #565D69); }

.hp-pezzo-rail-row__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.hp-pezzo-rail-row__qty-label { font-size: 11px; display: flex; align-items: center; gap: 6px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__qty-input { width: 52px; min-height: 30px; padding: 0 6px; border: 1px solid var(--hp-line-strong, #CFC9BC); border-radius: var(--hp-radius-md, 4px); box-sizing: border-box; }
.hp-pezzo-rail-row__qty-phrase { font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__price { font-size: 16px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.hp-pezzo-rail-row__freshness { display: block; font-size: 11px; font-weight: 400; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__freshness--partial { color: #92400E; font-weight: 600; }

/* PZ-QUALITY1 — "See details" additions: grouped BOM, allowance basis,
   compared electrical specs. Plain definition-list-style text, matching
   this file's existing hp-pezzo-research__* detail typography rather than
   inventing a new visual language for one disclosure. */
.hp-pezzo-rail-row__bom, .hp-pezzo-rail-row__electrical { margin: 10px 0 0; font-size: 13px; }
.hp-pezzo-rail-row__bom h5, .hp-pezzo-rail-row__electrical h5 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__bom ul, .hp-pezzo-rail-row__electrical ul { margin: 0; padding-left: 18px; }
.hp-pezzo-rail-row__allowance-basis, .hp-pezzo-rail-row__requirement { margin: 10px 0 0; font-size: 13px; color: var(--hp-ink-muted, #565D69); }

/* PZ-QUALITY1A — the SAME .hp-pezzo-rail-row content, cloned into the
   dialog, drops the compact card's own bordered/flex "card" chrome (that
   look belongs to the collapsed rail card, not a full-width dialog body)
   while keeping every child element's own styling (badges, name, meta,
   actions, details) unchanged. */
.hp-pezzo-rail-row--dialog { display: block; flex-direction: column; gap: 8px; background: none; border: none; padding: 0; }
.hp-pezzo-rail-row--dialog > * + * { margin-top: 8px; }

/* PZ-QUALITY1A (Task C/D) — the shared detail dialog/drawer. A native
   <dialog> shown via showModal() renders in the browser's top layer
   (above every normal z-index stacking context — no z-index token
   needed) and gives focus-trapping, initial focus, Escape-to-close, and
   background inertness per the HTML spec; only sizing/position/visual
   styling is this plugin's responsibility. Desktop: a wide, centered
   panel. Mobile (Task C "Preferred mobile behavior"): a full-width sheet
   anchored to the bottom of the viewport with its own internal scroll. */
.hp-pezzo-rail__dialog {
	border: none; border-radius: var(--hp-radius-md, 4px); box-shadow: var(--hp-shadow-overlay, 0 8px 24px rgba(20, 23, 28, 0.12));
	padding: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 64px));
	background: var(--hp-surface, #fff); color: var(--hp-ink-strong, #14171C);
	overscroll-behavior: contain;
}
.hp-pezzo-rail__dialog::backdrop { background: rgba(20, 23, 28, 0.5); }
.hp-pezzo-rail__dialog-header {
	position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 20px; border-bottom: 1px solid var(--hp-line, #E0DCD2); background: var(--hp-surface, #fff);
}
.hp-pezzo-rail__dialog-heading { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.hp-pezzo-rail__dialog-close {
	flex-shrink: 0; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%;
	border: 1px solid var(--hp-line-strong, #CFC9BC); background: #fff; color: var(--hp-ink-strong, #14171C);
	font-size: 18px; line-height: 1; cursor: pointer;
}
.hp-pezzo-rail__dialog-close:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail__dialog-body { padding: 16px 20px 24px; overflow-y: auto; }

/* Scroll lock while the dialog is open — belt-and-suspenders alongside
   the native top-layer/inert background behavior showModal() already
   provides, since page-level (not just dialog-internal) scroll isn't
   100% guaranteed suppressed across every browser/OS combination.
   Applied to <html> (not <body>) so it can never conflict with a theme
   that already sets its own overflow on <body>. */
html.hp-pezzo-rail-dialog-open { overflow: hidden; }

@media (max-width: 640px) {
	.hp-pezzo-rail__dialog {
		width: 100vw; max-width: 100vw; max-height: 85vh;
		margin: auto auto 0; border-radius: var(--hp-radius-md, 4px) var(--hp-radius-md, 4px) 0 0;
		position: fixed; left: 0; right: 0; bottom: 0; top: auto;
	}
	.hp-pezzo-rail__dialog-close { width: 40px; height: 40px; min-height: 40px; } /* larger touch target */
}

/* PZ-GUEST-1 — Start new project trigger + the guest-only
   Save-vs-Start-over dialog. The dialog reuses the exact panel/backdrop
   treatment PZ-QUALITY1A established for .hp-pezzo-rail__dialog above
   (same tokens, same top-layer showModal() behavior) rather than
   inventing a second modal look. */
.hp-pezzo-start-new__trigger {
	flex-shrink: 0; min-height: 40px; padding: 0 16px; border-radius: var(--hp-radius-pill, 999px);
	border: 1px solid var(--hp-green-power-text, #126834); background: none; color: var(--hp-green-power-text, #126834);
	font-weight: 600; font-size: 14px; cursor: pointer;
}
.hp-pezzo-start-new__trigger:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }

.hp-pezzo-start-new__dialog {
	border: none; border-radius: var(--hp-radius-md, 4px); box-shadow: var(--hp-shadow-overlay, 0 8px 24px rgba(20, 23, 28, 0.12));
	padding: var(--hp-space-5, 24px); margin: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
	background: var(--hp-surface, #fff); color: var(--hp-ink-strong, #14171C); overflow-y: auto;
}
.hp-pezzo-start-new__dialog::backdrop { background: rgba(20, 23, 28, 0.5); }
.hp-pezzo-start-new__dialog-title { margin: 0 0 var(--hp-space-2, 8px); font-size: 20px; }
.hp-pezzo-start-new__dialog-body { margin: 0 0 var(--hp-space-4, 16px); color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-start-new__option { padding: var(--hp-space-4, 16px) 0; border-top: 1px solid var(--hp-line, #E0DCD2); }
.hp-pezzo-start-new__option h3 { margin: 0 0 4px; font-size: 15px; }
.hp-pezzo-start-new__option p { margin: 0 0 var(--hp-space-3, 12px); color: var(--hp-ink-muted, #565D69); font-size: 14px; }
.hp-pezzo-start-new__option-actions { display: flex; gap: var(--hp-space-3, 12px); flex-wrap: wrap; }
.hp-pezzo-start-new__option-actions a,
.hp-pezzo-start-new__option-actions button {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
	border-radius: var(--hp-radius-pill, 999px); text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer;
}
.hp-pezzo-start-new__save-login { background: var(--hp-green-power-text, #126834); color: #fff; border: none; }
.hp-pezzo-start-new__save-register { border: 1px solid var(--hp-green-power-text, #126834); color: var(--hp-green-power-text, #126834); background: none; }
.hp-pezzo-start-new__confirm-start-over { border: 1px solid var(--hp-ink-strong, #14171C); color: var(--hp-ink-strong, #14171C); background: none; }
.hp-pezzo-start-new__confirm-start-over:disabled { opacity: 0.6; cursor: default; }
.hp-pezzo-start-new__cancel {
	margin-top: var(--hp-space-4, 16px); min-height: 40px; padding: 0 16px; border-radius: var(--hp-radius-pill, 999px);
	border: none; background: none; color: var(--hp-ink-muted, #565D69); font-size: 14px; cursor: pointer;
}

.hp-pezzo-rail-row__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hp-pezzo-rail-row__actions button {
	font-size: 12px; padding: 4px 10px; min-height: 28px; border-radius: var(--hp-radius-pill, 999px);
	border: 1px solid var(--hp-line-strong, #CFC9BC); background: #fff; color: var(--hp-ink-strong, #14171C); cursor: pointer;
}
.hp-pezzo-rail-row__actions button:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }

.hp-pezzo-rail-row__alternatives { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-pezzo-rail-row__alternatives[hidden] { display: none; } /* [hidden] and a class selector share specificity — this author-stylesheet override is required or the flex display wins by source order. */
.hp-pezzo-rail-row__alt-select {
	align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 700; padding: 4px 10px; min-height: 28px;
	border-radius: var(--hp-radius-pill, 999px); border: 1px solid var(--hp-green-power-text, #126834);
	background: #fff; color: var(--hp-green-power-text, #126834); cursor: pointer;
}
.hp-pezzo-rail-row__alt-select:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail-row__alt-select:disabled { opacity: 0.6; cursor: default; }

/* The total is the single most important number in the rail — largest
   text in the whole component, given clear visual weight and its own
   breathing room rather than competing with the found-product rows. */
.hp-pezzo-rail__footer { margin-top: var(--hp-space-4, 16px); padding-top: var(--hp-space-4, 16px); border-top: 1px solid var(--hp-line, #E0DCD2); }
.hp-pezzo-rail__total { font-size: 13px; font-weight: 600; color: var(--hp-ink-muted, #565D69); margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.03em; }
.hp-pezzo-rail__total strong { display: block; font-size: 24px; font-weight: 700; color: var(--hp-ink-strong, #14171C); text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
.hp-pezzo-rail__unpriced { font-size: 13px; color: var(--hp-ink-muted, #565D69); margin: 6px 0 0; }
.hp-pezzo-rail__footer-note { font-size: 12px; color: var(--hp-ink-muted, #565D69); margin: 6px 0 0; }

.hp-pezzo-rail__needed { margin-top: var(--hp-space-3, 12px); }
.hp-pezzo-rail__needed-toggle {
	width: 100%; text-align: left; min-height: 36px; padding: 6px 0; background: none; border: none; border-top: 1px solid var(--hp-line, #E0DCD2);
	font-size: 13px; font-weight: 600; color: var(--hp-ink-strong, #14171C); cursor: pointer;
}
.hp-pezzo-rail__needed-toggle:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail__needed-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--hp-ink-muted, #565D69); display: flex; flex-direction: column; gap: 4px; }
.hp-pezzo-rail__needed-list[hidden] { display: none; } /* Same [hidden]-vs-class specificity fix as .hp-pezzo-rail-row__alternatives above — live-confirmed via screenshot as a real bug (the list rendered already expanded) before this rule was added. */
.hp-pezzo-rail__needed-list li { overflow-wrap: anywhere; }

/* PZ3B — compact trigger for a deliberate research proposal; same visual
   language as the breakdown toggle below, kept smaller since it's a
   secondary action inside the already-collapsed "still to research" block. */
.hp-pezzo-rail__research-products {
	margin-top: var(--hp-space-3, 12px); min-height: 36px; padding: 0 16px; width: 100%;
	background: var(--hp-green-power-text, #126834); color: #fff; border: none; border-radius: var(--hp-radius-pill, 999px);
	font-weight: 700; cursor: pointer;
}
.hp-pezzo-rail__research-products:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 3px; }
.hp-pezzo-rail__research-products:disabled { opacity: 0.6; cursor: default; }

/* PZ-BATCH2 — working animation for the active batch. The row wraps the
   button + spinner in a flex line so the spinner appears beside it (not
   overlapping the button's own "Building estimate… N of T" text) without
   disturbing the button's normal full-width layout when idle (spinner is
   `hidden` — zero width/flex contribution — outside a running batch). */
.hp-pezzo-rail__research-status-row { display: flex; align-items: center; gap: 10px; margin-top: var(--hp-space-3, 12px); }
.hp-pezzo-rail__research-status-row .hp-pezzo-rail__research-products { margin-top: 0; flex: 1 1 auto; }

/* PZ-FLOW-QTY1 — the explicit Cancel path beside "Research products and
   prices," same visual weight class as the estimate breakdown's own
   secondary (non-destructive-styled) actions — never red/danger-styled,
   this is an ordinary "not yet" choice, not an error state. */
.hp-pezzo-rail__research-not-yet {
	flex: 0 0 auto; min-height: 36px; padding: 0 14px;
	background: transparent; color: var(--hp-ink-muted, #565D69);
	border: 1px solid var(--hp-line-strong, #CFC9BC); border-radius: var(--hp-radius-pill, 999px);
	font-weight: 600; cursor: pointer;
}
.hp-pezzo-rail__research-not-yet:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail__research-not-yet:disabled { opacity: 0.6; cursor: default; }

/* PZ-FLOW-QTY1 — "Calculate quantities," the primary action while the
   'quantities_needed' stage is active. Same pill shape as
   .hp-pezzo-rail__research-products but a distinct (accent, not green)
   color so the two are never visually confused for the same action. */
.hp-pezzo-rail__calculate-quantities {
	margin-top: var(--hp-space-3, 12px); min-height: 36px; padding: 0 16px; width: 100%;
	background: var(--hp-accent, #315E9E); color: #fff; border: none; border-radius: var(--hp-radius-pill, 999px);
	font-weight: 700; cursor: pointer;
}
.hp-pezzo-rail__calculate-quantities:focus-visible { outline: 2px solid var(--hp-accent, #315E9E); outline-offset: 3px; }
.hp-pezzo-rail__calculate-quantities:disabled { opacity: 0.6; cursor: default; }

/* PZ-FLOW-QTY1 — one line naming which categories a "Research products and
   prices" click will actually research, ahead of the button itself. */
.hp-pezzo-rail__research-explain {
	margin: var(--hp-space-2, 8px) 0 0; font-size: 12px; color: var(--hp-ink-muted, #565D69);
}
.hp-pezzo-rail__research-spinner {
	flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid var(--hp-line-strong, #CFC9BC);
	border-top-color: var(--hp-green-power-text, #126834);
	animation: hp-pezzo-spin 0.7s linear infinite;
}
.hp-pezzo-rail__research-spinner[hidden] { display: none; }

/* Gentle indeterminate-style movement: the fill's WIDTH is a real value
   (index/total — "3 of 4" is 75%, a genuine progress signal, not fake),
   but a category can run 20-45s between width changes, which reads as
   frozen without something continuously moving. A slow shimmer sweep
   across the fill (not the whole track) supplies that without implying
   false sub-category progress. */
.hp-pezzo-rail__research-bar {
	margin-top: var(--hp-space-2, 8px); height: 6px; border-radius: var(--hp-radius-pill, 999px);
	background: var(--hp-line, #E0DCD2); overflow: hidden;
}
.hp-pezzo-rail__research-bar[hidden] { display: none; }
.hp-pezzo-rail__research-bar-fill {
	position: relative; height: 100%; width: 0%; border-radius: var(--hp-radius-pill, 999px);
	background: var(--hp-green-power-text, #126834);
	transition: width 0.6s ease;
	overflow: hidden;
}
.hp-pezzo-rail__research-bar-fill::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	background-size: 60px 100%; background-repeat: no-repeat;
	animation: hp-pezzo-rail-bar-shimmer 1.6s ease-in-out infinite;
}
@keyframes hp-pezzo-rail-bar-shimmer {
	0% { background-position: -60px 0; }
	100% { background-position: calc(100% + 60px) 0; }
}

/* PZ-ONECLICK1 — the one-click batch's own compact status, right beside
   "Build my estimate" (never the far-away top-of-workspace status — see
   the PZ-FEEDBACK1 CHANGELOG entry for why that placement was a real
   defect for the reply form and is deliberately avoided again here). */
.hp-pezzo-rail__research-progress {
	display: block; margin-top: var(--hp-space-2, 8px); min-height: 1.2em;
	font-size: 13px; color: var(--hp-ink-muted, #565D69); text-align: center;
}
.hp-pezzo-rail__research-progress:empty { display: none; }
.hp-pezzo-rail__research-notice {
	margin-top: var(--hp-space-2, 8px); font-size: 12px; color: var(--hp-ink-muted, #565D69); text-align: center;
}

/* PZ3C.2A — replaces .hp-pezzo-rail__research-products in the same slot
   whenever hp_pezzo_estimate_readiness() reports blocked. Deliberately NOT
   styled like an error/danger state (no red) — this is normal, expected
   mid-project status, not a failure, matching the brief's "must not look
   failed or abandoned." */
.hp-pezzo-rail__blocked {
	margin-top: var(--hp-space-3, 12px); padding: 12px 14px;
	background: var(--hp-surface-warm, #FAF7F1); border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px);
}
.hp-pezzo-rail__blocked:focus-visible,
.hp-pezzo-rail__blocked:focus { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail__blocked-heading { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-rail__blocked-list { list-style: disc; margin: 0 0 8px; padding-left: 20px; font-size: 12px; color: var(--hp-ink-muted, #565D69); display: flex; flex-direction: column; gap: 4px; }
.hp-pezzo-rail__blocked-list li { overflow-wrap: anywhere; }
.hp-pezzo-rail__blocked-hint { margin: 0; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail__blocked-hint a { color: var(--hp-green-power-text, #126834); font-weight: 600; }

/* PZ3B — the proposal/progress/summary slot. Empty by default (collapses to
   nothing, same :empty pattern as .hp-pezzo-product-rail itself) — only
   ever populated by JS in direct response to a deliberate trigger, never on
   page load or refresh. */
.hp-pezzo-rail__proposal:empty { display: none; }
.hp-pezzo-rail__proposal { margin-top: var(--hp-space-3, 12px); padding-top: var(--hp-space-3, 12px); border-top: 1px solid var(--hp-line, #E0DCD2); }
.hp-pezzo-rail-proposal__message { font-size: 13px; color: var(--hp-ink-strong, #14171C); margin: 0; overflow-wrap: anywhere; }
.hp-pezzo-rail-proposal__actions { display: flex; gap: var(--hp-space-2, 8px); margin-top: var(--hp-space-3, 12px); }
.hp-pezzo-rail-proposal__start, .hp-pezzo-rail-proposal__cancel {
	flex: 1; min-height: 36px; padding: 0 16px; border-radius: var(--hp-radius-pill, 999px); font-weight: 700; cursor: pointer;
}
.hp-pezzo-rail-proposal__start { background: var(--hp-green-power-text, #126834); color: #fff; border: none; }
.hp-pezzo-rail-proposal__start:disabled { opacity: 0.6; cursor: default; }
.hp-pezzo-rail-proposal__cancel { background: #fff; color: var(--hp-ink-muted, #565D69); border: 1px solid var(--hp-line, #E0DCD2); }
.hp-pezzo-rail-proposal__start:focus-visible, .hp-pezzo-rail-proposal__cancel:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }

.hp-pezzo-rail__breakdown-toggle {
	width: 100%; min-height: 36px; padding: 0 16px; margin-top: var(--hp-space-3, 12px); background: #fff; color: var(--hp-green-power-text, #126834);
	border: 2px solid var(--hp-green-power-text, #126834); border-radius: var(--hp-radius-pill, 999px); font-weight: 700; cursor: pointer;
}
.hp-pezzo-rail__breakdown-toggle:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 3px; }

.hp-pezzo-rail__breakdown { margin-top: var(--hp-space-3, 12px); font-size: 13px; }
/* PZ3C.1 (Part 10) — a compact card list, not a <table>: readable at any
   rail width (320px sidebar through full-width-stacked mobile) with no
   horizontal-scroll wrapper needed at all, unlike a multi-column table. */
.hp-pezzo-rail__breakdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-pezzo-rail__breakdown-item { border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px); padding: 8px 10px; }
.hp-pezzo-rail__breakdown-item-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13px; }
.hp-pezzo-rail__breakdown-item-name { min-width: 0; overflow-wrap: anywhere; }
.hp-pezzo-rail__breakdown-item-amount { flex-shrink: 0; overflow-wrap: anywhere; }
.hp-pezzo-rail__breakdown-item-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail__breakdown-needed { margin-top: var(--hp-space-3, 12px); }
.hp-pezzo-rail__breakdown-needed h5 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail__breakdown-total { margin-top: var(--hp-space-3, 12px); font-weight: 700; }

.hp-pezzo-rail__planning-note { margin-top: var(--hp-space-3, 12px); font-size: 11px; color: var(--hp-ink-muted, #565D69); }

/* PZ3C.1 (Part 6) — progress summary: the single most scannable line in
   the rail besides the total itself, deliberately placed right under the
   heading. Every distinguishing count is its own list item, never merged
   into the summary sentence. */
.hp-pezzo-rail__progress { margin: 0 0 var(--hp-space-3, 12px); }
.hp-pezzo-rail__progress-summary { margin: 0; font-size: 15px; font-weight: 700; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-rail__progress-notes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }

/* PZ3C.1 (Part 6/9/12) — "no compatible product found": deliberately not
   a full row (there's no product/price/link to show) — a compact line
   with its own optional detail disclosure. */
.hp-pezzo-rail__no-match { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--hp-space-3, 12px); }
.hp-pezzo-rail__no-match-row { border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px); padding: 8px 10px; background: #fff; }
.hp-pezzo-rail__no-match-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hp-pezzo-rail__no-match-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail__no-match-text { font-size: 13px; font-weight: 600; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-rail__no-match-toggle {
	margin-top: 4px; font-size: 12px; font-weight: 600; padding: 4px 0; min-height: 28px; background: none; border: none;
	color: var(--hp-accent-text, #315E9E); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.hp-pezzo-rail__no-match-toggle:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail__no-match-details { margin-top: 6px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail__no-match-details[hidden] { display: none; }

.hp-pezzo-rail__needed-failed { color: var(--hp-ink-muted, #565D69); font-weight: 400; font-style: italic; }
.hp-pezzo-rail__needed-blocked { color: var(--hp-ink-muted, #565D69); font-weight: 400; font-style: italic; }

/* PZ-FLOW-QTY1 — an honest, compact caveat that a rendered pick is only
   PART of a multi-item category's needs (never a full second line-item
   list — see hp-pezzo-schema.php's 1.11 docblock). Muted, not a warning
   color — this is expected/normal, not a problem. */
.hp-pezzo-rail-row__multi-item-note {
	display: block; margin-top: 2px; font-size: 12px; color: var(--hp-ink-muted, #565D69); font-style: italic;
}
.hp-pezzo-rail__breakdown-multi-item {
	display: block; font-size: 11px; color: var(--hp-ink-muted, #565D69); font-style: italic;
}

/* PZ3C.1 (Part 4) — "Research preferences" disclosure, same visual
   language as the rail's own established .hp-pezzo-rail__needed-toggle
   pattern (button, not <details>, for consistency). */
.hp-pezzo-research__prefs-toggle {
	width: 100%; text-align: left; min-height: 36px; padding: 8px 0; background: none; border: none; border-top: 1px solid var(--hp-line, #E0DCD2);
	font-size: 13px; font-weight: 600; color: var(--hp-ink-strong, #14171C); cursor: pointer; margin-bottom: var(--hp-space-3, 12px);
}
.hp-pezzo-research__prefs-toggle:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-research__prefs[hidden] { display: none; }
.hp-pezzo-research__done { color: var(--hp-green-power-text, #126834); font-weight: 600; }

/* PZ3C.1 (Part 9) — "See research details" per rail row: reuses the exact
   same .hp-pezzo-research__card markup the old top-level section used, so
   no new candidate-card styling is needed here, only the toggle/container. */
.hp-pezzo-rail-row__details-toggle {
	font-size: 12px; padding: 4px 10px; min-height: 28px; border-radius: var(--hp-radius-pill, 999px);
	border: 1px solid var(--hp-line-strong, #CFC9BC); background: #fff; color: var(--hp-ink-strong, #14171C); cursor: pointer;
}
.hp-pezzo-rail-row__details-toggle:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail-row__details { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hp-line, #E0DCD2); }
.hp-pezzo-rail-row__details[hidden] { display: none; }
.hp-pezzo-rail-row__details .hp-pezzo-research__candidates { display: flex; flex-direction: column; gap: 10px; }

/* PZ3C.1 (Part 7) — richer "View alternatives" list items: name+role on
   one line, price/price-diff/manufacturer as compact meta, an explicit
   "Use this product" action distinct from the name itself. */
.hp-pezzo-rail-row__alt { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px); background: var(--hp-surface-warm, #FAF7F1); }
.hp-pezzo-rail-row__alt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hp-pezzo-rail-row__alt-name { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.hp-pezzo-rail-row__alt-meta { font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__alt-reason { font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail-row__alt-empty { font-size: 12px; color: var(--hp-ink-muted, #565D69); padding: 4px 0; }

/* PZ3C (Part 4) — product-name links, shared across the rail row, research
   candidate cards, and shortlist. Never color-alone: an underline carries
   the "this is a link" signal too, so it still reads correctly for anyone
   who can't distinguish the accent color. */
.hp-pezzo-rail-row__name a,
.hp-pezzo-research__card-title a,
.hp-pezzo-research__shortlist-name a {
	color: inherit; text-decoration: underline; text-decoration-color: var(--hp-line-strong, #CFC9BC); text-underline-offset: 2px;
}
.hp-pezzo-rail-row__name a:hover,
.hp-pezzo-research__card-title a:hover,
.hp-pezzo-research__shortlist-name a:hover {
	text-decoration-color: currentColor;
}
.hp-pezzo-rail-row__name a:focus-visible,
.hp-pezzo-research__card-title a:focus-visible,
.hp-pezzo-research__shortlist-name a:focus-visible,
.hp-pezzo-product-link--source:focus-visible {
	outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px;
}
/* "See source" fallback — a smaller, secondary affordance next to the
   (unlinked) product name, honestly distinct from a direct product link. */
.hp-pezzo-product-link--source {
	display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--hp-accent-text, #315E9E);
	text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}

/* PZ3C (Part 5) — Recommended / Budget option / Alternative. Text-labeled,
   never color-only, matching the existing badge convention above. */
.hp-pezzo-role-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--hp-radius-pill, 999px); white-space: nowrap; border: 1px solid transparent; }
.hp-pezzo-role-badge--recommended { background: #DCFCE7; color: #166534; border-color: #166534; }
.hp-pezzo-role-badge--budget { background: #FEF3C7; color: #92400E; border-color: #92400E; }
.hp-pezzo-role-badge--alternative { background: #EEF2F6; color: #315E9E; border-color: #315E9E; }

/* PZ3C (Part 6) — optional items awaiting an explicit "Add to estimate";
   visually secondary to the counted rows above (muted, no price weight)
   so it never reads as already-included. */
.hp-pezzo-rail__optional { margin-top: var(--hp-space-3, 12px); padding-top: var(--hp-space-3, 12px); border-top: 1px solid var(--hp-line, #E0DCD2); }
.hp-pezzo-rail__optional-heading { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--hp-ink-muted, #565D69); text-transform: uppercase; letter-spacing: 0.03em; }
.hp-pezzo-rail__optional-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-pezzo-rail__optional-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
	background: var(--hp-surface-warm, #FAF7F1); border: 1px dashed var(--hp-line-strong, #CFC9BC); border-radius: var(--hp-radius-md, 4px);
	padding: 8px 10px;
}
.hp-pezzo-rail__optional-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hp-pezzo-rail__optional-name { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.hp-pezzo-rail__optional-category { font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail__optional-price { font-size: 12px; font-weight: 600; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-rail__optional-add {
	flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 6px 12px; min-height: 32px; border-radius: var(--hp-radius-pill, 999px);
	border: 1px solid var(--hp-green-power-text, #126834); background: #fff; color: var(--hp-green-power-text, #126834); cursor: pointer;
}
.hp-pezzo-rail__optional-add:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-rail__optional-add:disabled { opacity: 0.6; cursor: default; }

/* PZ3C (Part 6) — the estimate summary. Visually distinct from the rows
   above (its own bordered card, not a checkout table) but built from the
   same design tokens as the rest of the rail. */
.hp-pezzo-estimate {
	margin-top: var(--hp-space-4, 16px); padding: var(--hp-space-4, 16px);
	background: var(--hp-surface-warm, #FAF7F1); border: 1px solid var(--hp-line, #E0DCD2); border-radius: var(--hp-radius-md, 4px);
}
.hp-pezzo-estimate__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--hp-ink-strong, #14171C); }
/* PZ-QUALITY1A.1 (Task C) — the always-visible compact contract: heading
   (above), amount, one completeness line, one excluded-category summary
   line, "Not purchase-ready" when applicable, and the "See breakdown"
   control. Everything else that used to render inline unconditionally
   (full line-item list, both subtotal rows, excluded list, exclusions
   note, extended disclaimer) now lives only in the breakdown dialog. */
.hp-pezzo-estimate__total-compact { margin: 4px 0 6px; }
.hp-pezzo-estimate__total-compact strong { font-size: 24px; font-weight: 700; color: var(--hp-ink-strong, #14171C); overflow-wrap: anywhere; }
.hp-pezzo-estimate__completeness-line { margin: 0 0 4px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-estimate__excluded-summary { margin: 0 0 8px; font-size: 12px; color: var(--hp-ink-muted, #565D69); overflow-wrap: anywhere; }
.hp-pezzo-estimate__lines { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-pezzo-estimate__line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.hp-pezzo-estimate__line-category { min-width: 0; overflow-wrap: anywhere; }
.hp-pezzo-estimate__line-qty { color: var(--hp-ink-muted, #565D69); font-weight: 400; }
.hp-pezzo-estimate__line-optional-tag {
	display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
	color: var(--hp-ink-muted, #565D69);
}
.hp-pezzo-estimate__line-amount { flex-shrink: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.hp-pezzo-estimate__totals { padding-top: 10px; border-top: 1px solid var(--hp-line, #E0DCD2); }
.hp-pezzo-estimate__subtotal { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-estimate__total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--hp-ink-muted, #565D69); text-transform: uppercase; letter-spacing: 0.03em; }
.hp-pezzo-estimate__total strong { font-size: 24px; font-weight: 700; color: var(--hp-ink-strong, #14171C); text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
.hp-pezzo-estimate__unpriced { margin: 6px 0 0; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
/* PZ-QUALITY1 (Task E) — the excluded-categories list directly under the
   "Priced subtotal" note, so "what's missing" is never just a bare count. */
.hp-pezzo-estimate__excluded { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--hp-ink-muted, #565D69); display: flex; flex-direction: column; gap: 2px; }
.hp-pezzo-estimate__excluded-reason { color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-estimate__not-purchase-ready {
	margin: 10px 0 0; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--hp-danger-text, #B42318);
	background: #FEF2F2; border: 1px solid var(--hp-danger-text, #B42318); border-radius: var(--hp-radius-md, 4px);
}
.hp-pezzo-estimate__exclusions { margin: 10px 0 0; font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-estimate__disclaimer { margin: 4px 0 0; font-size: 11px; color: var(--hp-ink-muted, #565D69); }

/* PZ3C.2 (Part 3) — the "blocking" severity label inside .hp-pezzo-missing-list
   (the list itself already inherits .hp-pezzo-block's ul styling wherever it's
   rendered — hp-pezzo-workspace.php / hp-pezzo-account.php — this only styles
   the inline label a "blocking" item gets). Same danger-text token as the
   safety block, at inline label scale rather than a full card. */
.hp-pezzo-missing-list__blocking {
	color: var(--hp-danger-text, #B42318);
	font-size: 11px;
	font-weight: 600;
}

/* PZ3C.2 (Part 6) — system compatibility verdict block, rendered inside
   .hp-pezzo-estimate (hp_pezzo_render_system_compatibility(), called from
   hp_pezzo_render_estimate_summary()). Verdict-specific accent color only
   (never a full background swap) so it reads as part of the estimate card,
   not a separate alert — "conflict" is the one verdict that gets a stronger
   treatment since it is the one case the homeowner must not miss. */
.hp-pezzo-compatibility {
	margin-top: var(--hp-space-4, 16px);
	padding-top: var(--hp-space-4, 16px);
	border-top: 1px solid var(--hp-line, #E0DCD2);
}
.hp-pezzo-compatibility__verdict {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hp-ink-strong, #14171C);
}
.hp-pezzo-compatibility--conflict .hp-pezzo-compatibility__verdict { color: var(--hp-danger-text, #B42318); }
.hp-pezzo-compatibility--compatible .hp-pezzo-compatibility__verdict,
.hp-pezzo-compatibility--compatible_with_assumptions .hp-pezzo-compatibility__verdict { color: var(--hp-green-power-text, #126834); }
.hp-pezzo-compatibility__summary { margin: 0 0 8px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-compatibility__findings { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-pezzo-compatibility__finding { font-size: 12px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-compatibility--conflict .hp-pezzo-compatibility__findings {
	background: var(--hp-danger-soft, #FDECEA);
	border: 1px solid var(--hp-danger-line, #F4C7C3);
	border-radius: var(--hp-radius-md, 4px);
	padding: 10px 12px;
}
.hp-pezzo-compatibility__finding-sources { display: block; margin-top: 2px; font-size: 11px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-compatibility__finding-sources a { color: inherit; }
.hp-pezzo-compatibility__professional { margin: 0 0 8px; font-size: 11px; font-style: italic; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-compatibility__stale { margin: 8px 0 0; font-size: 11px; color: var(--hp-ink-muted, #565D69); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-pezzo-compatibility--researching p,
.hp-pezzo-compatibility--failed p { margin: 0; font-size: 12px; color: var(--hp-ink-muted, #565D69); }

.hp-pezzo-compatibility__recheck {
	font-family: var(--hp-font-sans);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--hp-radius-pill, 999px);
	border: 1px solid var(--hp-green-power-text, #126834);
	background: #fff;
	color: var(--hp-green-power-text, #126834);
	cursor: pointer;
}
.hp-pezzo-compatibility--failed .hp-pezzo-compatibility__recheck { margin-top: 8px; }
.hp-pezzo-compatibility__recheck:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-compatibility__recheck:disabled { opacity: 0.6; cursor: default; }

/* PZ-COMPLETENESS — same token/shape reuse as .hp-pezzo-compatibility
   above (deliberately identical visual language, since both are "system
   check" cards in the same estimate card), rendered ABOVE it so an
   incomplete-system warning is never read after a "Compatible" badge. */
.hp-pezzo-completeness {
	margin-top: var(--hp-space-4, 16px);
	padding-top: var(--hp-space-4, 16px);
	border-top: 1px solid var(--hp-line, #E0DCD2);
}
.hp-pezzo-completeness__verdict { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-completeness--complete .hp-pezzo-completeness__verdict { color: var(--hp-green-power-text, #126834); }
.hp-pezzo-completeness--incomplete .hp-pezzo-completeness__verdict { color: var(--hp-danger-text, #B42318); }
.hp-pezzo-completeness__summary { margin: 0 0 4px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-completeness__gap { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-completeness__gap-reason { margin: 0 0 8px; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-completeness__details { margin: 0 0 8px; font-size: 12px; color: var(--hp-ink-strong, #14171C); }
.hp-pezzo-completeness__details summary { cursor: pointer; font-weight: 600; color: var(--hp-green-power-text, #126834); }
.hp-pezzo-completeness__details ul { margin: 6px 0 0; padding-left: 18px; }
.hp-pezzo-completeness__stale { margin: 8px 0 0; font-size: 11px; color: var(--hp-ink-muted, #565D69); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-pezzo-completeness--researching p,
.hp-pezzo-completeness--failed p { margin: 0; font-size: 12px; color: var(--hp-ink-muted, #565D69); }
.hp-pezzo-completeness__recheck {
	font-family: var(--hp-font-sans);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--hp-radius-pill, 999px);
	border: 1px solid var(--hp-green-power-text, #126834);
	background: #fff;
	color: var(--hp-green-power-text, #126834);
	cursor: pointer;
}
.hp-pezzo-completeness--failed .hp-pezzo-completeness__recheck { margin-top: 8px; }
.hp-pezzo-completeness__recheck:focus-visible { outline: 2px solid var(--hp-green-power-text, #126834); outline-offset: 2px; }
.hp-pezzo-completeness__recheck:disabled { opacity: 0.6; cursor: default; }

/* -- Responsive -------------------------------------------------------------- */

@media (max-width: 991px) {
	.hp-pezzo-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.hp-pezzo-search__form { flex-direction: column; }
	.hp-pezzo-search__submit { width: 100%; justify-content: center; }
	.hp-pezzo-search__examples { justify-content: center; } /* matches hp01lc's own centered mobile layout */
	.hp-pezzo-projects__grid { grid-template-columns: 1fr; }
	.hp-pezzo-results-grid { grid-template-columns: 1fr; }
	.hp-pezzo__reply-form { flex-direction: column; }
	.hp-pezzo-evidence__analyze,
	.hp-pezzo-evidence__confirm { width: 100%; justify-content: center; }
	.hp-pezzo-evidence__item-name { max-width: 160px; }
	.hp-pezzo-research__candidates { grid-template-columns: 1fr; }
	.hp-pezzo-research__field--row { flex-direction: column; }
	.hp-pezzo-research__submit,
	.hp-pezzo-research__shortlist-btn { width: 100%; justify-content: center; }
	.hp-pezzo-research__shortlist-name { max-width: 160px; }

	/* PZ3C — optional-item rows and estimate lines stack rather than
	   squeezing a button or amount onto the same line as a long name. */
	.hp-pezzo-rail__optional-row { flex-direction: column; align-items: stretch; }
	.hp-pezzo-rail__optional-add { width: 100%; }
	.hp-pezzo-estimate__line { flex-direction: column; gap: 2px; }
	.hp-pezzo-estimate__line-amount { text-align: left; }

	/* PZ3C.1 — the breakdown card list (.hp-pezzo-rail__breakdown-list)
	   already wraps safely at every width via flex-wrap, so no mobile
	   override is needed here (unlike the <table> it replaced). */
}

@media (prefers-reduced-motion: reduce) {
	.hp-pezzo-search *, .hp-pezzo-workspace *, .hp-pezzo-result-card, .hp-pezzo-research *, .hp-pezzo-product-rail * { animation-duration: 0.001ms !important; transition: none !important; }

	/* PZ-BATCH2 — an explicit static replacement, not just "the same
	   rotating ring frozen mid-frame" (a near-zero animation-duration can
	   still land on an arbitrary/ambiguous-looking angle in some
	   browsers). A plain solid dot is an unambiguous "working" indicator
	   with no implied motion. */
	.hp-pezzo-rail__research-spinner {
		animation: none !important; border: none !important;
		background: var(--hp-green-power-text, #126834) !important;
	}
	/* The shimmer sweep is fully suppressed; the fill's WIDTH still jumps
	   straight to the new value on each category (a discrete state change,
	   not continuous/decorative motion) rather than sliding into place. */
	.hp-pezzo-rail__research-bar-fill::after { display: none !important; }
}

/* Empty /pezzo/ orientation only; wrapper is absent from project/query views. */
.hp-pezzo-entry__title {
    margin: 0 0 var(--hp-space-3, 12px);
}
.hp-pezzo-entry__description {
    max-width: 70ch;
    margin: 0 0 var(--hp-space-5, 24px);
}
.hp-pezzo-entry .hp-pezzo-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
.hp-pezzo-entry .hp-pezzo-search__form > label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    grid-column: 1 / -1;
    font-weight: 600;
}
@media (max-width: 767px) {
    .hp-pezzo-entry .hp-pezzo-search__form {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Compact access when the existing rail is stacked below the plan.
   Use the rail's established container breakpoint, not a new viewport rule. */
.hp-pezzo-product-jump { display: none; }
@container pzrail (max-width: 699.98px) {
	.hp-pezzo-product-jump:not([hidden]) {
		display: block;
		padding: var(--hp-space-4, 16px);
		margin-bottom: var(--hp-space-5, 24px);
		border: 1px solid var(--hp-line, #E0DCD2);
		border-radius: var(--hp-radius-md, 4px);
		background: var(--hp-surface-warm, #FAF7F1);
	}
	.hp-pezzo-product-jump__status { margin: 0 0 4px; }
	.hp-pezzo-product-jump a { text-decoration: underline; }
	.hp-pezzo-product-rail { scroll-margin-top: 64px; }
}

/* Keep reply context and incomplete estimate status beside their controls. */
.hp-pezzo-reply-context { margin: 20px 0 8px; padding: 14px; border: 1px solid var(--hp-line-strong, #CFC9BC); border-radius: 8px; background: var(--hp-surface-warm, #FAF7F1); }
.hp-pezzo-reply-context h4 { margin-top: 0; }
.hp-pezzo-reply-context ul { margin-bottom: 0; }
.hp-pezzo__reply-form { flex-wrap: wrap; }
.hp-pezzo__reply-label { flex-basis: 100%; font-weight: 600; }
.hp-pezzo-estimate__excluded-visible { padding-left: 20px; margin: 8px 0 18px; font-size: 14px; }
.hp-pezzo-estimate__excluded-visible li { margin-bottom: 8px; overflow-wrap: anywhere; }
.hp-pezzo-product-jump { margin-top: 12px; }

.hp-pezzo__reply-input { min-height: 96px; }