/* b12 parts-book panel (pb2.js). Uses the editor's --qe-* tokens only (proto/b11/DESIGN.md): two radii, the 4-pt
   spacing, the type scale, the three pill tiers and the one selected style. Dense but calm: 36px rows at desktop. */
.qe2-book-sheet .qe2-sheet-body { --pb2-pad: var(--qe-s-6); --pb2-top: var(--qe-s-4); padding-top: var(--pb2-top); }
.pb2 { container: pb2 / inline-size; min-width: 0; color: var(--qe-ink); }
.pb2 :where(h3, h4, h5, p, dl, dd, blockquote) { margin: 0; }
.pb2-loading { padding: var(--qe-s-4) 0; }
.pb2-dim { color: var(--qe-ink-3); }
.pb2-warn-text { color: var(--qe-ink-3) !important; }
.pb2 .qe2-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.pb2 mark { background: transparent; color: inherit; font-weight: 600; text-decoration: underline; border-radius: 0; padding: 0; }
.pb2-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink-3); font: 500 11px/16px var(--qe-font); }

/* Unit switcher: the site's units as one segmented track; each says whether it has a book. */
.pb2-units { display: flex; gap: 0; padding: var(--qe-s-1); margin-bottom: var(--qe-s-4); border-radius: var(--qe-r-2); background: var(--qe-canvas); }
.pb2-utab { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name stat" "model stat"; align-items: center; column-gap: var(--qe-s-2); padding: 6px var(--qe-s-3); border: 1px solid transparent; border-radius: var(--qe-r-1); background: transparent; text-align: left; color: var(--qe-ink-2); }
.pb2-utab:hover { background: var(--qe-hover); }
.pb2-utab[aria-selected="true"] { background: var(--qe-surface); border-color: var(--qe-line); color: var(--qe-ink); font-weight: 500; }
.pb2-utab-name { grid-area: name; font-weight: 600; font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.pb2-utab-model { grid-area: model; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb2-ustat { grid-area: stat; display: inline-flex; align-items: center; gap: 4px; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink-3); white-space: nowrap; }
.pb2-ustat .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.pb2-ok { color: var(--qe-ok-ink); }
.pb2-warn { color: var(--qe-ink-3); }

/* The unit as we know it, the decoded model and the book. */
.pb2-unit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--qe-s-3); }
.pb2-unit-title { font-size: var(--qe-t-row); line-height: var(--qe-l-row); font-weight: 600; }
.pb2-unit-meta { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-decode { display: inline-flex; flex-wrap: wrap; gap: var(--qe-s-1); }
.pb2-decode > span { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 var(--qe-s-2); border-radius: var(--qe-r-1); background: var(--qe-tag); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-decode b { color: var(--qe-ink); font-weight: 600; }
.pb2-book { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-1) var(--qe-s-3); margin-top: var(--qe-s-3); padding: 6px 6px 6px var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
.pb2-bookname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pb2-bookname .qe2-icon { color: var(--qe-icon); }
.pb2-bookname b { font-weight: 600; }
.pb2-manual { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; }
.pb2-bookmeta { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-book-actions { display: inline-flex; flex-wrap: wrap; gap: var(--qe-s-1); margin-left: auto; }
.pb2-book-actions .qe2-btn { min-height: 28px; }
.pb2 a.qe2-btn { text-decoration: none; }
.pb2 .qe2-btn.qe2-text { border-color: transparent; background: transparent; color: var(--qe-link); padding: 0 var(--qe-s-2); }
.pb2 .qe2-btn.qe2-text:hover { background: var(--qe-hover); }
.pb2 .qe2-btn.qe2-text .qe2-icon { color: currentColor; }
.pb2-unit-more { display: none !important; }
.pb2-notes-by { display: inline-flex; align-items: center; gap: var(--qe-s-2); }
.pb2-notes-more { min-height: 24px; font-size: var(--qe-t-meta); }
.pb2-quote:not(.pb2-open) { display: none; }
.pb2-saved { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--qe-ok-ink); font-size: var(--qe-t-meta); }
.pb2-saved .qe2-btn.qe2-text { min-height: 24px; font-size: var(--qe-t-meta); }
.pb2-nobook { flex-wrap: nowrap; align-items: flex-start; gap: var(--qe-s-2); padding: var(--qe-s-2) var(--qe-s-3); background: var(--qe-canvas); border-color: transparent; color: var(--qe-ink-2); }
.pb2-nobook .qe2-icon { color: var(--qe-icon); align-self: flex-start; margin-top: 3px; }
.pb2-also { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-1) var(--qe-s-2); margin-top: var(--qe-s-2); }
.pb2-also-label { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); margin-right: var(--qe-s-1); }
.pb2-also .qe2-tag-btn[aria-pressed="true"] .qe2-tag { box-shadow: inset 0 0 0 1px var(--qe-ink-2); background: var(--qe-highlight); }

