/* Extracted verbatim from templates/onboarding.html (Foundation Stage 3B-1, 2026-09-08).
   Contiguous slice, cascade-preserved. Do not reorder relative to the other onboarding/styles/*.css files. */
/* ── Title row ── */
.build-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: clamp(20px,3vh,32px); flex-wrap: wrap; }
.build-headline { font-family: var(--biz-serif); font-weight: 440; letter-spacing: -.02em; font-size: clamp(28px,2.6vw,38px); line-height: 1.1; color: var(--biz-ivory); }
.build-headline .biz-accent { color: var(--ready-orchid-hi); }
.build-subtext { font-size: 13.5px; line-height: 1.5; color: var(--biz-ivory-70); margin-top: 8px; max-width: 520px; }
.build-merchant-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--biz-ivory-50); }
.build-merchant-line svg { width: 14px; height: 14px; color: var(--biz-ivory-50); }
.build-merchant-line b { color: var(--biz-ivory-70); font-weight: 600; }
.build-title-actions { display: flex; gap: 10px; flex: none; }
.build-title-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }

/* Flow-consolidation round (2026-08-20), §5 — real review_summary counts,
   prominent near the header (never hidden until Review).
   Post-Parse Clarity Pass (2026-08-21+), §2 — increased size/weight for
   real prominence ("not tiny secondary counters"), and Needs Attention
   now uses the SEPARATE red-orange --biz-danger semantic instead of
   amber (amber stays reserved for selection/active-nav — §12). */
.build-summary-strip { display: flex; gap: clamp(18px,2.2vw,28px); }
.build-summary-stat { text-align: center; min-width: 64px; }
.build-summary-num { font-family: var(--biz-serif); font-size: clamp(26px,2.6vw,34px); font-weight: 560; line-height: 1.05; color: var(--biz-ivory); }
.build-summary-stat.is-attn .build-summary-num { color: var(--biz-danger-hi); }
.build-summary-stat.is-ready .build-summary-num { color: var(--biz-green); }
.build-summary-stat.is-decisions .build-summary-num { color: var(--ready-orchid-hi); }
.build-summary-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--biz-ivory-50); margin-top: 4px; }
.build-summary-stat.is-attn .build-summary-lbl { color: var(--biz-danger-hi); opacity: .85; }
.build-summary-stat.is-ready .build-summary-lbl { color: var(--biz-green); opacity: .85; }

/* §9 — review-focus banner, shown only when real unresolved work exists.
   Post-Parse Clarity Pass (2026-08-21+), §7 — a genuine warning surface
   (dark red-tinted background, red-orange left accent + icon), not a
   neutral/amber panel indistinguishable from ordinary content. */
.build-review-banner {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: clamp(14px,1.8vh,18px) clamp(16px,1.8vw,22px);
  background: linear-gradient(180deg, rgba(48,16,10,.55), rgba(20,8,6,.6)), linear-gradient(180deg, rgba(18,17,15,.97), rgba(10,10,9,.98));
  border-color: var(--biz-danger-40);
  border-left: 3px solid var(--biz-danger);
  box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 26px -8px var(--biz-danger-16);
}
.build-review-banner > svg { flex: none; width: 22px; height: 22px; color: var(--biz-danger-hi); }
.build-review-banner-text { flex: 1; min-width: 0; }
.build-review-banner-title { font-size: 15px; font-weight: 700; color: var(--biz-ivory); }
.build-review-banner-sub { font-size: 12.5px; color: var(--biz-ivory-70); margin-top: 2px; }
.build-review-banner .disc-btn { flex: none; }
.build-review-banner .disc-btn-primary { background: linear-gradient(180deg, var(--biz-danger-hi), var(--biz-danger)); color: #1a0a05; border-color: transparent; }

/* §3 — visible status filter tabs (never hidden inside a dropdown-only
   control). Color-coded to match the same summary/pill/row semantics:
   neutral ivory (All items), red-orange (Needs attention), green (Ready). */
.build-status-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px,2.8vh,28px); }
.build-status-tab {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--biz-sans); font-size: 13px; font-weight: 700;
  color: var(--biz-ivory-70); background: rgba(255,255,255,.025); border: 1px solid rgba(247,242,234,.10);
  border-radius: 10px; padding: 9px 16px; cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.build-status-tab:hover { border-color: rgba(247,242,234,.22); color: var(--biz-ivory); }
.build-status-tab .cnt { font-weight: 700; }
.build-status-tab.is-active { color: var(--biz-ivory); background: rgba(247,242,234,.08); border-color: rgba(247,242,234,.28); }
.build-status-tab[data-status="attention"] .cnt { color: var(--biz-danger-hi); }
.build-status-tab[data-status="attention"].is-active {
  color: var(--biz-danger-hi); background: var(--biz-danger-08); border-color: var(--biz-danger);
  box-shadow: 0 0 0 1px var(--biz-danger-16), 0 0 18px -6px var(--biz-danger-40);
}
.build-status-tab[data-status="ready"] .cnt { color: var(--biz-green); }
.build-status-tab[data-status="ready"].is-active {
  color: var(--biz-green); background: rgba(62,207,106,.08); border-color: rgba(62,207,106,.45);
  box-shadow: 0 0 0 1px rgba(62,207,106,.16), 0 0 18px -6px rgba(62,207,106,.35);
}

/* XKROX R4.4 (2026-09-10) §16/§18 — the old persistent "Bulk actions:
   [Approve all ready items] [Ask XkroX to clean up]" bar and the giant
   horizontal row of category pills (.build-cat-tabs/.build-cat-tab) are
   both retired here — see catalog.js's renderBuildBulkSelectionBar()/
   renderBuildToolbar() for what replaced them (a selection-scoped bulk
   bar, and a single compact category <select>, §18's own explicit
   preference over "15+ huge pills"). */

/* ── Selection-scoped bulk bar (§24/§25) — only rendered once at least
   one row is checked; a plain text-link toolbar, never a dense second
   row competing with the status tabs above it. ── */
.build-bulk-select-bar {
  margin-top: 10px; padding: 10px 14px; border-radius: 10px;
  background: rgba(139,115,214,.06); border: 1px solid rgba(139,115,214,.22);
}
.build-bulk-select-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.build-bulk-select-count { font-size: 12.5px; font-weight: 700; color: var(--biz-ivory); }
.build-bulk-select-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.build-bulk-select-actions button {
  border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ready-orchid-hi); padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.build-bulk-select-actions button:hover:not(:disabled) { color: var(--ready-orchid); }
