/* builder.css — Setup Builder page (builder.html/builder.js only).
   New styles ONLY here, never in style.css (token-lock, Task 4 brief).
   Uses existing design tokens from style.css (--accent, --bg-card, --border,
   --space-*, --text-*) — no new tokens introduced. Mobile-first; enhanced at
   768px. Reuses .chip/.chip-any/.chip-group/.btn-primary from style.css
   as-is for the barrel filter chips and CTA buttons. */

/* ── Beta banner (Task 8 — publish gate). Static, always visible — unlike
   the dismissible .builder-notice family below (draft/quiz/missing), which
   are conditional state notices, not a permanent disclosure. ───────────── */
.builder-beta-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.builder-beta-banner-tag {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: 100px;
}

.builder-beta-banner a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Entry screen (Task 5 quiz prefill) — shown before any URL params/draft
   exist. Two paths: straight into the app view (as before Task 5), or the
   quiz view below. Reuses .btn-primary + .builder-mode-btn (already defined
   here) for the two actions — no new button style needed. ─────────────── */
.builder-entry {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0;
}

.builder-entry[hidden] { display: none; }

.builder-entry-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-6);
}

.builder-entry-card h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: var(--text-h3);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 var(--space-3);
}

.builder-entry-card p {
  color: var(--text-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
  margin: 0 0 var(--space-6);
}

.builder-entry-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.builder-entry-actions .btn-primary,
.builder-entry-actions .builder-mode-btn {
  width: 100%;
  justify-content: center;
}

/* ── Quiz view (Task 5) — one question at a time. Reuses the .quiz-progress/
   .quiz-q/.quiz-chips/.quiz-chip/.quiz-footer/.quiz-back classes already
   defined in style.css for quiz.html, so the look matches the site quiz.
   Only the container width/centering is builder-specific. ─────────────── */
.builder-quiz {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-6) 0;
}

.builder-quiz[hidden] { display: none; }

/* ── Composition + live totals (normal flow, not sticky/fixed — CEO UX
   round: compact horizontal rails keep this reachable without pinning it) ── */
.builder-stage {
  background: var(--bg-base);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}

.builder-comp-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.builder-comp {
  color: var(--text-secondary);
}

.builder-comp svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  margin: 0 auto;
}

.builder-illustration-label {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.builder-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.builder-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: var(--text-subhead);
  color: var(--text-primary);
}

.builder-total-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: var(--text-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── Guidance panel (native <details> — lives in normal flow after the
   sticky zone, not inside it, so it scrolls away with content; mirrors
   the .fchunk accordion convention from finder.html/style.css) ───────── */
.builder-guidance {
  margin-bottom: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.builder-guidance[hidden] { display: none; }

.builder-guidance > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: var(--text-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}

.builder-guidance > summary::-webkit-details-marker { display: none; }

.builder-guidance-caret {
  width: 9px;
  height: 9px;
  margin-left: auto;
  margin-top: -3px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .15s;
  flex-shrink: 0;
}

.builder-guidance[open] > summary .builder-guidance-caret {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.builder-guidance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}

.builder-guidance-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.builder-guidance-item p {
  margin: 0 0 var(--space-1);
  font-size: var(--text-small);
  color: var(--text-primary);
  line-height: 1.4;
}

.builder-guidance-src {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  text-decoration: none;
}

a.builder-guidance-src:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Draft-restore notice ────────────────────────────────────────────── */
.builder-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: rgba(232, 49, 42, .08);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-small);
  color: var(--text-primary);
}

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

.builder-notice button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-subhead);
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.builder-notice button:hover { color: var(--text-primary); }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.builder-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.builder-tab {
  flex-shrink: 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-6);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: var(--text-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}

.builder-tab:hover { color: var(--text-primary); }

.builder-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.builder-panel { min-height: 200px; }

/* ── Shared card rail — two-row horizontal scroller on all viewports (CEO UX
   round 2: was a single-row flex scroller; now grid-auto-flow:column fills
   top-row-then-bottom-row per column, doubling density before the user has
   to scroll). Composition above stays visible while choosing, no sticky
   positioning needed. A rail with <=3 items collapses toward one visible
   row naturally — an empty row track with no cells sizes to 0 under 'auto'.
   A partial next column peeks at the right edge (column width vs.
   .container's mobile gutter don't divide evenly) to hint scrollability.
   overflow-x is scoped to this element only — no page-level horizontal
   scroll is introduced. ─────────────────────────────────────────────────── */
.builder-card-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 160px;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-3); /* clears the scrollbar so it doesn't sit under the cards */
}

.builder-card-grid > .builder-card,
.builder-card-grid > .builder-card-wrap {
  width: 160px;
  scroll-snap-align: start;
}

/* Barrel rail: wider cards (more spec text per card) */
.builder-card-grid.builder-card-grid--wide {
  grid-auto-columns: 180px;
}

.builder-card-grid.builder-card-grid--wide > .builder-card,
.builder-card-grid.builder-card-grid--wide > .builder-card-wrap {
  width: 180px;
}