/* Search and section index: one sticky band. */
.pb2-tools { position: sticky; top: calc(-1 * var(--pb2-top, 16px)); z-index: 4; margin: var(--qe-s-4) calc(-1 * var(--pb2-pad)) 0; padding: var(--qe-s-3) var(--pb2-pad) var(--qe-s-2); background: var(--qe-surface); border-bottom: 1px solid var(--qe-line); }
.pb2-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-1) var(--qe-s-3); margin: -4px 0 var(--qe-s-2) -8px; }
.pb2-crumb { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-crumb b { color: var(--qe-ink); font-weight: 600; }
.pb2-search { position: relative; display: flex; align-items: center; }
.pb2-search > .qe2-icon { position: absolute; left: 12px; color: var(--qe-icon); pointer-events: none; width: 16px; height: 16px; flex-basis: 16px; }
.pb2-search input { flex: 1; min-width: 0; height: var(--qe-h-bar); padding: 0 40px 0 36px; border: 1px solid var(--qe-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font: 400 var(--qe-t-row)/var(--qe-l-row) var(--qe-font); }
.pb2-search input::placeholder { color: var(--qe-ink-3); }
.pb2-search input:focus { outline: 2px solid var(--qe-focus); outline-offset: -1px; }
.pb2-search input::-webkit-search-cancel-button { margin-right: 4px; }
.pb2-search .pb2-kbd { position: absolute; right: 10px; pointer-events: none; }
.pb2-search input:focus ~ .pb2-kbd, .pb2-search input:not(:placeholder-shown) ~ .pb2-kbd { display: none; }
.pb2-index { display: flex; align-items: center; gap: var(--qe-s-1); margin-top: var(--qe-s-2); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 32px; }
.pb2-index::-webkit-scrollbar { display: none; }
.pb2-index-label { flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); margin-right: var(--qe-s-1); }
.pb2-index-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--qe-s-2); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 500; white-space: nowrap; }
.pb2-index-chip:hover { background: var(--qe-hover); color: var(--qe-ink); }
.pb2-index-chip span { color: var(--qe-ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Sections */
.pb2-sec { margin-top: var(--qe-s-5); }
.pb2-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-1) var(--qe-s-3); min-height: 32px; }
.pb2-sec-head h4 { display: inline-flex; align-items: center; gap: var(--qe-s-2); font-size: var(--qe-t-row); line-height: var(--qe-l-row); font-weight: 600; }
.pb2-sec-head h4 .qe2-icon { color: var(--qe-icon); width: 16px; height: 16px; flex-basis: 16px; }
.pb2-sec-sub { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-addall { margin-left: auto; min-height: 28px; }
.pb2-quote { margin: var(--qe-s-1) 0 var(--qe-s-2); padding-left: var(--qe-s-3); border-left: 2px solid var(--qe-line); color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-notes-unit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--qe-s-2); margin: 2px 0 var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-notes-unit .qe2-btn.qe2-text { min-height: 24px; font-size: var(--qe-t-meta); }
.pb2-mentioned { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--qe-s-2); margin-top: var(--qe-s-2); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-mention .qe2-btn.qe2-text { min-height: 24px; font-size: var(--qe-t-meta); padding: 0 4px; }
.pb2-empty { margin: var(--qe-s-2) 0; color: var(--qe-ink-3); font-size: var(--qe-t-body); }
.pb2-link { color: var(--qe-link); text-decoration: none; font-weight: 500; }
.pb2-link:hover { text-decoration: underline; }
.pb2-section-head { display: flex; align-items: baseline; gap: var(--qe-s-2); padding: var(--qe-s-4) 0 4px; border-bottom: 1px solid var(--qe-line); }
.pb2-section-head h5 { font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 600; color: var(--qe-ink); }
.pb2-section-head > span { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2-whole .pb2-colhead + .pb2-section .pb2-section-head { padding-top: var(--qe-s-2); }
.pb2-showmore { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--qe-s-2); margin-left: 36px; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-link); font-size: var(--qe-t-body); font-weight: 500; }
.pb2-showmore:hover { background: var(--qe-hover); }

/* Rows: callout · part · fit · stock · price · qty and add. */
.pb2 { --pb2-cols: minmax(0, 1fr) 108px 76px 96px 172px; }
.pb2-call, .pb2-colhead > span:first-child { display: none; }
.pb2-colhead > span { white-space: nowrap; }
.pb2-colhead, .pb2-row { display: grid; grid-template-columns: var(--pb2-cols); column-gap: var(--qe-s-3); align-items: center; }
.pb2-info { display: contents; }
.pb2-colhead { height: 24px; margin: var(--qe-s-2) 0 -8px; color: var(--qe-ink-3); font-size: var(--qe-t-caps); line-height: var(--qe-l-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pb2-colhead > span:nth-child(4), .pb2-colhead > span:nth-child(5), .pb2-colhead > span:nth-child(6) { text-align: right; }
.pb2-stock { justify-content: flex-end; }
.pb2-row { min-height: 36px; padding: 3px 0; border-bottom: 1px solid var(--qe-hair); }
.pb2-row:hover { background: var(--qe-hover); }
.pb2-row:focus { outline: none; }
.pb2-row:focus-visible, .pb2-row:focus-within:has(:focus-visible) { background: var(--qe-highlight); box-shadow: inset 2px 0 0 var(--qe-focus); }
.pb2-row:focus-visible { outline: none; }
.pb2-call { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 2px; }
.pb2-name { min-width: 0; }
.pb2-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--qe-s-2); min-width: 0; }
.pb2-desc { color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 500; overflow-wrap: anywhere; }
.pb2-pn { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb2-bookqty { color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.pb2-why { color: var(--qe-info-ink); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; }
.pb2-why + .pb2-why::before { content: "· "; color: var(--qe-ink-3); }
.pb2-line1 .qe2-tag { height: 20px; align-self: center; }
.pb2-tag-held { background: transparent; color: var(--qe-ink-3); gap: 4px;border:0;border-radius:0;padding:0 }
.pb2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--qe-s-3); margin-top: 1px; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-from { color: var(--qe-ink-2); }
.pb2-usage { display: inline-flex; align-items: center; gap: 6px; color: var(--qe-ink-2); font-variant-numeric: tabular-nums; }
.pb2-bar { position: relative; width: 44px; height: 4px; border-radius: 2px; background: var(--qe-hair); overflow: hidden; }
.pb2-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--qe-info); border-radius: 2px; }
.pb2-more-books { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 4px; margin: 0 -4px; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2-more-books:hover { background: var(--qe-hover); color: var(--qe-ink-2); }
.pb2-more-books .qe2-chev { width: 10px; height: 10px; flex-basis: 10px; }
.pb2-other-list { color: var(--qe-ink-3); }
.pb2-fit, .pb2-stock { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb2-fit .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.pb2-fits { color: var(--qe-ok-ink); }
.pb2-nofit { color: var(--qe-ink-3); }
.pb2-stock { color: var(--qe-ink-2); font-variant-numeric: tabular-nums; }
.pb2-stock.pb2-dim { color: var(--qe-ink-3); }
.pb2-price { text-align: right; font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb2-noprice { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2-act { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pb2-qty { width: 40px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink); font: 400 var(--qe-t-body)/var(--qe-l-body) var(--qe-font); font-variant-numeric: tabular-nums; text-align: right; }
.pb2-row:hover .pb2-qty, .pb2-qty:hover { border-color: var(--qe-line); background: var(--qe-surface); }
.pb2-qty:focus { outline: 2px solid var(--qe-focus); outline-offset: -1px; background: var(--qe-surface); }
.pb2-qty:disabled { visibility: hidden; }
.pb2-add { min-height: 28px; min-width: 64px; padding: 0 var(--qe-s-3); }
.pb2-is-nofit .pb2-desc { color: var(--qe-ink-2); }

/* Choose one: variants under one name; a gas choice inline. */
.pb2-group-toggle { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; padding: 0; margin: 0 0 0 -16px; border: 0; background: transparent; text-align: left; }
.pb2-group-toggle .qe2-chev { align-self: center; color: var(--qe-icon); }
.pb2-group-toggle:hover .pb2-desc { text-decoration: underline; text-decoration-color: var(--qe-line); text-underline-offset: 3px; }
.pb2-group .pb2-name { padding-left: 16px; }
.pb2-choose { color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-weight: 500; white-space: nowrap; }
.pb2-variant .pb2-name { padding-left: 32px; position: relative; }
.pb2-variant .pb2-name::before { content: ""; position: absolute; left: 14px; top: -6px; bottom: 50%; width: 10px; border-left: 1px solid var(--qe-line); border-bottom: 1px solid var(--qe-line); border-bottom-left-radius: 4px; }
.pb2-variant { background: color-mix(in srgb, var(--qe-canvas) 55%, var(--qe-surface)); }
.pb2-gas { display: inline-flex; padding: 2px; border-radius: var(--qe-r-2); background: var(--qe-canvas); }
.pb2-gas > button { height: 22px; padding: 0 var(--qe-s-2); border: 1px solid transparent; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: 16px; font-weight: 500; }
.pb2-gas > button:hover { color: var(--qe-ink); }
.pb2-gas > button[aria-checked="true"] { background: var(--qe-surface); border-color: var(--qe-line); color: var(--qe-ink); }
.pb2-gas > button[data-remembered]:not([aria-checked="true"]) { border-style: dashed; border-color: var(--qe-line); }
.pb2-needs .pb2-gas { box-shadow: none; }
.pb2-gas-why { color: var(--qe-ink-3); }

/* Check before ordering: a deliberate confirm inside the row, never a browser dialog. */
.pb2-confirm { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2) var(--qe-s-3); margin: 2px 0; padding: 2px 0; border-radius: 0; background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-body);border:0 }
.pb2-confirm > span { flex: 1 1 260px; min-width: 0; }
.pb2-confirm .qe2-btn { min-height: 28px; }
.pb2-confirm-add { border-color: var(--qe-line); color: var(--qe-ink-3); background: var(--qe-surface); font-weight: 600; }

/* Catalogue fallback. */
.pb2-catalogue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2) var(--qe-s-3); margin-top: var(--qe-s-4); padding: var(--qe-s-3) 0; border-top: 1px solid var(--qe-hair); color: var(--qe-ink-2); }
.pb2-catalogue .qe2-btn { min-height: 28px; }
.pb2-other-head { margin-top: var(--qe-s-2); }
.pb2-suggest { display: flex; flex-wrap: wrap; gap: var(--qe-s-2); margin: var(--qe-s-2) 0 0; }
.pb2-suggest-chip { height: 28px; padding: 0 var(--qe-s-3); }
.pb2-suggest-chip[aria-pressed="true"] { background: var(--qe-highlight); border-color: var(--qe-ink-2); }