.build-bulk-select-actions button:disabled { opacity: .5; cursor: default; text-decoration: none; }
.build-bulk-select-clear { color: var(--biz-ivory-50) !important; text-decoration: none !important; }
.build-bulk-select-clear:hover { color: var(--biz-ivory) !important; }
.build-bulk-cat-picker { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.build-bulk-cat-picker input {
  flex: 1; min-width: 0; background: rgba(255,255,255,.025); border: 1px solid rgba(247,242,234,.14);
  border-radius: 8px; padding: 8px 11px; color: var(--biz-ivory); font: inherit; font-size: 13px;
}
.build-bulk-cat-picker button {
  flex: none; border: 1px solid var(--ready-orchid-40); background: rgba(139,115,214,.12); color: var(--ready-orchid-hi);
  border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* ── §31 — review-complete state, replaces the table entirely. ── */
.build-review-complete { text-align: center; padding: 60px 20px 50px; }
.build-review-complete-icon {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; background: rgba(62,207,106,.14);
  color: var(--biz-green); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.build-review-complete-title { font-family: var(--biz-serif); font-size: 19px; font-weight: 500; color: var(--biz-ivory); }
.build-review-complete-sub { font-size: 13px; color: var(--biz-ivory-50); margin-top: 6px; }

/* ── Search / filter row — XKROX REVIEW/COVER FIX (2026-09-10) §1/§2:
   padding tightened (11px -> 8px vertical) so both controls land inside
   the round's own 36-42px compact-control height target (measured
   45.6px before this change), matching .build-status-tab/.build-action-btn,
   which already did. ── */
.build-toolbar { display: flex; gap: 10px; margin-top: 14px; }
.build-search-box {
  flex: 1; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.025);
  border: 1px solid rgba(247,242,234,.10); border-radius: 10px; padding: 8px 14px;
  transition: border-color .15s ease;
}
.build-search-box:focus-within { border-color: rgba(139,115,214,.4); }
.build-search-box svg { flex: none; width: 16px; height: 16px; color: var(--biz-ivory-50); }
.build-search-box input { flex: 1; background: none; border: none; outline: none; color: var(--biz-ivory); font: inherit; font-size: 13.5px; }
.build-search-box input::placeholder { color: var(--biz-ivory-30); }
.build-cat-select {
  flex: none; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.025);
  border: 1px solid rgba(247,242,234,.10); border-radius: 10px; padding: 8px 30px 8px 14px; color: var(--biz-ivory-70);
  font-family: var(--biz-sans); font-size: 13px; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3a854' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px; }
.build-cat-select option { background: #14100a; }
/* XKROX Business-Page Rebuild round — the Menu tab's own "+ Add item"
   (mockup §8), added to the existing toolbar rather than a second,
   competing add-item control. Solid-fill, same visual weight as the
   canvas-level primary actions (.bs-action-primary in canvas.css) so the
   ONE clear next step in this toolbar reads as the primary control. */
.build-toolbar-add-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px; border-radius: 10px;
  padding: 8px 16px; font-family: var(--biz-sans); font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--biz-ivory); background: var(--biz-ivory); color: var(--card-bg);
}
.build-toolbar-add-btn svg { width: 15px; height: 15px; flex: none; }
.build-toolbar-add-btn:hover { opacity: .85; }

/* ── Panel material (§13 — the ONE reusable Discover/Build panel system) ── */
.build-panel {
  background: linear-gradient(180deg, rgba(18,17,15,.97), rgba(10,10,9,.98));
  border: 1px solid rgba(196,126,38,.20); border-radius: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 24px rgba(211,132,30,.025);
}

/* ── Main workspace — XKROX R4.4 (2026-09-10) §20/§21: single column,
   full width. The old permanent 73/27 split with a sticky side Preview
   panel is retired; a clicked row expands inline instead (below). ── */
.build-main { margin-top: 18px; }
.build-table-panel { min-width: 0; overflow: hidden; }
.build-table-head {
  display: grid; grid-template-columns: 26px minmax(0,2.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) 40px;
  gap: 12px; padding: 13px clamp(14px,1.6vw,20px); border-bottom: 1px solid rgba(247,242,234,.07);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--biz-ivory-50);
}
.build-row {
  /* Storefront S1.1 §9 — more breathing room, less "dense spreadsheet
     row": +4px vertical padding, larger thumbnail/name (below). */
  display: grid; grid-template-columns: 26px minmax(0,2.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) 40px;
  gap: 12px; align-items: center; padding: 16px clamp(14px,1.6vw,20px); border-bottom: 1px solid rgba(247,242,234,.045);
  cursor: pointer; transition: background .15s ease; position: relative;
}
.build-row:last-child { border-bottom: none; }
.build-row:hover { background: rgba(255,255,255,.02); }
/* §24 — multi-select checkbox; independent of the row's own click-to-
   expand toggle (stopPropagation on the wrapping label handles that). */