.builder-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  color: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, transform .12s;
}

.builder-card:hover { border-color: var(--accent); transform: translateY(-1px); }

.builder-card.is-selected {
  border: 2px solid var(--accent);
  background: rgba(232, 49, 42, .08);
}

.builder-card.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.builder-card-reason {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--warning);
}

.builder-card-thumb {
  display: block;
  width: 100%;
  color: var(--text-secondary);
}

.builder-card-thumb svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 48px; /* tightened for the narrower rail cards (CEO UX round) */
}

.builder-card-name {
  font-weight: 600;
  font-size: var(--text-small);
  line-height: 1.25;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.builder-card-spec {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.builder-card-wrap { display: flex; flex-direction: column; gap: var(--space-1); }

/* ── Color swatches (no inline style= — CSP has no unsafe-inline; colors
   come from data-color, matched against dart-render.js's COLOR_HEX whitelist) ── */
.builder-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.builder-swatch {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}

.builder-swatch::before { content: ''; position: absolute; inset: -12px; }

.builder-swatch.is-active { border-color: var(--accent); }

.builder-swatch[data-color="black"]  { background: #1b1e28; }
.builder-swatch[data-color="white"]  { background: #e8eaf0; }
.builder-swatch[data-color="red"]    { background: #dc2626; }
.builder-swatch[data-color="blue"]   { background: #2563eb; }
.builder-swatch[data-color="green"]  { background: #16a34a; }
.builder-swatch[data-color="yellow"] { background: #eab308; }
.builder-swatch[data-color="orange"] { background: #ea580c; }
.builder-swatch[data-color="purple"] { background: #7c3aed; }
.builder-swatch[data-color="pink"]   { background: #ec4899; }
.builder-swatch[data-color="grey"]   { background: #6b7280; }
.builder-swatch[data-color="clear"]  { background: #9aa0b8; }
.builder-swatch[data-color="gold"]   { background: #b8860b; }

/* ── Tip tab ─────────────────────────────────────────────────────────── */
.builder-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

.builder-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.builder-empty-msg {
  color: var(--text-secondary);
  font-size: var(--text-small);
}

/* ── Barrel tab: search + filter chips ──────────────────────────────── */
.builder-search-row { margin-bottom: var(--space-3); }

.builder-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-small);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  outline: none;
}

.builder-search-input:focus { border-color: var(--accent); }

.builder-chip-group { margin-bottom: var(--space-3); }

.builder-result-count {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

/* ── Finder-style grouped filter accordion (CEO smoke-test fix 2026-07-24,
   uniformity pass same day) — same numbered .fchunk sections as
   finder.html, reusing its .fchunk/.slider-grid/.slider-solo/.chip-block
   classes verbatim from style.css (no new tokens). Barrel gets 4 sections
   (01-04); Tip/Shaft/Flight each get one ("01 Brand") via
   componentFiltersAccordionHtml() in builder.js — same wrapper class, all
   closed by default. Only wrapper spacing lives here. ───────────────────── */
.builder-barrel-filters {
  margin-bottom: var(--space-4);
}

/* ── Variant chips (Task 3 — model variants: one card per family, chip row
   switches the concrete SKU/row within it). Reuses .chip sizing/spacing. ── */
.builder-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* ── Shaft tab: mode toggle ──────────────────────────────────────────── */
.builder-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.builder-mode-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}

.builder-mode-btn:hover { border-color: var(--accent); }

.builder-mode-btn.is-active {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(232, 49, 42, .1);
}

/* ── Summary tab ─────────────────────────────────────────────────────── */
.builder-summary-parts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.builder-summary-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.builder-summary-row .builder-card-thumb { width: 72px; flex-shrink: 0; }

.builder-summary-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.builder-summary-row-label {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.builder-summary-row-name {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-primary);
}

.builder-summary-row-spec {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

.builder-totals-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.builder-totals-summary p {
  margin: 0 0 var(--space-1);
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.builder-totals-summary p:last-child { margin-bottom: 0; }
.builder-totals-summary strong { color: var(--text-primary); }

.builder-subhead {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: var(--text-subhead);
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.builder-compare-link {
  display: inline-flex;
  margin-top: var(--space-4);
}

/* ── Responsive: smaller composition render on narrow screens ─────────── */
@media (max-width: 480px) {
  .builder-comp svg { max-height: 180px; }
}

/* ── Share (Task 6) ───────────────────────────────────────────────────── */
.builder-share-row {
  margin-bottom: var(--space-4);
}

.builder-share-row .btn-primary[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.builder-share-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* Minimal toast — no shared toast component exists elsewhere on the site
   (see builder.js's shareSetup()/showToast()). Fixed + centered so it reads
   the same regardless of scroll position; [hidden] guard matches every
   other transient element on this page. */
.builder-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--bg-card);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  /* Above #cookie-banner's z-index:9999 (style.css) — the toast must stay
     legible even before the visitor has accepted/dismissed cookies. */
  z-index: 10000;
}

.builder-toast[hidden] { display: none; }