/* Book finder */
.pb2-back { margin-left: 0; }
.pb2-decoded { margin: var(--qe-s-1) 0 var(--qe-s-3); color: var(--qe-ink-2); font-size: var(--qe-t-body); }
.pb2-brow { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; column-gap: var(--qe-s-4); align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--qe-hair); }
.pb2-brow:hover { background: var(--qe-hover); }
.pb2-brow:focus { outline: none; }
.pb2-brow:focus-visible { background: var(--qe-highlight); box-shadow: inset 2px 0 0 var(--qe-focus); }
.pb2-brow-main { min-width: 0; }
.pb2-brow-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--qe-s-2); }
.pb2-brow-name b { font-weight: 600; }
.pb2-brow-name .qe2-tag { height: 20px; align-self: center; }
.pb2-brow-why { display: flex; flex-wrap: wrap; gap: 2px var(--qe-s-3); margin-top: 2px; color: var(--qe-info-ink); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-brow-n { display: flex; flex-direction: column; color: var(--qe-ink-2); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); font-variant-numeric: tabular-nums; text-align: right; }
.pb2-brow-n small { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2-brow-act { display: flex; align-items: center; gap: var(--qe-s-2); justify-content: flex-end; }
.pb2-brow-act .qe2-btn { min-height: 28px; }
.pb2-nolines { font-size: var(--qe-t-meta); }
.pb2-nolist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qe-s-2) var(--qe-s-3); padding: var(--qe-s-3); border-radius: var(--qe-r-2); background: var(--qe-canvas); color: var(--qe-ink-2); }
.pb2-nolist > span { flex: 1 1 280px; }
.pb2-nolist > .qe2-icon { color: var(--qe-icon); }
.pb2-nolist .qe2-btn { min-height: 28px; }

/* Two products possible: side by side, the estimator picks. */
.pb2-compare { margin: 0 0 var(--qe-s-4); padding: var(--qe-s-3); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
.pb2-cmp-head { display: flex; gap: var(--qe-s-2); color: var(--qe-ink-2); }
.pb2-cmp-head > .qe2-icon { color: var(--qe-ink-3); margin-top: 3px; }
.pb2-cmp-head b { color: var(--qe-ink); }
.pb2-cmp-note { margin: var(--qe-s-2) 0 0 22px; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--qe-s-3); margin-top: var(--qe-s-3); }
.pb2-cmp-card { display: flex; flex-direction: column; gap: var(--qe-s-2); padding: var(--qe-s-3); border-radius: var(--qe-r-2); background: var(--qe-canvas); }
.pb2-cmp-picked { box-shadow: inset 0 0 0 1px var(--qe-ok); background: var(--qe-ok-bg); }
.pb2-cmp-title { display: flex; flex-direction: column; }
.pb2-cmp-title b { font-weight: 600; }
.pb2-cmp-card dl { display: flex; flex-direction: column; gap: 6px; }
.pb2-cmp-card dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--qe-s-2); }
.pb2-cmp-card dt { color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-body); }
.pb2-cmp-card dd { font-size: var(--qe-t-body); line-height: var(--qe-l-body); min-width: 0; }
.pb2-cmp-part { display: block; }
.pb2-cmp-used { color: var(--qe-info-ink); font-size: var(--qe-t-meta); }
.pb2-cmp-lean { font-weight: 600; color: var(--qe-info-ink); }
.pb2-cmp-use { margin-top: auto; align-self: flex-start; }
.pb2-picked .qe2-icon, .pb2-cmp-picked .pb2-cmp-use .qe2-icon { color: var(--qe-ok-ink); }