.build-row-check { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.build-row-check input { width: 15px; height: 15px; accent-color: var(--ready-orchid); cursor: pointer; }
.build-table-head > div:first-child { display: flex; align-items: center; }
/* Post-Parse Clarity Pass (2026-08-21+), §4/§5/§6 — status (red-orange
   left accent + restrained row tint for Needs Attention; plain dark row
   for Ready) and selection (amber inset ring) are two INDEPENDENT visual
   channels now, composed via box-shadow so both can be visible at once
   without fighting over the same left-bar. Selection no longer implies
   or overrides status color, and vice versa. */
.build-row.is-selected { box-shadow: inset 0 0 0 1.5px var(--ready-orchid-40); background: rgba(139,115,214,.045); }
.build-row.row-attn { background: var(--biz-danger-08); box-shadow: inset 3px 0 0 0 var(--biz-danger); }
.build-row.row-attn:hover { background: rgba(232,97,63,.13); }
.build-row.row-attn.is-selected { background: rgba(232,97,63,.11); box-shadow: inset 3px 0 0 0 var(--biz-danger), inset 0 0 0 1.5px var(--ready-orchid-40); }
.build-row-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.build-row-thumb { flex: none; width: 50px; height: 50px; border-radius: 10px; background: linear-gradient(155deg,#1c150c,#0c0904); display: flex; align-items: center; justify-content: center; color: rgba(139,115,214,.55); position: relative; }
.build-row-thumb svg { width: 20px; height: 20px; }
/* §5 — subtle green dot on Ready rows' thumbnail; text-based "Ready" pill
   still carries the real semantic (§13), this is a restrained bonus cue. */
.build-row-thumb.is-ready-dot::after {
  content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--biz-green); border: 2px solid var(--biz-ink);
}
.build-row-text { min-width: 0; }
.build-row-name { font-size: 15px; font-weight: 600; color: var(--biz-ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-row-sub { font-size: 11.5px; color: var(--biz-ivory-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* §10 — the concrete issue reason (e.g. "No price found"), visible
   directly in the row so the merchant never has to open every preview
   just to discover why an item is flagged. Real data only
   (friendlyIssueText(), the same function the preview panel uses). */
.build-row-issue { font-size: 12.5px; color: var(--biz-danger-hi); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.build-row-cat, .build-row-price { font-size: 12.5px; color: var(--biz-ivory-70); }
.build-status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.build-status-pill.is-ready { color: var(--biz-green); background: rgba(62,207,106,.12); border: 1px solid rgba(62,207,106,.32); }
.build-status-pill.is-attn { color: var(--biz-danger-hi); background: var(--biz-danger-16); border: 1px solid var(--biz-danger-40); }
.build-row-more { flex: none; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--biz-ivory-50); background: none; border: none; cursor: pointer; }
.build-row-more:hover { background: rgba(255,255,255,.06); color: var(--biz-ivory); }

.build-count-row { display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(14px,1.6vw,20px); font-size: 12px; color: var(--biz-ivory-50); }
/* UX Consolidation round (2026-08-20) — the one real forward action
   ("Continue to review", real destination: goStep(2), unmodified) and
   the one real skip action ("Set up menu later", real destination:
   skipMenuForNow(), unmodified) — both subtle text links, never
   competing with the header's own Upload/Add buttons. */
.build-later-link {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer;
  font-family: var(--biz-sans); font-size: 12.5px; font-weight: 600; color: var(--ready-orchid-hi);
  padding: 4px 0; text-decoration: underline; text-underline-offset: 2px;
}
.build-later-link svg { width: 12px; height: 12px; }
.build-later-link:hover { color: var(--ready-orchid); }
.build-empty .build-later-link { margin-top: 16px; text-decoration: none; color: var(--biz-ivory-50); }
.build-empty .build-later-link:hover { color: var(--biz-ivory-70); }
/* Flow-consolidation round (2026-08-20), §19 — real pagination, replacing
   the old unbounded "Show N more" (which could grow into one giant page
   for a real large menu). */
.build-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 20px 18px; flex-wrap: wrap; }
.build-page-btn {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.03); border: 1px solid rgba(247,242,234,.12); border-radius: 8px;
  color: var(--biz-ivory-70); font-family: var(--biz-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.build-page-btn svg { width: 13px; height: 13px; }
.build-page-btn:hover:not(:disabled) { border-color: rgba(139,115,214,.3); color: var(--ready-orchid-hi); }
.build-page-btn:disabled { opacity: .35; cursor: default; }
.build-page-btn.is-active { background: rgba(139,115,214,.12); border-color: var(--ready-orchid); color: var(--ready-orchid-hi); }
.build-page-ellipsis { color: var(--biz-ivory-30); font-size: 12.5px; padding: 0 2px; }

/* ── Empty state ── */
.build-empty { text-align: center; padding: clamp(48px,7vh,72px) 20px; }
.build-empty-icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg,#1c150c,#0c0904); color: rgba(139,115,214,.5);
}
.build-empty-icon svg { width: 28px; height: 28px; }
.build-empty h3 { font-family: var(--biz-serif); font-size: 20px; font-weight: 500; color: var(--biz-ivory); margin-bottom: 6px; }
.build-empty p { font-size: 13.5px; color: var(--biz-ivory-50); margin-bottom: 20px; }
.build-empty-actions { display: flex; gap: 10px; justify-content: center; }

/* ── Item preview (right column) ── */
.build-preview { position: sticky; top: 20px; min-width: 0; display: flex; flex-direction: column; }
.build-preview-empty { padding: 40px 20px; text-align: center; color: var(--biz-ivory-30); font-size: 13px; }
.build-preview-media { position: relative; height: 180px; margin: 0 clamp(14px,1.6vw,20px) 16px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(139,115,214,.12), transparent 70%), linear-gradient(155deg,#181209,#0a0704);
  display: flex; align-items: center; justify-content: center; }
.build-preview-media svg { width: 38px; height: 38px; color: rgba(139,115,214,.32); }
.build-preview-body { padding: 0 clamp(14px,1.6vw,20px); }
.build-preview-name { font-family: var(--biz-serif); font-size: 19px; font-weight: 500; color: var(--biz-ivory); line-height: 1.2; }
.build-preview-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.build-preview-cat { font-size: 12.5px; color: var(--biz-ivory-50); }
.build-preview-price { font-size: 12.5px; font-weight: 600; color: var(--biz-ivory); }
.build-preview-desc { font-size: 12.5px; color: var(--biz-ivory-70); line-height: 1.55; margin-top: 12px; }
.build-preview-facts { margin: 16px clamp(14px,1.6vw,20px) 4px; border-top: 1px solid rgba(247,242,234,.07); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
/* Final Menu Flow Consolidation round (2026-08-21+), §3/§24 — issue
   context inside the Menu preview panel, reusing .attn-issue-line/
   .attn-evidence (the existing quarantined-Review-page styling) as-is.
   Post-Parse Clarity Pass (2026-08-21+), §11/§12 — recolored from the old
   amber tokens to the dedicated --biz-danger-* red-orange semantic, so the
   preview panel's warning box matches the row/pill/banner treatment
   elsewhere on the page instead of reading as just another amber surface. */
.build-preview-issue { margin: 12px clamp(14px,1.6vw,20px) 0; padding: 12px 14px; border-radius: 10px; background: var(--biz-danger-08); border: 1px solid var(--biz-danger-40); }
.menu-processing-panel { padding: 60px 30px; text-align: center; }
.wi-progress-panel .processing-msg { transition: opacity .25s ease; }
.wi-counters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin: 18px auto 0; max-width: 480px;
}
.wi-counter { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.wi-counter-n { font-size: 18px; font-weight: 600; color: var(--biz-ivory-90, #f4ead2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.wi-counter-k { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--biz-ivory-40, #a89a78); margin-top: 3px; }
@media (max-width: 520px) { .wi-counters { gap: 8px 14px; } .wi-counter { min-width: 54px; } .wi-counter-n { font-size: 16px; } }
/* Website Catalog Import (2026-08-30) — source chip + empty-state note */
.wc-source-chip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--biz-sans); font-size: 12px; color: var(--biz-ivory-70);
  background: rgba(139,115,214,.08); border: 1px solid rgba(139,115,214,.22);
  border-radius: 10px; padding: 9px 14px; margin: 4px 0 16px;
}
.wc-source-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ready-orchid); flex: none; }
.wc-source-chip-sep { color: var(--biz-ivory-30); }
.wc-source-chip-note { color: var(--biz-ivory-50); }
.wc-source-chip-link {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font: inherit; color: var(--ready-orchid-hi); text-decoration: underline; padding: 0;
}
.wc-empty-note {
  text-align: center; font-family: var(--biz-sans); font-size: 13px;
  color: var(--biz-ivory-50); margin-top: 24px;
}
/* Unified "Add your menu" source chooser (2026-08-31); tile-grid
   redesign, Colour/Menu-panel correction round (2026-09-05) — compact
   icon+title+sub tiles in a responsive 2-column grid (1 column once the
   panel itself is too narrow for two comfortable tiles — see the
   container query fallback media rule below), never six large stacked
   marketing cards. */
.build-add-menu { padding: clamp(20px,3vh,32px) clamp(16px,2vw,28px); }
.add-menu-heading {
  font-family: var(--biz-serif, var(--biz-sans)); font-size: clamp(17px,2.4vw,20px);
  color: var(--biz-ivory, #efe9df); margin: 0 0 4px; text-align: center; font-weight: 600;
}
.add-menu-subtext {
  font-family: var(--biz-sans); font-size: 12.5px; color: var(--biz-ivory-50);
  margin: 0 0 18px; text-align: center; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.add-menu-opts {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
  max-width: 480px; margin: 0 auto;
}
.add-menu-opt {
  display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; text-align: left;
  background: rgba(255,255,255,.02); border: 1px solid rgba(21,21,21,.14);
  border-radius: 12px; padding: 13px 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  font-family: var(--biz-sans); color: var(--biz-ivory, #efe9df);
}
.add-menu-opt:hover { border-color: var(--ready-orchid); background: var(--ready-orchid-16); }
.add-menu-opt-icon {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,21,21,.05); color: var(--biz-ivory);
}
.add-menu-opt-icon svg { width: 15px; height: 15px; }
.add-menu-opt-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.add-menu-opt-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-menu-opt-sub { font-size: 11px; color: var(--biz-ivory-50); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The 5th tile (Add manually) is alone on its own row at 2 columns —
   centre it and cap its width so it doesn't stretch edge to edge. */
.add-menu-opt:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 5px); justify-self: center; }
.wc-modal-err {
  font-family: var(--biz-sans); font-size: 12.5px; color: #e5837a;
  margin-top: 8px;
}
@media (max-width: 480px) {
  .add-menu-opts { grid-template-columns: 1fr; max-width: 340px; }
  .add-menu-opt:last-child:nth-child(odd) { grid-column: auto; max-width: none; justify-self: stretch; }
  .add-menu-opt { padding: 12px 13px; gap: 11px; }
}
/* Colour/Menu-panel correction round (2026-09-05) — the one compact
   "Add / Manage" dropdown that replaces the two permanent top pills once
   real menu items exist. Small floating panel, not a full modal. */
.build-add-menu-dd { position: relative; flex: none; }
.build-add-menu-dd-caret { display: inline-block; font-size: 10px; margin-left: 2px; }
.build-add-menu-dd-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 220px; max-width: min(280px, calc(100vw - 24px));
  background: var(--onboarding-surface, #fff); border: 1px solid rgba(21,21,21,.14);
  border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.28);
  padding: 6px; flex-direction: column; gap: 1px;
}
.build-add-menu-dd-panel.is-open { display: flex; }
.build-add-menu-dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 9px; padding: 9px 10px; cursor: pointer;
  font-family: var(--biz-sans); font-size: 13px; font-weight: 500; color: var(--biz-ivory);
}
.build-add-menu-dd-item:hover { background: rgba(21,21,21,.05); }
.build-add-menu-dd-item-icon { flex: none; width: 16px; height: 16px; display: flex; color: var(--biz-ivory-70); }
.build-add-menu-dd-item-icon svg { width: 15px; height: 15px; }
.build-add-menu-dd-divider { height: 1px; background: rgba(21,21,21,.1); margin: 5px 4px; }
.build-fact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.build-fact-label { display: flex; align-items: center; gap: 8px; color: var(--biz-ivory-50); }
.build-fact-label svg { width: 13px; height: 13px; color: var(--ready-orchid); }
.build-fact-value { color: var(--biz-ivory-70); text-align: right; }
/* XKROX REVIEW/COVER FIX (2026-09-10) §5 — row-flex, content-width
   buttons (was flex-direction:column, which stretched each button to
   100% width — a real, correct choice back when this rendered inside a
   narrow ~27% sidebar column, but that side panel is gone since XKROX
   R4.4; inside the now full-width accordion, full-width stacked buttons
   read as oversized "dashboard" blocks instead of compact actions). */
.build-preview-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 9px; padding: 16px clamp(14px,1.6vw,20px) clamp(16px,1.8vh,20px); margin-top: auto; }
.build-preview-actions .build-action-btn { flex: none; }
.build-action-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--biz-sans); font-size: 13px; font-weight: 600;
  padding: 11px 16px; border-radius: 10px; cursor: pointer; transition: all .15s ease; border: 1px solid rgba(139,115,214,.28);
  background: none; color: var(--ready-orchid-hi);
}
/* Real root cause found this round (not the R4.4 text/label pass, which
   never actually fixed this): DISC_ICON.edit/.trash render as bare
   <svg class="disc-icon" viewBox="..."> with no width/height of their
   own — the only rule that ever sized them, `#discoverScreen .disc-icon,
   #buildScreen .disc-icon` (components.css), is scoped to the LEGACY
   screen containers, which are never the ancestor once these buttons
   render inside the adaptive canvas (#obCanvas). With no matching rule,
   the browser falls back to the raw intrinsic SVG default (300x150px) —
   the actual "huge illustration-style icon" defect, not a metaphor.
   Every other DISC_ICON use in this file already has its own explicit
   `<context> svg { width; height; }` rule (search box, row thumbnail,
   chevron, fact row, preview media) — this is the one that was missing. */