/* Added to quote tray: the sheet footer. */
.qe2-dialog-footer.pb2-footer { display: block; padding: var(--qe-s-2) var(--qe-s-6); }
.pb2-tray { display: flex; align-items: center; gap: var(--qe-s-3); min-height: 32px; }
.pb2-tray-sum { flex: none; display: flex; flex-direction: column; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink-3); }
.pb2-tray-sum b { color: var(--qe-ink); font-size: var(--qe-t-body); line-height: var(--qe-l-body); font-weight: 600; }
.pb2-tray-sum.pb2-dim { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: center; }
.pb2-tray-sum.pb2-dim .pb2-kbd { margin: 0 1px; }
.pb2-tray-items { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-height: 66px; overflow-y: auto; padding: 2px 0; }
.pb2-tray-item { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 2px 0 var(--qe-s-2); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-tray-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qe-ink); font-weight: 500; }
.pb2-tray-q, .pb2-tray-p { color: var(--qe-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb2-tray-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-icon); }
.pb2-tray-x:hover { background: var(--qe-hover); color: var(--qe-ink); }
.pb2-tray-x .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.pb2-tray .qe2-btn.qe2-text { flex: none; border-color: transparent; background: transparent; color: var(--qe-link); }
.pb2-done { flex: none; margin-left: auto; }
.pb2-tray-more { display: none !important; }

/* Narrow panels (tablet portrait, phone): each row is the part over its facts, the add on the right. */
@container pb2 (max-width: 760px) {
  .pb2-colhead { display: none; }
  .pb2-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name act" "info act"; row-gap: 2px; padding: 6px 0; }
  .pb2-call { display: none; }
  .pb2-name { grid-area: name; }
  .pb2-info { grid-area: info; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--qe-s-3); min-width: 0; }
  .pb2-price { text-align: left; font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); color: var(--qe-ink); font-weight: 500; }
  .pb2-act { grid-area: act; align-self: center; }
  .pb2-info .pb2-noprice { color: var(--qe-ink-3); font-weight: 400; }
  .pb2-confirm { grid-column: 1 / -1;background:transparent;border:0;border-radius:0;color:var(--qe-ink-3);padding:2px 0;margin:2px 0 }
  .pb2-showmore { margin-left: 0; }
  .pb2-group .pb2-name { padding-left: 16px; }
  .pb2-group .pb2-info { padding-left: 16px; }
  .pb2-variant .pb2-info { padding-left: 32px; }
  .pb2-brow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main act" "n act"; row-gap: 2px; }
  .pb2-brow-main { grid-area: main; }
  .pb2-brow-n { grid-area: n; flex-direction: row; gap: var(--qe-s-2); text-align: left; }
  .pb2-brow-act { grid-area: act; }
  .pb2-book-actions { margin-left: -8px; }
}
@container pb2 (max-width: 480px) {
  .pb2-utab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "model" "stat"; padding: 4px var(--qe-s-2); }
  .pb2-utab-model { white-space: normal; }
  .pb2-cmp-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pb2-brow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "n" "act"; }
  .pb2-brow-act { justify-content: flex-start; margin-top: 4px; }
}
/* Phones: full-height sheet, 44px targets, the tray folds to its total. */
@media (max-width: 699px) {
  .qe2-book-sheet .qe2-sheet-body { --pb2-pad: var(--qe-s-4); --pb2-top: var(--qe-s-3); }
  .pb2-units { margin-bottom: var(--qe-s-3); }
  .pb2-utab { min-height: var(--qe-h-touch); }
  .pb2-qty { width: 44px; height: var(--qe-h-touch); border-color: var(--qe-line); background: var(--qe-surface); }
  .pb2-add { min-height: var(--qe-h-touch); min-width: 56px; }
  .pb2-gas > button { height: 36px; min-width: 64px; }
  .pb2-index-chip { height: 32px; }
  .pb2-book-actions .qe2-btn, .pb2-addall, .pb2-catalogue .qe2-btn, .pb2-nolist .qe2-btn, .pb2-confirm .qe2-btn, .pb2-brow-act .qe2-btn, .pb2-cmp-use, .pb2-showmore { min-height: var(--qe-h-touch); }
  .pb2-group-toggle { min-height: 32px; align-items: center; }
  .pb2-more-books { min-height: 32px; }
  .pb2-notes-unit .qe2-btn.qe2-text, .pb2-mention .qe2-btn.qe2-text { min-height: 32px; }
  .pb2-search input { height: var(--qe-h-touch); font-size: 16px; }
  .pb2-search .pb2-kbd { display: none; }
  .qe2-dialog-footer.pb2-footer { padding: var(--qe-s-2) var(--qe-s-4) calc(var(--qe-s-2) + env(safe-area-inset-bottom)); }
  .pb2-tray { flex-wrap: wrap; row-gap: var(--qe-s-2); }
  .pb2-tray-more { display: inline-flex !important; min-height: var(--qe-h-touch); }
  .pb2-tray-items { display: none; order: -1; flex-basis: 100%; flex-direction: column; max-height: 40dvh; overflow-y: auto; }
  .pb2-tray-open .pb2-tray-items { display: flex; }
  .pb2-tray-item { height: var(--qe-h-touch); }
  .pb2-tray-name { flex: 1; max-width: none; }
  .pb2-tray-x { width: var(--qe-h-touch); height: var(--qe-h-touch); }
  .pb2-undo-last { display: none !important; }
  .pb2-tray-sum.pb2-dim { display: none; }
  .pb2-tray .qe2-btn { min-height: var(--qe-h-touch); }
  .pb2-sec { margin-top: var(--qe-s-4); }
  .pb2-suggest-chip { height: var(--qe-h-touch); }
  /* The unit folds to its name and book; Details opens the decode, the actions and the other books. */
  .pb2-unit:not(.pb2-unit-open) .pb2-x { display: none; }
  .pb2-unit-more { display: inline-flex !important; min-height: 32px; font-size: var(--qe-t-meta); }
  .pb2-notes-more { min-height: 32px; }
  .pb2-sec-head .pb2-notes-by { order: 3; flex-basis: 100%; }
  .pb2 .pb2-switch { min-height: 32px; background: transparent; }
  .pb2-unit-head { align-items: center; }
  .pb2-unit-more { margin-left: auto; margin-right: -8px; }
  .pb2-book { margin-top: var(--qe-s-2); padding: 6px var(--qe-s-3); }
  .pb2-unit:not(.pb2-unit-open) .pb2-book { border: 0; padding: 0; margin-top: 0; }
  .pb2-utab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "stat"; padding: 4px var(--qe-s-2); }
  .pb2-utab-model { display: none; }
  .pb2-sec-head h4 { font-size: var(--qe-t-body); }
  .pb2-addall { margin-left: auto; }
}

/* Round 2: warnings that never block. */
.pb2 .pb2-add-warn { border-color: var(--qe-line); background: var(--qe-tag); color: var(--qe-ink-3); }
.pb2 .pb2-add-warn:hover { background: var(--qe-hover); }
.pb2-is-nofit { background: color-mix(in srgb, var(--qe-canvas) 60%, var(--qe-surface)); }
.pb2-is-nofit .pb2-desc { color: var(--qe-ink-3); }
.pb2-ucount { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--qe-action); color: var(--qe-on-action); font-size: 11px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.pb2-why-book, .pb2-rownote { display: inline-flex; align-items: center; gap: 4px; color: var(--qe-ok-ink); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-why-book .qe2-icon, .pb2-rownote .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.pb2-back-orig { min-height: 24px !important; font-size: var(--qe-t-meta); }
.pb2-tag-held { max-width: 100%; white-space: normal; height: auto !important; min-height: 20px;background:transparent;border:0;border-radius:0;color:var(--qe-ink-3);padding:0 }
.pb2-bookgroup { padding-top: var(--qe-s-3); }
.pb2-bookgroup h5 { color: var(--qe-ink-2); }
.pb2-other-toggle { margin: var(--qe-s-2) 0 0; color: var(--qe-ink-2); }
.pb2-mismatch { display: flex; gap: var(--qe-s-2); align-items: flex-start; margin: 2px 0; padding: 2px 0; border-radius: 0; background: transparent; color: var(--qe-ink-3); font-size: var(--qe-t-body);border:0 }
.pb2-mismatch .qe2-icon { margin-top: 3px; }
.pb2-mismatch b { font-weight: 600; }
.pb2-tag-rec { background: var(--qe-ok-bg); color: var(--qe-ok-ink); }
.pb2-rec-badge { display: flex; gap: 6px; align-items: flex-start; color: var(--qe-ok-ink); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2-rec-badge .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; margin-top: 2px; }
.pb2-cmp-rec { box-shadow: inset 0 0 0 1px var(--qe-ok); background: var(--qe-surface); }
.pb2-compare { margin-top: var(--qe-s-4); }
.pb2-tray-unit { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding-left: var(--qe-s-2); font-size: var(--qe-t-meta); color: var(--qe-ink); }
.pb2-tray-unit:first-child { padding-left: 0; }
.pb2-tray-usum { color: var(--qe-ink-3); font-variant-numeric: tabular-nums; }
.pb2-tray-warn { border-color: var(--qe-line); background: transparent; }
.pb2-tray-flag { color: var(--qe-ink-3); font-weight: 500; white-space: nowrap; }
.pb2-tray-need { color: var(--qe-ink-3); font-weight: 500; }
.pb2-tray-empty { display: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2-bookbtn, .pb2-phone-book { display: none !important; }
.pb2-bs-wrap { flex: none; height: 0; }
.pb2-bs-scrim { position: fixed; inset: 0; z-index: 30; background: var(--qe-scrim); }
.pb2-bs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; display: flex; flex-direction: column; gap: var(--qe-s-2); max-height: 80dvh; overflow-y: auto; padding: var(--qe-s-3) var(--qe-s-4) calc(var(--qe-s-4) + env(safe-area-inset-bottom)); border-radius: var(--qe-r-2) var(--qe-r-2) 0 0; background: var(--qe-surface); box-shadow: var(--qe-shadow-sheet); }
.pb2-bs-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--qe-t-row); }
.pb2-bs-head .qe2-btn { width: var(--qe-h-touch); min-height: var(--qe-h-touch); justify-content: center; }
.pb2-bs-name { font-size: var(--qe-t-body); }
.pb2-bs-actions { display: flex; flex-wrap: wrap; gap: var(--qe-s-2); margin-left: -8px; }
.pb2-bs-actions .qe2-btn { min-height: var(--qe-h-touch); }
@media (max-width: 699px) {
  .pb2-x { display: none !important; }
  .pb2-unit-head { flex-wrap: nowrap; gap: var(--qe-s-2); }
  .pb2-unit-head > h3 { display: none; }
  .pb2-phone-book { display: block !important; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--qe-t-meta); color: var(--qe-ink-2); }
  .pb2-bookbtn { display: inline-flex !important; flex: none; min-height: var(--qe-h-touch); }
  .pb2-unit:has(.pb2-nobook) .pb2-unit-head > h3 { display: block; }
  .pb2-units { margin-bottom: var(--qe-s-2); }
  .pb2-tray-empty { display: inline; }
  .pb2-tray-unit { flex-basis: 100%; padding: var(--qe-s-1) 0 0; }
  .pb2-sec { margin-top: var(--qe-s-3); }
  .pb2-sec-head { min-height: 28px; }
  .pb2-mentioned { margin-top: var(--qe-s-1); }
  .pb2-row { padding: 4px 0; }
  .pb2-done { white-space: normal; }
}