.build-action-btn svg { width: 15px; height: 15px; flex: none; }
.build-action-btn:hover { background: rgba(139,115,214,.1); }
.build-action-btn.is-danger { color: #ff9b8a; border-color: rgba(255,90,70,.32); }
.build-action-btn.is-danger:hover { background: rgba(255,90,70,.08); }

/* ── Modals (Upload menu file / Add item) — reused for both, generic,
   not scoped to #buildScreen so they still work if opened while #app's
   old chrome is briefly visible during a transition. ── */
.build-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 200; background: rgba(3,2,1,.72);
  backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 24px;
}
.build-modal-backdrop.open { display: flex; }
.build-modal { width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.build-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(247,242,234,.07); flex: none; }
.build-modal-title { font-family: var(--biz-serif); font-size: 18px; font-weight: 500; color: var(--biz-ivory); }
.build-modal-close { background: none; border: none; color: var(--biz-ivory-50); cursor: pointer; padding: 4px; display: flex; }
.build-modal-close svg { width: 18px; height: 18px; }
.build-modal-close:hover { color: var(--biz-ivory); }
.build-modal-body { padding: 20px 22px 22px; overflow-y: auto; }
.build-modal-body .upload-zone { margin: 0; }
/* Strict Correction round (2026-08-21+), §7 — a small, contained
   red-orange caution accent (never a whole-red modal panel/border). */
.cwc-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cwc-warn-icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--biz-danger-16); border: 1px solid var(--biz-danger-40); color: var(--biz-danger-hi);
}
.cwc-warn-icon svg { width: 15px; height: 15px; }
.cwc-num-warn { color: var(--biz-danger-hi); font-weight: 700; }
.cwc-num-ready { color: var(--biz-green); font-weight: 700; }
/* State/Persistence/Navigation Integrity round (2026-08-21) — one shared
   Cancel/primary action row, reused by Upload and the Start-over confirm
   (Add/Edit's own footer predates this and keeps its own inline flex —
   not worth touching for a purely cosmetic identical outcome). */
.build-modal-actions { display: flex; gap: 10px; }
.build-modal-actions .btn { flex: 1; width: auto; }

/* ── §13/§14 ONE shared overlay/modal token system (State/Persistence/
   Navigation Integrity round, 2026-08-21, extending the flow-
   consolidation round's original #editModal-only fix) ──
   #editModal (Add/Edit item) still used the OLD generic .modal-backdrop/
   .modal-box/.field-group/.btn-primary classes (flat #111 background,
   plain --border/--text-primary tokens) — visually close but not the
   same near-black gradient/warm-bronze-border/amber-focus/amber-CTA
   system Build/Review use. #uploadModal/#startOverModal's OWN inner
   controls (.btn-primary/.btn-secondary, .upload-zone, .file-pill) had
   the identical gap — same old token set, just not yet caught. Every
   rule below is now ONE shared declaration across all three modal ids
   (never three separately-tuned color sets) — scoped by id rather than
   renaming the base classes globally, so Account/Building/Ready (which
   also use .btn-primary/.btn-secondary/.upload-zone on the untouched
   legacy shell) are structurally unaffected. */
#editModal.modal-backdrop { background: rgba(3,2,1,.72); backdrop-filter: blur(3px); }
#editModal .modal-box {
  background: linear-gradient(180deg, rgba(18,17,15,.97), rgba(10,10,9,.98));
  border: 1px solid rgba(196,126,38,.20);
  box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 24px rgba(211,132,30,.025);
}
/* §10 — left-nav tabbed layout (Basic/Variants/Add-ons/Dietary), matching
   the approved reference. .im-modal-box widens the shared .modal-box and
   converts it to header/body/footer flex rows (the body's own two
   columns scroll independently instead of the whole box scrolling as one
   unit) — scoped to #editModal only, .modal-box has no other call site. */
.im-modal-box { max-width: 640px; display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: 82vh; }
.im-modal-box .modal-header { padding: 20px 22px; margin: 0; border-bottom: 1px solid rgba(247,242,234,.07); }
.im-body { display: flex; min-height: 0; flex: 1; }
.im-nav {
  flex: 0 0 148px; display: flex; flex-direction: column; gap: 2px; padding: 16px 10px;
  border-right: 1px solid rgba(247,242,234,.07); background: rgba(0,0,0,.15);
}
.im-nav-tab {
  text-align: left; background: none; border: none; border-radius: 8px; padding: 10px 12px;
  font-family: var(--biz-sans); font-size: 13.5px; font-weight: 600; color: var(--biz-ivory-50);
  cursor: pointer; transition: background .15s, color .15s;
}
.im-nav-tab:hover { color: var(--biz-ivory); background: rgba(247,242,234,.04); }
.im-nav-tab.is-active { color: var(--biz-ink); background: var(--biz-ivory); }
.im-content { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 22px; }
.im-footer { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid rgba(247,242,234,.07); flex: none; }
#editModal .modal-header h2 { font-family: var(--biz-serif); font-weight: 500; color: var(--biz-ivory); }
#editModal .modal-close { color: var(--biz-ivory-50); }
#editModal .modal-close:hover { color: var(--biz-ivory); }
#editModal .modal-section-title { color: var(--biz-ivory-50); border-top-color: rgba(247,242,234,.08); }
#editModal .field-group label { color: var(--biz-ivory-70); }
#editModal .field-group input, #editModal .field-group select, #editModal .field-group textarea {
  background: rgba(5,4,3,.55); border: 1px solid rgba(247,242,234,.14); color: var(--biz-ivory);
}
#editModal .field-group input:focus, #editModal .field-group select:focus, #editModal .field-group textarea:focus {
  border-color: var(--ready-orchid); box-shadow: 0 0 0 3px var(--ready-orchid-40); outline: none;
}
#editModal .field-group select option { background: #14110c; color: var(--biz-ivory); }
#editModal .btn-primary, #uploadModal .btn-primary, #startOverModal .btn-primary, #smartPasteModal .btn-primary {
  background: var(--biz-ivory); color: var(--biz-ink); border: none;
}
#editModal .btn-secondary, #uploadModal .btn-secondary, #startOverModal .btn-secondary, #smartPasteModal .btn-secondary {
  background: rgba(247,242,234,.04); border: 1px solid rgba(247,242,234,.14); color: var(--biz-ivory);
}
#editModal .btn-secondary:hover:not(:disabled), #uploadModal .btn-secondary:hover:not(:disabled), #startOverModal .btn-secondary:hover:not(:disabled), #smartPasteModal .btn-secondary:hover:not(:disabled) {
  border-color: var(--ready-orchid-40); background: rgba(139,115,214,.06);
}
/* Final Onboarding Simplification Pass (2026-09-20), Part 5 — joins the
   same #smartPasteModal .btn-primary rule above for the disabled state
   (Preview/Apply must read as visibly disabled — never ambiguous — until
   there's real text/a real selection to act on). */