/* Round 3 */
.pb2-elsewhere { color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.pb2-sellbox { display: inline-flex; align-items: center; gap: 4px; justify-self: end; color: var(--qe-ink-3); font-size: var(--qe-t-meta); white-space: nowrap; }
.pb2-sellbox input { width: 80px; height: 24px; padding: 0 6px; border: 1px solid var(--qe-ink-3); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font: 400 var(--qe-t-meta)/16px var(--qe-font); text-align: right; font-variant-numeric: tabular-nums;border-color:var(--qe-field) }
.pb2-sellbox input:focus { outline: 2px solid var(--qe-focus); outline-offset: -1px; }
.pb2-price:has(.pb2-sellbox), .pb2-info > .pb2-sellbox { text-align: right; }
.pb2-qty { border-color: var(--qe-line); background: var(--qe-surface); }
.pb2-index { position: relative; }
.pb2-tools:has(.pb2-index) { --pb2-fade: 1; }
.pb2-index-more { display: none; }
.pb2-desc { white-space: normal; }
@media (max-width: 699px) {
  .pb2-sellbox input { height: 36px; width: 72px; font-size: 16px;border-color:var(--qe-field) }
  .pb2-tray-item { height: auto; min-height: var(--qe-h-touch); flex-wrap: wrap; }
}

.pb2-index-wrap { position: relative; }
.pb2-index-cue { display: none; }
@media (min-width: 700px) {
  .pb2-index { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; row-gap: 4px; }
}
@media (max-width: 699px) {
  .pb2-index-cue { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; margin-top: 4px; border-radius: 999px; background: var(--qe-surface); box-shadow: var(--qe-shadow-pop); color: var(--qe-ink-2); pointer-events: none; }
}

.pb2-scope-hint { display: flex; align-items: center; gap: 6px; margin: var(--qe-s-3) 0 0; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2-scope-hint .qe2-icon { width: 12px; height: 12px; flex-basis: 12px; }
.pb2-evidence { grid-column: 1 / -1; display: block; padding-bottom: var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); overflow-wrap: anywhere; }
.pb2-evidence > span { display: block; }
.pb2-suggested { color: var(--qe-ink-2); }
.pb2-suggested input { border-color: var(--qe-field); font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.pb2-is-nofit .pb2-add[aria-label*=", needs a price"] { max-width: calc(var(--qe-s-8) * 4); height: auto; padding-block: var(--qe-s-1); white-space: normal; }
@container pb2 (max-width: 760px) {
  .pb2-row:has(> .pb2-evidence) { grid-template-areas: "name act" "info act" "evidence evidence"; }
  .pb2-evidence { grid-area: evidence; }
}
@media (max-width: 599px) {
  .pb2-suggested input { height: var(--qe-h-control); }
}
.pb2-gaswrap { display: inline-flex; align-items: center; gap: 6px; }
.pb2-group .pb2-line1 { align-items: center; }
.pb2-catgroup { margin-top: var(--qe-s-3); }

/* fix2 · P0: the Raypak book price line says no cost is known yet (a warning, never a block); supplier quotes sit under it
   as a muted hint only. */
.pb2-evidence > .pb2-nocost { display: inline; color: var(--qe-ink-3); font-weight: 500; }
.pb2-evidence > .pb2-hint { display: block; color: var(--qe-ink-3); }

/* fix2 · on a phone or the 600 panel the sell box is a 44px target, wide enough for $1,000+ list prices. */
@media (max-width: 699px) {
  .pb2-sellbox input { height: var(--qe-h-touch); width: 100px;border-color:var(--qe-field) }
}

/* ═══ Clean parts book (owner review 2026-11-02) ════════════════════════════════════════════════════════════════════
   Docked in the summary's column at 1000+ (the editor's lines stay in view), the full-height sheet on a phone. One-line
   header (one control for unit, book and size; the manual PDF), one sections control, rows in one compact grid:
   name over its part number and markers · price · "+". The editor's add bar is the only search. */
.qe2-main.qe2-split-on > .qe2-book-dock { grid-column: 1; grid-row: 1; position: sticky; top: var(--qe-s-2); align-self: start; display: flex; flex-direction: column; max-height: calc(var(--qe2-scroller-height, 100vh) - var(--qe-s-4)); min-width: 0; border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); overflow: hidden; }
.qe2-book-dock > .qe2-book-dock-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.qe2-book-dock .pb2 { padding: 0 0 var(--qe-s-3); }
.pb2c-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: var(--qe-s-1); min-height: 44px; padding: var(--qe-s-1) var(--qe-s-2) var(--qe-s-1) var(--qe-s-3); background: var(--qe-surface); border-bottom: 1px solid var(--qe-hair); }
.pb2c-anchor { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.pb2c-switch { display: inline-flex; align-items: center; gap: var(--qe-s-2); min-width: 0; max-width: 100%; min-height: 32px; padding: 0 var(--qe-s-2); margin-left: calc(-1 * var(--qe-s-2)); border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink); font: inherit; font-size: var(--qe-t-body); font-weight: 600; text-align: left; cursor: pointer; }
.pb2c-switch:hover, .pb2c-switch[aria-expanded="true"] { background: var(--qe-hover); }
.pb2c-switch-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.pb2c-sw-unit, .pb2c-sw-size, .pb2c-sw-sep { flex: none; }
.pb2c-sw-sep { color: var(--qe-ink-3); font-weight: 400; }
.pb2c-sw-book { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pb2c-switch .qe2-icon { flex: none; color: var(--qe-icon); }
.pb2c-pdf, .pb2c-close { flex: none; }
.pb2c-menu { position: absolute; z-index: 6; top: calc(100% + 4px); left: calc(-1 * var(--qe-s-2)); width: min(340px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: var(--qe-s-1); border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); background: var(--qe-surface); box-shadow: var(--qe-shadow-pop); }
.pb2c-menu .qe-menu-label, .pb2c-menu .qe2-menu-label { margin: var(--qe-s-2) var(--qe-s-2) 2px; color: var(--qe-ink-3); font-size: var(--qe-t-caps); line-height: var(--qe-l-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pb2c-why { margin: var(--qe-s-1) var(--qe-s-2) var(--qe-s-1); color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2c-bar { position: sticky; top: 44px; z-index: 2; display: flex; align-items: center; min-height: 40px; padding: 0 var(--qe-s-3); background: var(--qe-surface); border-bottom: 1px solid var(--qe-hair); }
.pb2c-bar .pb2c-anchor { flex: 0 1 auto; }
.pb2c-section { margin-left: calc(-1 * var(--qe-s-2)); font-weight: 500; }
.pb2c-finder { display: flex; align-items: center; gap: var(--qe-s-2); padding: var(--qe-s-2) var(--qe-s-3); border-bottom: 1px solid var(--qe-hair); }
.pb2c-find { flex: 1 1 auto; display: flex; align-items: center; gap: var(--qe-s-2); min-height: 32px; padding: 0 var(--qe-s-2); border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); }
.pb2c-find input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; outline: none; }
.pb2c-main { padding: 0 var(--qe-s-3); }
/* Rows: one compact grid. */
.pb2c-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; column-gap: var(--qe-s-2); min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--qe-hair); outline-offset: -2px; }
.pb2c-row:focus-visible { outline: 2px solid var(--qe-focus); }
.pb2c-row.pb2c-variant { padding-left: var(--qe-s-4); }
.pb2c-row.pb2-is-nofit .pb2c-desc { color: var(--qe-ink-3); }
.pb2c-name { display: flex; flex-direction: column; min-width: 0; }
.pb2c-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--qe-t-body); line-height: var(--qe-l-body); }
.pb2c-meta { display: flex; align-items: center; gap: var(--qe-s-2); min-width: 0; overflow: hidden; white-space: nowrap; color: var(--qe-ink-3); font-size: var(--qe-t-meta); line-height: var(--qe-l-meta); }
.pb2c-meta .pb2-pn { font-family: var(--ds-mono); }
.pb2c-mark { flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2c-mark.pb2c-nofit { color: var(--qe-ink-3); }
.pb2c-mark.pb2c-on { color: var(--qe-link); font-weight: 500; }
.pb2c-stock { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--qe-ink-3); }
.pb2c-stock.pb2c-in { background: var(--qe-ok); }
.pb2c-price { justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--qe-t-body); }
.pb2c-price.pb2c-dim { color: var(--qe-ink-3); font-size: var(--qe-t-meta); }
.pb2c-add { width: 28px; height: 28px; padding: 0; border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font: inherit; font-size: var(--qe-t-sheet); line-height: 1; cursor: pointer; }
.pb2c-add:hover { background: var(--qe-hover); }
.pb2c-group .pb2-group-toggle { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pb2c-group .pb2c-name { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--qe-s-2); }
.pb2c-gas { display: inline-flex; gap: 2px; }
.pb2c-notes { margin: var(--qe-s-2) 0; padding: 0 var(--qe-s-2); border: 1px solid var(--qe-hair); border-radius: var(--qe-r-2); background: var(--qe-canvas); }
.pb2c-notes > header { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); min-height: 36px; color: var(--qe-ink-2); font-size: var(--qe-t-meta); font-weight: 600; }
.pb2c-notes > header > span { display: inline-flex; align-items: center; gap: 6px; }
.pb2c-notes .pb2c-row:last-child { border-bottom: 0; }
.pb2c-main .pb2-sellbox { width: 96px; }
.pb2c-main .qe2-book-kits { padding-top: var(--qe-s-2); }
/* Phone: the same panel in the full-height sheet. */
.qe2-book-sheet .pb2c-head { top: calc(-1 * var(--pb2-top, 0px)); }
@media (max-width: 699px) { .pb2c-row { min-height: 52px; grid-template-columns: minmax(0, 1fr) auto 44px; } .pb2c-add { width: 44px; height: 40px; } .pb2c-head { min-height: 52px; } .pb2c-bar { top: 52px; min-height: 44px; } }
/* In the phone sheet the panel's own one-line header is the sheet's head (its × closes). */
.qe2-layer .qe2-book-sheet:has(.pb2c-head) > .qe2-sheet-header { display: none; }

/* Visual review 2026-11-02: two header layers (unit + the book's full name · manual · ×; sections + filter), rows with a
   compact quantity and a labelled Add, stock and fit in words, On quote as a grey chip, tech-notes as the first group. */
.pb2c-unit-anchor { flex: none; }
.pb2c-book-anchor { flex: 1 1 auto; min-width: 0; }
.pb2c-unit { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 var(--qe-s-2); border: 1px solid var(--qe-line); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink-2); font: inherit; font-size: var(--qe-t-meta); font-weight: 500; white-space: nowrap; cursor: pointer; }
.pb2c-unit-one { cursor: default; }
.pb2c-switch { align-items: flex-start; margin-left: 0; padding: 4px var(--qe-s-2); }
.pb2c-bookname { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-weight: 600; line-height: var(--qe-l-body); }
.pb2c-switch > .qe2-icon { margin-top: 3px; }
.pb2c-head > .pb2c-pdf, .pb2c-head > .pb2c-close { margin-top: -2px; }
.pb2c-bar { gap: var(--qe-s-2); }
.pb2c-filter { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 30px; padding: 0 var(--qe-s-2); border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-icon); }
.pb2c-filter input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--qe-ink); font: inherit; font-size: var(--qe-t-body); outline: none; }
.pb2c-filter:focus-within { outline: 2px solid var(--qe-focus); outline-offset: -1px; }
.pb2c-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.pb2c-desc { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pb2c-act { display: inline-flex; align-items: center; gap: 4px; }
.pb2c-qty { width: 36px; height: 28px; padding: 0 4px; border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font: inherit; font-size: var(--qe-t-body); text-align: right; font-variant-numeric: tabular-nums; }
.pb2c-addbtn { min-width: 52px; height: 28px; padding: 0 var(--qe-s-2); border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink); font: inherit; font-size: var(--qe-t-body); font-weight: 500; white-space: nowrap; cursor: pointer; }
.pb2c-addbtn:hover { background: var(--qe-hover); }
.pb2c-addbtn.pb2c-added { border-color: var(--qe-ok); color: var(--qe-ok-ink); }
.pb2c-chip { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--qe-tag); color: var(--qe-ink-2); font-size: var(--qe-t-meta); }
.pb2c-stock-text { color: var(--qe-ink-3); }
.pb2c-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--qe-s-2); min-height: 32px; margin-top: var(--qe-s-2); border-bottom: 1px solid var(--qe-line); color: var(--qe-ink-3); font-size: var(--qe-t-caps); line-height: var(--qe-l-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pb2c-group-head > .qe2-btn { text-transform: none; letter-spacing: 0; font-size: var(--qe-t-meta); }
@media (max-width: 699px) { .pb2c-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "price act"; row-gap: 4px; padding: 8px 0; } .pb2c-row > .pb2c-name { grid-area: name; } .pb2c-row > .pb2c-price, .pb2c-row > .pb2-sellbox { grid-area: price; justify-self: start; } .pb2c-row > .pb2c-act { grid-area: act; } .pb2c-qty { width: 48px; height: 40px; } .pb2c-addbtn { height: 40px; min-width: 72px; } }
/* Round 3: fixed-width Add so prices and quantities line up; the size under the book's name; Done. */
.pb2c-addbtn { width: 84px; min-width: 84px; }
.pb2c-booktext { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.pb2c-bookname { display: inline; }
.pb2c-bookname > .qe2-icon { display: inline-block; vertical-align: -2px; margin-left: 4px; }
.pb2c-booksub { color: var(--qe-ink-3); font-size: var(--qe-t-meta); font-weight: 400; line-height: var(--qe-l-meta); }
.pb2c-switch > .qe2-icon { display: none; }
.pb2c-close { flex: none; min-height: 28px; }
.pb2c-desc { overflow-wrap: normal; word-break: normal; }
.qe2-clean .qe2-book-dock .pb2c-head { position: sticky; top: 0; }
@media (max-width: 699px) { .pb2c-addbtn { width: 88px; } }
/* Round 4: long part names wrap (no cut); on a phone the sheet's bottom bar has the one Done. */
.pb2c-desc { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; }
@media (max-width: 699px) { .qe2-layer .pb2c-close { display: none; } }
/* Round 5: on a phone the book's name truncates first and its arrow stays on the name line. */
@media (max-width: 699px) {
  .pb2c-bookname { display: flex; align-items: center; min-width: 0; }
  .pb2c-bn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb2c-bookname > .qe2-icon { flex: none; }
}
/* The whole book (owner, 2026-11-03): a section index beside one list of the whole book, grouped under sticky section
   headers. The list scrolls inside the panel, so the findings, the scope and the summary beside it stay put. */
.pb2c-main:has(> .pb2c-whole) { padding: 0; }
.pb2c-whole { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 320px; }
.pb2c-index { display: flex; flex-direction: column; gap: 1px; padding: var(--qe-s-2) 6px var(--qe-s-3); border-right: 1px solid var(--qe-hair); overflow-y: auto; overscroll-behavior: contain; }
.pb2c-ix { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 6px 0 8px; border: 0; border-radius: var(--qe-r-1); background: transparent; color: var(--qe-ink-2); font: inherit; font-size: var(--qe-t-body); text-align: left; cursor: pointer; }
.pb2c-ix:hover { background: var(--qe-hover, var(--qe-hair)); color: var(--qe-ink); }
.pb2c-ix:focus-visible { outline: 2px solid var(--qe-focus); outline-offset: -2px; }
.pb2c-ix[aria-current="true"] { background: var(--qe-selected, var(--qe-hair)); color: var(--qe-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--qe-accent, var(--qe-focus)); }
.pb2c-ix-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2c-ix-n { flex: none; color: var(--qe-ink-3); font-size: var(--qe-t-meta); font-weight: 400; font-variant-numeric: tabular-nums; }
.pb2c-whole > .pb2c-list { min-width: 0; padding: 0 var(--qe-s-3) var(--qe-s-3); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.pb2c-sec-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--qe-s-2); min-height: 34px; margin: 0 calc(-1 * var(--qe-s-3)); padding: var(--qe-s-1, 4px) var(--qe-s-3) 0; border-bottom: 1px solid var(--qe-line); background: var(--qe-surface); background-clip: padding-box; color: var(--qe-ink-2); font-size: var(--qe-t-meta); font-weight: 600; }
.pb2c-sec-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2c-sec-n { color: var(--qe-ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.pb2c-sec-head > .pb2c-addall { margin-left: auto; font-weight: 500; }
.pb2c-sec + .pb2c-sec { margin-top: var(--qe-s-2); }
.pb2c-sec:last-child { padding-bottom: var(--qe-s-3); min-height: var(--pb2-tail, 0px); }
.pb2c-sec-kits .qe2-book-kits { padding-top: 0; }
@media (max-width: 699px) {
  .pb2c-whole { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pb2c-index { flex-direction: row; gap: 6px; padding: var(--qe-s-2) var(--qe-s-3); border-right: 0; border-bottom: 1px solid var(--qe-hair); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .pb2c-index::-webkit-scrollbar { display: none; }
  .pb2c-ix { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--qe-line); border-radius: var(--qe-r-2); }
  .pb2c-ix[aria-current="true"] { box-shadow: none; border-color: var(--qe-ink-2); }
  .pb2c-ix-name { overflow: visible; }
}
/* One line per row (owner rule) beside the index: a name too long for the line ends in an ellipsis; the row's tooltip has
   it whole. The part code is the second line. */
.pb2c-whole .pb2c-row > .pb2c-name { min-width: 0; }
.pb2c-whole .pb2c-desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2c-whole .pb2c-group .pb2-group-toggle { min-width: 0; max-width: 100%; }
.pb2c-whole .pb2c-group .pb2c-name { display: flex; align-items: center; gap: var(--qe-s-2); }
.pb2c-whole .pb2c-group .pb2c-name > .pb2c-mark { flex: none; }
@media (max-width: 699px) { .pb2c-whole .pb2c-desc { white-space: normal; } }
/* Visual review r7: a variant group in the parts' columns: name where names start, the range in the price column, one
   "N options" button (Add's width) in the qty and Add slot. Children show what differs, indented under the name. */
.pb2c-whole .pb2c-row { position: relative; z-index: 0; }
.pb2c-qty-gap { display: inline-block; width: var(--pb2c-qty-w, 36px); flex: none; }
.pb2c-optbtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: var(--pb2c-add-w, 84px); min-height: 28px; padding: 0 6px; border: 1px solid var(--ds-field); border-radius: var(--qe-r-1); background: var(--qe-surface); color: var(--qe-ink-2); font: inherit; font-size: var(--qe-t-meta); white-space: nowrap; cursor: pointer; }
.pb2c-optbtn:hover { color: var(--qe-ink); border-color: var(--qe-ink-3); }
.pb2c-optbtn:focus-visible { outline: 2px solid var(--qe-focus); outline-offset: 1px; }
.pb2c-optbtn .qe2-chev { width: 12px; height: 12px; transition: transform .12s; }
.pb2c-optbtn[aria-expanded="true"] .qe2-chev { transform: rotate(180deg); }
.pb2c-variants { margin-left: var(--qe-s-3); border-left: 2px solid var(--qe-hair); padding-left: var(--qe-s-2); }
.pb2c-variants > .pb2c-row.pb2c-variant { padding-left: 0; }
.pb2c-group2 .pb2c-meta { display: flex; align-items: center; gap: var(--qe-s-2); }
@media (max-width: 699px) { .pb2c-qty-gap { width: var(--pb2c-qty-w-phone, 44px); } .pb2c-optbtn { min-height: 40px; width: 88px; } }
/* Visual review r8: below 1440 a variant group's name may take two lines. */
@media (max-width: 1439px) { .pb2c-whole .pb2c-group2 .pb2c-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
/* Owner 2026-11-04: no yellow or green tints in the book; "Added ×N" is navy, "Needs price" grey. */
.qe2-root.qe2-clean .pb2c-addbtn.pb2c-added, .qe2-layer[data-clean] .pb2c-addbtn.pb2c-added { border-color: var(--qe-action); color: var(--qe-action); }
.qe2-root.qe2-clean .pb2c-price.pb2c-dim, .qe2-layer[data-clean] .pb2c-price.pb2c-dim { color: var(--qe-ink-3); }