#smartPasteModal .btn-primary:disabled { opacity: .4; cursor: not-allowed; }
/* Upload dropzone/file-pill — same ivory/amber system as every field
   above, replacing the old --border/--accent/--text-primary tokens. */
#uploadModal .subtitle, #smartPasteModal .subtitle { color: var(--biz-ivory-70); }
/* Final Onboarding Simplification Pass (2026-09-20), Part 5 — the actual,
   isolated root cause of the reported "black textarea, invisible text"
   bug: the OLD paste/bulk-price modals' own inline `<textarea>` style
   referenced `background: var(--input-bg, #1a1a17)` (`--input-bg` is not
   defined ANYWHERE in this codebase — always fell back to near-black)
   next to `color: var(--biz-ivory, #efe9df)` (`--biz-ivory` IS defined,
   but its real, current value is #151515 — dark TEXT, not the light
   fallback that inline style assumed; components.css's own comment
   documents this token family being deliberately flipped in an earlier
   round when the whole onboarding theme went from dark to light) — dark
   text silently landed on a dark background inside an otherwise-already-
   correctly-light `.build-panel` (the surrounding title/subtitle/buttons
   were never actually broken, which is why only the textarea itself was
   reported). Fixed with an explicit, self-contained light surface plus a
   real, visible focus state (amber, matching this theme's own existing
   focus-ring color) that the old inline style never had at all. */
#smartPasteModal textarea {
  width: 100%; background: #fff; border: 1px solid var(--border, #e6dfce);
  color: var(--biz-ivory); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Final Compact Premium Onboarding round (2026-09-20), Part 11 — was
     min-height:160px/max-height:320px ("unnecessarily tall" per the
     round's own words); tightened to the round's explicit 140-180px
     target. */
  resize: vertical; min-height: 140px; max-height: 180px; overflow-y: auto;
}
#smartPasteModal textarea::placeholder { color: var(--biz-ivory-30); }
#smartPasteModal textarea:focus {
  outline: none; border-color: var(--biz-amber); box-shadow: 0 0 0 3px var(--biz-amber-16);
}
#smartPasteModal select {
  background: #fff; border: 1px solid var(--border, #e6dfce); color: var(--biz-ivory);
  border-radius: 8px; padding: 6px 8px; font-size: 12.5px;
}
#smartPasteModal select:focus { outline: none; border-color: var(--biz-amber); }
/* Final Compact Premium Onboarding round (2026-09-20), Part 11/12 — the
   preview's per-row cards (replacing the old "2 rows found · 1 update ·
   1 added" abstract summary line) — a compact list, not a mostly-empty
   modal. One badge (UPDATE/NEW/CONFIRM/INVALID) + name + price per row. */
#smartPasteModal .sp-summary { font-size: 12.5px; color: var(--biz-ivory-70); margin-bottom: 10px; }
#smartPasteModal .sp-rows { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#smartPasteModal .sp-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border, #e6dfce); border-radius: 8px; background: #fff; font-size: 13px;
}
#smartPasteModal .sp-row-badge {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
}
#smartPasteModal .sp-row-badge.is-update { background: rgba(15,122,79,.12); color: #0f7a4f; }
#smartPasteModal .sp-row-badge.is-new { background: rgba(43,108,176,.12); color: #2b6cb0; }
#smartPasteModal .sp-row-badge.is-confirm { background: rgba(183,121,31,.14); color: #a86d16; }
#smartPasteModal .sp-row-badge.is-invalid { background: rgba(196,60,42,.12); color: #b23c1f; }
#smartPasteModal .sp-row-name { flex: 1 1 auto; min-width: 0; color: var(--biz-ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#smartPasteModal .sp-row-price { flex: none; color: var(--biz-ivory-70); font-variant-numeric: tabular-nums; }
#smartPasteModal .sp-row-reason { flex: none; font-size: 11.5px; color: var(--biz-ivory-30); }
#smartPasteModal .sp-row select { flex: none; max-width: 170px; }
/* Final Onboarding Simplification Pass (2026-09-20) — the identical
   dark-on-dark bug (same undefined `--input-bg` + same pre-flip
   `--biz-ivory` assumption) was also found, while fixing the reported
   paste/bulk modal, in the separate "Paste a link" modal's own URL
   `<input>` — same root cause, same fix, generalized rather than left
   broken just because it wasn't the literal instance reported. */
#pasteLinkModal input {
  width: 100%; background: #fff; border: 1px solid var(--border, #e6dfce);
  color: var(--biz-ivory); border-radius: 10px; padding: 12px 14px; font-size: 14px;
}
#pasteLinkModal input::placeholder { color: var(--biz-ivory-30); }
#pasteLinkModal input:focus {
  outline: none; border-color: var(--biz-amber); box-shadow: 0 0 0 3px var(--biz-amber-16);
}
#uploadModal .upload-zone { border-color: rgba(247,242,234,.18); background: rgba(5,4,3,.45); }
#uploadModal .upload-zone:hover, #uploadModal .upload-zone.dragover { border-color: var(--ready-orchid); background: rgba(139,115,214,.06); }
#uploadModal .upload-zone-text { color: var(--biz-ivory); }
#uploadModal .upload-zone-sub { color: var(--biz-ivory-50); }
#uploadModal .file-pill { background: rgba(139,115,214,.08); border-color: var(--ready-orchid-40); color: var(--ready-orchid-hi); }
#startOverModal .error-banner { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: #f87171; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; }
#startOverModal .btn-danger-confirm { background: #ef4444; color: #fff; border: none; }
#startOverModal .btn-danger-confirm:hover:not(:disabled) { background: #dc2626; }
#startOverModal .btn-danger-confirm:disabled { opacity: .6; cursor: default; }

/* Menu Live Summary Synchronization + Item Image Upload round
   (2026-08-22+), §11/§17 — item-photo control inside the shared Add/Edit
   item overlay's Basic tab. Compact (a small thumbnail row, not a full
   hero), same field-group rhythm as every other field in this modal —
   no visual redesign of the editor itself. */
.im-photo-row { display: flex; align-items: center; gap: 14px; }
.im-photo-thumb {
  flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; position: relative;
  background: rgba(5,4,3,.55); border: 1px solid rgba(247,242,234,.14);
  display: flex; align-items: center; justify-content: center;
}
.im-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-photo-fallback { color: var(--biz-ivory-30); display: flex; align-items: center; justify-content: center; }
.im-photo-fallback svg { width: 24px; height: 24px; }
.im-photo-controls { flex: 1; min-width: 0; }
.im-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.im-photo-status { font-size: 11.5px; margin-top: 6px; min-height: 14px; }
.im-photo-status.is-error { color: var(--biz-danger-hi); }
.im-photo-status.is-ok { color: var(--biz-green); }
.im-photo-helper { font-size: 11px; color: var(--biz-ivory-30); margin-top: 6px; line-height: 1.5; }
#editModal .im-photo-btns .btn-ghost { background: rgba(247,242,234,.04); border: 1px solid rgba(247,242,234,.14); color: var(--biz-ivory); }
#editModal .im-photo-btns .btn-ghost:hover:not(:disabled) { border-color: var(--ready-orchid-40); background: rgba(139,115,214,.06); }

/* XKROX R4.4 (2026-09-10) §20/§21 — the desktop side Preview panel
   (.build-preview) no longer renders at all (catalog.js), so the old
   1080px collapse-to-one-column override is dead along with it. The
   inline row accordion (.build-row-inline-preview) is now used at EVERY
   width, not just mobile — the desktop-only "keep using the side panel"
   override that used to hide it above 640px is removed below. */
.build-row-chevron {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  color: var(--biz-ivory-50); transition: transform .2s ease, color .2s ease;
}
.build-row-chevron svg { width: 14px; height: 14px; }
.build-row.is-selected .build-row-chevron { transform: rotate(180deg); color: var(--biz-ivory); }
.build-row-inline-preview {
  margin: 0 0 2px; padding: 4px 0 16px;
  border-bottom: 1px solid rgba(247,242,234,.045);
  background: rgba(139,115,214,.03);
  animation: buildInlinePreviewOpen .18s ease;
}
@keyframes buildInlinePreviewOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .build-table-head { display: none; }
  .build-row { grid-template-columns: 1fr; row-gap: 6px; position: relative; padding-left: 34px; padding-right: 40px; }
  .build-row-check { position: absolute; top: 16px; left: 12px; }
  .build-row-cat::before { content: 'Category: '; color: var(--biz-ivory-50); }
  .build-row-price::before { content: 'Price: '; color: var(--biz-ivory-50); }

  /* Mobile Responsiveness Pass (2026-09-04), item 2A/2B — the merchant
     name/location line stays first and full-width and readable; the
     primary CTA, the count summary, and Add/Manage each get their own
     full-width row underneath in that order (Back -> heading+merchant ->
     CTA -> counts -> Add/Manage -> ... -> list), matching the requested
     mobile hierarchy instead of a cramped right-aligned column. */
  .build-title-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .build-title-right { width: 100%; align-items: stretch; gap: 10px; }
  /* .disc-btn-primary here carries its own inline align-self:flex-end
     (set for the desktop right-aligned column) — only !important can
     beat an inline style from a stylesheet rule. */
  .build-title-right > .disc-btn-primary { width: 100% !important; align-self: stretch !important; justify-content: center; }
  .build-title-actions { width: 100%; }
  .build-title-actions .disc-btn { flex: 1; }
  .build-add-menu-dd { width: 100%; }
  .build-add-menu-dd > .disc-btn { width: 100%; justify-content: center; }
  .build-add-menu-dd-panel { left: 0; right: 0; max-width: none; }

  /* item 2B — the 3-4 stat counts as one compact grid instead of a
     cramped/overflowing flex row, so they read as a clean summary block
     rather than crowding whatever sits next to them. */
  .build-summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 8px;
    width: 100%; padding: 10px 6px; background: rgba(247,242,234,.03); border: 1px solid rgba(247,242,234,.08); border-radius: 12px; }
  .build-summary-stat { min-width: 0; }

  /* Real horizontal-overflow fix found during this round's own required
     mobile QA: the fixed-min-content status <select> plus the flexible
     search box no longer both fit in one row under ~480px. */
  .build-toolbar { flex-wrap: wrap; }
  .build-search-box { flex: 1 1 100%; }
  .build-cat-select { flex: 1 1 auto; min-width: 0; }

  /* item 2C — mobile item preview: the inline accordion (base rule
     above, used at every width since XKROX R4.4) gets mobile-specific
     absolute chevron positioning, matching the row's own mobile layout. */
  .build-row-more { display: none; }
  .build-row-chevron {
    position: absolute; top: 14px; right: 14px; width: 20px; height: 20px;
    transform: rotate(90deg);   /* points down: "tap to expand" */
  }
  .build-row-chevron svg { width: 15px; height: 15px; }
  .build-row.is-selected .build-row-chevron { transform: rotate(-90deg); color: var(--biz-ivory); }  /* points up: "tap to collapse" */
  .build-row-inline-preview .build-preview-media { margin: 12px 14px 14px; }
  .build-row-inline-preview .build-preview-body,
  .build-row-inline-preview .build-preview-issue,
  .build-row-inline-preview .build-preview-facts,
  .build-row-inline-preview .build-preview-actions { padding-left: 14px; padding-right: 14px; margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .build-row-inline-preview { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT-THEME OVERRIDES (2026) — off-white /onboarding.
   The three :root token families near the top of this <style> were
   inverted in place (near-black surfaces → warm off-white; light "ivory"
   text → dark ink; amber/gold kept but darkened for contrast on a light
   ground). This block cleans up what tokens can't reach: hardcoded
   near-black hex/rgba literals, the `filter: brightness()` dimming on
   .biz-card, the dark radial page vignettes, and the white-on-black
   "glass" fills. Every selector below mirrors an original exactly, so
   equal specificity + later source order wins — no !important.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Brand mark: KROX wordmark → logo image ── */
.biz-logo {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; text-shadow: none;
  padding-left: 0; letter-spacing: normal; display: inline-flex; align-items: center;
}
.biz-logo-img { height: clamp(34px, 4.6vh, 48px); width: auto; display: block; }
.ob-logo { color: var(--text-secondary); }
.ob-logo-img { height: 40px; width: auto; display: block; }

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb { background: var(--border-hover); }

/* ── Page / screen grounds & vignettes ── */
#bizTypeScreen, #discoverScreen { background: var(--bg); color: var(--text-primary); }
/* Cinematic entry rebuild round — specificity (1,1,0), needed to reliably
   beat the shared (1,0,0) rule above regardless of source order. Scoped
   to .ob-cinematic-mode specifically (NOT bare #bizTypeScreen). Dark
   ground + light default text for the cinematic hero (its own elements
   set explicit colors regardless, but this keeps any incidental
   inherited text, e.g. the error banner, from defaulting to
   dark-on-dark). renderConsumerOnboardingScreen() (/onboarding/you, same
   container id) now adds this same class (Onboarding Background Cleanup
   round, 2026-09-04) so it shares this exact dark ground too, instead of
   the old separate light --bg/--text-primary pair. */
#bizTypeScreen.ob-cinematic-mode { background: #0b0a09; color: #fdfcfa; }
/* Light XkroX onboarding theme — Menu, Workspace, and Ready all share this
   exact same warm-ivory gradient family (only Ready's is a hair lighter/
   warmer, matching its slightly more celebratory tone) — ONE coherent
   light design system across every remaining business-onboarding screen,
   not three independently-tuned backgrounds. */
#buildScreen, #reviewScreen { background: linear-gradient(180deg,#F9F6F1 0%,#F5F1E9 55%,#F2EDE3 100%); color: var(--text-primary); }
#app.ws-glow { background: linear-gradient(180deg,#F9F6F1 0%,#F5F1E9 55%,#F2EDE3 100%); }
#app.ready-glow { background: linear-gradient(180deg,#F9F7F2 0%,#F6F3ED 55%,#F3F0E8 100%); }
#bizTypeScreen::before, #discoverScreen::before {
  background: radial-gradient(ellipse 130% 110% at 50% 45%, transparent 62%, rgba(120,86,30,.05) 100%);
}
#buildScreen::before, #reviewScreen::before {
  background:
    radial-gradient(ellipse at 22% 92%, rgba(139,115,214,.10) 0%, rgba(139,115,214,.04) 28%, transparent 58%),
    radial-gradient(ellipse at 78% 88%, rgba(139,115,214,.06) 0%, transparent 52%);
}
#buildScreen::after, #reviewScreen::after {
  background:
    radial-gradient(ellipse at 25% 100%, rgba(139,115,214,.10), rgba(139,115,214,.03) 35%, transparent 63%),
    radial-gradient(ellipse at 75% 100%, rgba(139,115,214,.06), transparent 58%),
    linear-gradient(to bottom, transparent 0%, rgba(120,86,30,.03) 25%, rgba(120,86,30,.06) 100%);
}
#app.ready-glow::before {
  background:
    radial-gradient(ellipse 32% 26% at 50% 6%, rgba(139,115,214,.08) 0%, transparent 68%),
    radial-gradient(ellipse 24% 20% at 84% 4%, rgba(139,115,214,.05) 0%, transparent 65%);
}
#app.ready-glow::after {
  background:
    radial-gradient(ellipse at 10% 100%, rgba(209,71,127,.06), transparent 58%),
    radial-gradient(ellipse at 90% 100%, rgba(139,115,214,.05), transparent 55%),
    linear-gradient(to bottom, transparent 0%, rgba(120,86,30,.03) 40%, rgba(120,86,30,.06) 100%);
}

/* ── Legacy shell components ── */
.field-group input, .field-group select, .field-group textarea,
.browse-toolbar input[type=search], .browse-toolbar select,
.cb-label, .item-card, .upload-zone, .finish-later-panel,
.browse-item-row { background: var(--card-bg); }
.field-group select option { background: var(--card-bg); color: var(--text-primary); }
.btn-secondary { background: #efe9db; }
.btn-secondary:hover:not(:disabled) { background: #e7e0cf; }
.stat-chip, .item-edit-btn, .review-category-count { background: #efe9db; }
.ob-step-item.completed:not(:last-child)::after { background: var(--border-hover); }
.ob-step-item.completed .ob-step-dot { border-color: var(--border-hover); background: #eee6d5; }
.ob-step-item.completed .ob-step-label { color: #8c8474; }
.item-card.review-flag, .attn-card { background: #fbf4e6; }
.chip-vibe { background: #efe9db; color: #6f6656; border-color: #ddd4be; }
.chip-tag  { background: #f1ece0; color: #7d7566; border-color: var(--border); }
.fragments-panel-header { background: #f1ece0; }
.fragments-panel-header:hover { background: #e9e2d1; }
.fragment-row { border-bottom-color: var(--border); }
.fragment-reason { color: #7d7566; background: #efe9db; }
.attn-evidence-text { background: #faf6ec; }
.modal-box { background: var(--card-bg); }
.modal-close { background: #efe9db; }
.modal-backdrop { background: rgba(40,32,18,.42); }
.toggle-slider { background: #d8cfba; }
.toggle-slider::before { background: #fffdf8; }
.autocomplete-dropdown { background: var(--card-bg); box-shadow: 0 8px 24px rgba(60,45,20,.18); }
.autocomplete-item { border-bottom-color: var(--border); }
.autocomplete-item:hover { background: #f1ece0; color: var(--text-primary); }
#startOverModal .error-banner { color: #b23c1f; }
.biz-proceed-error { color: #b23c1f; }

/* ── #bizTypeScreen cards (neutralise the brightness/saturate dimming) ── */
.biz-card {
  background: linear-gradient(180deg,#fffdf8,#f7f1e5);
  border-color: rgba(139,115,214,.20); filter: none;
  box-shadow: 0 10px 26px -14px rgba(60,45,20,.18), 0 0 0 1px rgba(139,115,214,.05) inset;
}
.biz-card[data-state="unselected"] {
  filter: none; border-color: rgba(139,115,214,.26);
  box-shadow: 0 12px 30px -16px rgba(60,45,20,.20), 0 0 0 1px rgba(139,115,214,.06) inset;
}
.biz-card[data-state="unselected"]:hover { filter: none; border-color: rgba(139,115,214,.44); }
.biz-card[data-state="selected"] {
  filter: none; background: linear-gradient(180deg,#fffaf0,#fdf3e0); border-color: var(--ready-orchid);
  box-shadow:
    0 0 0 1px rgba(139,115,214,.6),
    0 0 14px 1px rgba(139,115,214,.18),
    0 18px 40px -20px rgba(60,45,20,.28),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.biz-card[data-state="selected"]::before { opacity: .4; }
.biz-card[data-state="selected"]::after { opacity: .5; }
.biz-card-media { background: #efe7d6; }
.biz-card-media::after {
  background:
    radial-gradient(ellipse 112% 86% at 50% 39%, transparent 55%, rgba(60,45,20,.10) 100%),
    linear-gradient(to bottom, transparent 55%, rgba(255,253,248,.35) 80%, rgba(255,253,248,.96) 100%);
}
.biz-card[data-state="selected"] .biz-card-media::after {
  background:
    radial-gradient(ellipse 112% 86% at 50% 39%, transparent 55%, rgba(60,45,20,.08) 100%),
    linear-gradient(to bottom, transparent 52%, rgba(255,250,240,.4) 78%, rgba(255,250,240,.97) 100%);
}
.biz-badge { background: rgba(30,24,14,.60); color: rgba(255,253,248,.82); }
.biz-badge.is-live { color: #fffdf8; }

/* ── Discover / Workspace / Build shared "glass" surfaces ── */
.disc-panel, .build-panel {
  background: linear-gradient(165deg, rgba(255,253,248,.92), rgba(250,244,232,.86));
  border-color: rgba(139,115,214,.22);
  box-shadow: 0 24px 60px -34px rgba(60,45,20,.22), 0 0 0 1px rgba(139,115,214,.04) inset;
}
.disc-panel { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.build-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
.disc-search-box { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); border-color: rgba(139,115,214,.30); }
.disc-result-item { background: linear-gradient(165deg, rgba(0,0,0,.022), rgba(0,0,0,.01)); border-color: rgba(30,30,30,.10); }
.disc-result-item:hover { background: rgba(139,115,214,.06); border-color: rgba(139,115,214,.36); }
.disc-result-item.is-selected { background: rgba(139,115,214,.10); border-color: var(--ready-orchid); box-shadow: 0 0 0 1px rgba(139,115,214,.4), 0 0 18px -10px rgba(139,115,214,.5); }
.disc-result-thumb { background: radial-gradient(ellipse 70% 70% at 30% 20%, rgba(139,115,214,.18), transparent 70%), linear-gradient(155deg,#f0e6d2,#e6d9bd); }
.disc-selected-summary-row { background: rgba(139,115,214,.08); }
.disc-trust { background: rgba(0,0,0,.025); border-color: rgba(30,30,30,.10); }
.disc-details { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.08); }
.disc-form-card { background: rgba(0,0,0,.02); border-color: rgba(139,115,214,.18); }
.disc-form-row { border-bottom-color: rgba(30,30,30,.08); }
.disc-form-field select option { background: var(--card-bg); color: var(--text-primary); }
.disc-form-err, .disc-form-field.has-error input, .ws-field-err, .build-action-btn.is-danger { color: #b23c1f; }
.disc-panel-actions { border-top-color: rgba(30,30,30,.1); }
.disc-hero-media { background: linear-gradient(155deg,#efe4d0,#e4d7bb); }
.disc-hero-fallback {
  background:
    radial-gradient(ellipse 16% 24% at 22% 30%, rgba(139,115,214,.20), transparent 70%),
    radial-gradient(ellipse 12% 18% at 68% 22%, rgba(139,115,214,.16), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(139,115,214,.12), transparent 68%),
    linear-gradient(155deg,#efe4d0,#e4d7bb 60%);
}
.disc-hero-scrim { background: linear-gradient(180deg, transparent 40%, rgba(255,253,248,.86) 100%); }
.disc-hero-upload { background: rgba(255,253,248,.7); border-color: rgba(139,115,214,.35); }
.disc-hero-upload:hover { background: rgba(139,115,214,.12); }
.disc-photo-err { background: rgba(255,253,248,.94); }
.disc-badge { background: linear-gradient(155deg,#f2e7d1,#e7d9bc); }
.disc-biz-name { text-shadow: none; }
.disc-toprail-num { border-color: rgba(30,30,30,.20); background: rgba(0,0,0,.02); }
.disc-toprail-connector { background: rgba(30,30,30,.14); }
.disc-btn-secondary { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.16); }
.disc-btn-secondary:hover { background: rgba(0,0,0,.05); border-color: rgba(30,30,30,.3); }
.ob-back-link { background: rgba(0,0,0,.02); border-color: rgba(30,30,30,.16); }
.ob-back-link:hover { background: rgba(0,0,0,.05); border-color: rgba(30,30,30,.32); }
.disc-panel.is-preview, .build-panel.is-preview { border-color: rgba(139,115,214,.28); }
.preview-note { background: rgba(139,115,214,.07); border-color: rgba(139,115,214,.22); }

/* ── Workspace fields / toggles ── */
.ws-field input { background: rgba(0,0,0,.025); border-color: rgba(30,30,30,.14); }
.ws-detail-rows { background: rgba(0,0,0,.02); border-color: rgba(139,115,214,.16); }
.ws-detail-row { border-bottom-color: rgba(30,30,30,.08); }
.ws-detail-row input, .ws-detail-row select { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.16); }
.ws-toggle-row, .ws-mode-chip { background: rgba(0,0,0,.02); }
.ws-toggle-row { border-color: rgba(139,115,214,.16); }
.ws-mode-chip { border-color: rgba(30,30,30,.16); }
.ws-field-divider, .ws-or-divider::before, .ws-or-divider::after { background: rgba(30,30,30,.12); }
.ws-switch-track { background: rgba(30,30,30,.16); border-color: rgba(30,30,30,.20); }
.ws-switch-track::before { background: #fffdf8; }
.ws-preview-badge { background: linear-gradient(155deg,#f2e7d1,#e7d9bc); }
.ws-panel-icon { background: rgba(139,115,214,.10); border-color: rgba(139,115,214,.28); }
.ws-detail-rows, .ws-preview-modes-row { }

/* ── Ready page ── */
.ready-main-card { background: linear-gradient(165deg, rgba(255,253,248,.97), rgba(250,244,233,.99)); border-color: rgba(139,115,214,.22); box-shadow: 0 24px 60px -34px rgba(60,45,20,.2), 0 0 0 1px rgba(139,115,214,.03) inset; }
.ready-summary-card { background: linear-gradient(165deg, rgba(255,253,248,.95), rgba(249,243,232,.97)); border-color: rgba(139,115,214,.16); }
.ready-checklist, .ready-summary-row, .ready-summary-note { border-color: rgba(30,30,30,.08); }
.ready-check-dot { background: rgba(139,115,214,.08); border-color: rgba(139,115,214,.24); }
.ready-cta-secondary { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.14); }
.ready-badge-check { background: rgba(209,71,127,.07); border-color: rgba(209,71,127,.3); box-shadow: 0 0 0 5px rgba(139,115,214,.05); }

/* ── Build / Menu screen ── */
.build-status-tab, .build-cat-tab, .build-search-box, .build-cat-select, .build-page-btn, .build-bulk-cat-picker input { background: rgba(0,0,0,.025); border-color: rgba(30,30,30,.12); }
.build-status-tab:hover, .build-cat-tab:hover { border-color: rgba(30,30,30,.24); }
.build-status-tab.is-active { background: rgba(30,30,30,.06); border-color: rgba(30,30,30,.3); }
.build-cat-tab.is-active { background: rgba(139,115,214,.10); border-color: var(--ready-orchid); }
.build-cat-select option { background: var(--card-bg); }
.build-table-head, .build-count-row, .build-modal-head { border-bottom-color: rgba(30,30,30,.08); }
.build-row { border-bottom-color: rgba(30,30,30,.06); }
.build-row:hover { background: rgba(0,0,0,.02); }
.build-row.is-selected { background: rgba(139,115,214,.05); }
.build-row-thumb, .build-empty-icon { background: linear-gradient(155deg,#efe4d0,#e5d8bc); }
.build-row-more:hover { background: rgba(0,0,0,.05); }
.build-review-banner {
  background: linear-gradient(180deg, rgba(207,74,40,.08), rgba(207,74,40,.05)), linear-gradient(180deg, rgba(255,253,248,.98), rgba(250,244,233,.98));
}
.build-preview-media { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(139,115,214,.12), transparent 70%), linear-gradient(155deg,#f0e6d2,#e5d8bc); }
.build-preview-facts { border-top-color: rgba(30,30,30,.08); }

/* ── Modals (Upload / Start over / Continue / Edit item) ── */
.build-modal-backdrop, #editModal.modal-backdrop { background: rgba(40,32,18,.42); }
#editModal .modal-box { background: linear-gradient(180deg, rgba(255,253,248,.99), rgba(250,244,233,.99)); border-color: rgba(139,115,214,.2); box-shadow: 0 18px 55px rgba(60,45,20,.22); }
#editModal .modal-section-title { border-top-color: rgba(30,30,30,.1); }
#editModal .field-group input, #editModal .field-group select, #editModal .field-group textarea { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.16); }
#editModal .field-group select option { background: var(--card-bg); }
.im-modal-box .modal-header, .im-nav, .im-footer { border-color: rgba(30,30,30,.1); }
.im-nav { background: rgba(0,0,0,.03); }
/* XKROX REVIEW CATALOG ITEM UX PATCH (2026-09-11) — root cause of the
   unreadable dark-on-dark active tab: this selector's only declaration
   in the ORIGINAL (pre-light-theme) rule above (line ~472) is
   `background: var(--biz-ivory)`. --biz-ivory now resolves to a
   near-black charcoal (#151515) — the "ivory"/"ink" token NAMES were
   kept from when this was a dark theme, but their VALUES were flipped
   when the whole onboarding SPA was retuned to a light aesthetic (see
   the :root comment in components.css). This light-theme retune line
   used to correct only `color` here, leaving that now-dark inherited
   `background` in place — dark-brown text on a near-black background.
   Restated explicitly below (never left to inherit), matching the exact
   same accent language every other "active/selected" element in this
   theme already uses (.build-cat-tab.is-active, .build-row.is-selected,
   .disc-result-item.is-selected all pair a light lavender wash with a
   var(--ready-orchid) accent). */
.im-nav-tab.is-active {
  color: #241206;
  background: rgba(139,115,214,.12);
  box-shadow: inset 0 0 0 1px var(--ready-orchid-40);
}
/* A slightly more visible hover wash than the original near-invisible
   rgba(247,242,234,.04) (a near-white tint that reads as almost nothing
   against this already near-white modal) — same magnitude already used
   for .build-row:hover elsewhere in this theme. */
.im-nav-tab:hover { background: rgba(30,30,30,.045); }
/* Same root cause as .im-nav-tab.is-active above: the base (dark-era)
   rule pairs `background: var(--biz-ivory)` (now dark) with
   `color: var(--biz-ink)` (now light) — a deliberate, CORRECT premium
   dark-CTA-on-light-page pairing that already matches this same theme's
   own .ready-cta-primary look exactly. This retune line used to override
   ONLY `color` to a dark brown, breaking that already-correct pairing
   into dark-on-dark. Restated explicitly (both properties together) so
   the pairing can never silently regress like this again. */
#editModal .btn-primary, #uploadModal .btn-primary, #startOverModal .btn-primary, #smartPasteModal .btn-primary {
  color: var(--biz-ink);
  background: var(--biz-ivory);
}
/* Overrides shell.css's generic .btn-primary:hover (background flips to
   a bright amber) — paired with the light `color` above, bright-amber +
   near-white text is its own separate, near-1.6:1-contrast combination.
   Same brightness-only hover treatment .ready-cta-primary already uses,
   so the correct dark-bg/light-text pairing is never replaced on hover. */
#editModal .btn-primary:hover:not(:disabled), #uploadModal .btn-primary:hover:not(:disabled), #startOverModal .btn-primary:hover:not(:disabled), #smartPasteModal .btn-primary:hover:not(:disabled) {
  filter: brightness(1.14);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.4);
}
#editModal .btn-secondary, #uploadModal .btn-secondary, #startOverModal .btn-secondary, #smartPasteModal .btn-secondary { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.16); }
#uploadModal .upload-zone { background: rgba(0,0,0,.02); border-color: rgba(30,30,30,.18); }
.im-photo-thumb { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.14); }
#editModal .im-photo-btns .btn-ghost { background: rgba(0,0,0,.03); border-color: rgba(30,30,30,.16); }