/* ============================================================
   CrispLobby Builder — lobby-specific styles
   Reuses tokens, brand-bar, topbar, product-card, control-block
   from styles.css. This file adds:
     - lobby canvas (scene image + overlay pill)
     - segmented controls (.seg / .seg-btn)
     - text input (.text-input layout helper, base already in styles)
     - estimate row + cta
     - controls-panel layout
   ============================================================ */

/* ---------- Topbar pills: 5 products, all visible, no truncation ----------
   Beacon's topbar used flex:1 1 0 + ellipsis. With 5 LobbyXxx pills that
   truncates to "Lobby…". Override: distribute evenly so all 5 fit on one
   row at desktop widths. On smaller screens we wrap to a 2nd row instead
   of clipping or hiding behind a hidden horizontal scroll. */

.builder-topbar .topbar-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: visible;
  scrollbar-width: none;
  width: 100%;
}
.builder-topbar .topbar-cards::-webkit-scrollbar { display: none; }

.builder-topbar .topbar-cards .product-card {
  /* Equal-share single row — 5 cards split available width, but never
     shrink narrower than the label itself (max-content prevents clipping). */
  flex: 1 1 0;
  min-width: max-content;
  padding: 10px 12px;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
}

.builder-topbar .topbar-cards .product-card-title,
.builder-topbar .topbar-cards .product-card .product-card-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 0;
  max-width: none;
}

@media (max-width: 720px) {
  .builder-topbar .topbar-cards {
    gap: 4px;
  }
  .builder-topbar .topbar-cards .product-card {
    padding: 8px 4px;
  }
  .builder-topbar .topbar-cards .product-card-title {
    font-size: 11px;
    letter-spacing: -0.01em;
  }
}

/* ---------- Canvas: scene image + overlay ---------- */

.lobby-canvas-wrap {
  /* extends .canvas-wrap from styles.css */
  background: #f4f3ee;
  overflow: hidden;
}

/* Product-only studio stage — cream Main-Street tone, no photographic backdrop,
   no per-product tints. Identical canvas across all 5 products so the product
   itself is the focus. */
.lobby-stage {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 35%, #f7f4ec 0%, #f2eee4 60%, #ebe6d9 100%);
}
.lobby-stage-floor {
  /* Subtle floor anchor — lets any sign cast a soft shadow */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 60%, rgba(0,0,0,0.12) 100%);
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Ceiling spotlights — LobbyLogo only. Two cones from above, positioned to
   the upper corners so they NEVER cross the centered preview area. */
.lobby-stage[data-product="logo"]::before,
.lobby-stage[data-product="logo"]::after {
  content: "";
  position: absolute;
  top: -2%;
  width: 18%;
  height: 36%;
  background: linear-gradient(180deg,
    rgba(255, 240, 200, 0.55) 0%,
    rgba(255, 240, 200, 0.20) 40%,
    transparent 100%);
  filter: blur(6px);
  pointer-events: none;
  clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
}
.lobby-stage[data-product="logo"]::before { left: 4%; }
.lobby-stage[data-product="logo"]::after  { right: 4%; }

/* Spotlight fixtures (small dots at the ceiling) */
.lobby-stage[data-product="logo"] .spotlight-fixture {
  position: absolute;
  top: 6px;
  width: 14px;
  height: 8px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #2a2a2a 0%, #4a4a4a 70%, #6a6a6a 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset,
    0 4px 8px -2px rgba(0,0,0,0.20);
}
.lobby-stage[data-product="logo"] .spotlight-fixture.left  { left: 12%; }
.lobby-stage[data-product="logo"] .spotlight-fixture.right { right: 12%; }
.lobby-stage[data-product="logo"] .spotlight-fixture::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 4px;
  background: #2a2a2a;
}
.lobby-stage[data-product="logo"] .spotlight-fixture::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: rgba(255, 240, 200, 0.85);
  box-shadow: 0 0 6px 2px rgba(255, 240, 200, 0.45);
}

.lobby-scene-overlay {
  position: absolute;
  left: 24px;
  top: 18px;
  bottom: auto;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.lobby-overlay-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 18, 38, 0.78);
  color: #FAF7F2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 720px) {
  .lobby-scene-overlay {
    left: 12px;
    top: 12px;
  }
  .lobby-overlay-pill {
    font-size: 12px;
    padding: 6px 11px;
  }
}

/* ---------- Controls panel layout ---------- */

.controls-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

/* ---------- Segmented control (.seg / .seg-btn) ---------- */

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  background: rgba(10, 18, 38, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.seg-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.seg-btn:hover {
  background: rgba(10, 18, 38, 0.06);
}

.seg-btn:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.12);
}

.seg-btn.is-active {
  background: var(--navy);
  color: #FAF7F2;
  box-shadow: 0 2px 8px -3px rgba(10, 18, 38, 0.4);
}

.seg-btn.is-active:hover {
  background: var(--navy-deep);
}

/* ---------- Text input (helper — base .text-input already in styles.css) ---------- */

input.text-input {
  width: 100%;
  max-width: 340px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

input.text-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.10);
}

input.text-input::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}

/* ---------- Textarea ---------- */

textarea.text-area {
  width: 100%;
  max-width: 420px;
  min-height: 96px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

textarea.text-area:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.10);
}

textarea.text-area::placeholder {
  color: var(--ink-muted);
  opacity: 0.65;
}

/* ---------- Upload dropzone (LobbyPanel artwork) ---------- */

.upload-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 14px 14px;
  background: var(--cream);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.upload-dropzone:hover,
.upload-dropzone:focus-within {
  border-color: var(--navy);
  background: #fff;
}

.upload-dropzone.is-dragover {
  border-color: var(--accent, #b8860b);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.12);
}

.upload-dropzone.has-file {
  border-style: solid;
  border-color: var(--navy);
  background: #fff;
}

.upload-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--navy);
  background: rgba(10, 18, 38, 0.06);
  border-radius: 8px;
}

.upload-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.upload-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.upload-meta {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-clear {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.upload-clear:hover {
  color: #b3261e;
  border-color: #b3261e;
  background: rgba(179, 38, 30, 0.06);
}

/* ---------- Variable data block (LobbyPanel multi-location) ---------- */

.variable-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.variable-data-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-muted);
  max-width: 420px;
}

.variable-data-meta #panelVarCount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--navy);
}

.variable-data-csv {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(10, 18, 38, 0.25);
  text-underline-offset: 2px;
}

.variable-data-csv:hover {
  color: var(--navy);
  text-decoration-color: var(--navy);
}

/* ---------- Estimate row + CTA ---------- */

.estimate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.estimate-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1;
}

.estimate-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 82, 27, 0.25);
}

.cta-primary {
  background: var(--orange);
  color: #FAF7F2;
}

.cta-primary:hover {
  background: #d8481a;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(232, 82, 27, 0.6);
}

.cta-primary:active {
  transform: translateY(0);
}

/* ---------- Brand footer note ---------- */

.notes.brand-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ---------- [data-only] product-conditional reveal ----------
   app.js toggles native `hidden` attribute on [data-only] blocks.
   No custom rule needed — browsers hide [hidden] by default.
   This block exists as documentation. */

/* ---------- Mobile spacing ---------- */

@media (max-width: 720px) {
  .controls-panel {
    gap: 14px;
  }
  .estimate-amount {
    font-size: 24px;
  }
  .cta {
    width: 100%;
  }
}

/* ── Gemini font picker & live letter preview ────────────────────── */
.font-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: #0A1226;
  background: #fff;
  border: 1px solid rgba(10, 18, 38, 0.18);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.font-select:hover { border-color: rgba(10, 18, 38, 0.32); }
.font-select:focus-visible {
  outline: 2px solid #E81820;
  outline-offset: 1px;
  border-color: #E81820;
}

.lobby-letter-preview {
  position: absolute;
  /* Stage area left of the floating panel — reserves ~340px on the right
     so the letters never collide with the Customize panel. */
  top: 28%;
  left: 4%;
  right: calc(clamp(300px, 32%, 380px) + 36px);
  text-align: center;
  pointer-events: none; /* container is non-interactive; .preview-stack is */
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #2a2a2a;
  z-index: 2;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.10);
  white-space: nowrap;
  overflow: visible; /* allow dragged stack to extend past container */
  padding: 0 4%;
  font-family: "GT Helvetica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: font-family 0.15s ease, color 0.2s ease, text-shadow 0.2s ease;
}

/* Material-aware preview tints */
.lobby-letter-preview[data-mat="bronze"] {
  color: #b08456;
  text-shadow:
    0 1px 0 #5a3d1f,
    0 4px 0 #4a2f15,
    0 8px 24px rgba(0,0,0,0.5);
}
.lobby-letter-preview[data-mat="brushed"] {
  color: #d6d8d8;
  text-shadow:
    0 1px 0 #6a6e72,
    0 4px 0 #4f5256,
    0 8px 24px rgba(0,0,0,0.45);
}
.lobby-letter-preview[data-mat="walnut"] {
  color: #6b3f23;
  text-shadow:
    0 1px 0 #3a200f,
    0 4px 0 #2a1608,
    0 8px 24px rgba(0,0,0,0.5);
}
.lobby-letter-preview[data-mat="acrylic"] {
  color: #1a1a1a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

/* Lighting glow */
.lobby-letter-preview[data-light="halolit"] {
  text-shadow:
    0 0 24px rgba(255, 250, 220, 0.85),
    0 0 60px rgba(255, 240, 180, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.45);
}
.lobby-letter-preview[data-light="frontlit"] {
  filter: brightness(1.18);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.95),
    0 0 36px rgba(255, 240, 180, 0.7),
    0 4px 14px rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────
   Floating in-canvas controls panel (LobbyLogo)
   Lets users toggle material/lighting/font/height
   in real time directly over the live preview.
   ───────────────────────────────────────────── */
.floating-panel {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: clamp(280px, 30%, 360px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  color: #1a1d22;
  z-index: 5;
  font-size: 0.875rem;
  overflow: hidden;
}
.floating-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.floating-panel-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 25, 35, 0.65);
}
.floating-panel-toggle {
  background: transparent;
  border: 0;
  color: rgba(20, 25, 35, 0.65);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 2px 6px;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease;
}
.floating-panel-toggle:hover { color: #1a1d22; }
.floating-panel.is-collapsed .floating-panel-toggle { transform: rotate(-90deg); }
.floating-panel.is-collapsed .floating-panel-body { display: none; }
/* Collapse → panel itself contracts to header-only width so it stops
   blocking the canvas. Header width is driven by content (Customize + chevron). */
.floating-panel.is-collapsed {
  width: auto;
  min-width: 0;
  max-width: 200px;
}
.floating-panel.is-collapsed .floating-panel-header { border-bottom: 0; }

.floating-panel-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fp-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 25, 35, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fp-hint {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #b04a17;
}
.fp-text,
.fp-select {
  width: 100%;
  background: #fbfaf7;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1a1d22;
  font-size: 0.85rem;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: inherit;
}
.fp-text:focus,
.fp-select:focus {
  outline: 0;
  border-color: rgba(232, 82, 27, 0.7);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 82, 27, 0.12);
}
.fp-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 3px;
}
.fp-seg .seg-btn {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  color: rgba(20, 25, 35, 0.7);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.fp-seg .seg-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1d22;
}
.fp-seg .seg-btn.is-active {
  background: #1a1d22;
  color: #fff;
  font-weight: 600;
}

/* Sidebar logo control-blocks mirror the in-canvas floating panel.
   On wide desktop the floating panel is the primary control surface and is
   visible alongside a slightly muted sidebar mirror. On narrow screens the
   sidebar mirror takes over (floating panel hides under the preview). */
@media (min-width: 1100px) {
  .controls-panel .control-block[data-only="logo"] {
    opacity: 0.92;
  }
}
@media (max-width: 720px) {
  /* Sidebar mirror remains visible on phones for thumb-reach. */
  .controls-panel .control-block[data-only="logo"] {
    opacity: 1;
  }
}

/* Mobile: dock floating panel at bottom; auto-collapsed at first so the
   preview is visible. Tap header to expand. */
@media (max-width: 720px) {
  .lobby-letter-preview {
    /* Full-width on mobile (panel is collapsed/docked at bottom) */
    left: 4%;
    right: 4%;
  }
  .floating-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    border-radius: 12px;
  }
  .floating-panel-body {
    max-height: 50vh;
    overflow-y: auto;
  }
  .fp-seg .seg-btn { font-size: 0.74rem; padding: 5px 6px; }
  .fp-row { gap: 4px; }
  .floating-panel.is-collapsed-mobile .floating-panel-body { display: none; }
  .floating-panel.is-collapsed-mobile .floating-panel-toggle { transform: rotate(-90deg); }
  /* On mobile, collapsed panel shrinks to a compact pill on the right edge */
  .floating-panel.is-collapsed-mobile {
    left: auto;
    right: 8px;
    width: auto;
    max-width: 180px;
  }
  .floating-panel.is-collapsed-mobile .floating-panel-header { border-bottom: 0; }
}

/* ── Material-grid chips with thumbnail swatches (floating panel) ───── */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mat-chip {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  padding: 4px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
.mat-chip:hover { border-color: rgba(0,0,0,0.25); }
.mat-chip.is-active {
  background: #1a1d22;
  border-color: #1a1d22;
}
.mat-chip.is-active .mat-chip-label { color: #fff; }
.mat-chip-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #efece4;
  display: block;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.mat-chip-swatch img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* CSS-only swatches for materials without a Gemini photo */
.mat-chip-swatch[data-swatch="acrylic"] {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 60%, #4a4a4a 100%);
}
.mat-chip-swatch[data-swatch="acrylic"]::after {
  content: "";
  position: absolute;
  inset: 12% 12% 12% 12%;
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 35%);
}
.mat-chip-swatch[data-swatch="walnut"] {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #5a3920 0%, #7c4f2e 50%, #4a2f1c 100%);
}
.mat-chip-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #1a1d22;
  letter-spacing: 0.2px;
}

/* ── Inspiration strip (real Gemini install photos) ─────────────────── */
.inspo-strip {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fbfaf6;
}
.inspo-strip-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}
.inspo-strip-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1d22;
}
.inspo-strip-hint {
  font-size: 0.72rem;
  color: rgba(26,29,34,0.6);
}
.inspo-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.inspo-tile {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #efece4;
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.inspo-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.inspo-tile::after {
  content: attr(data-label);
  position: absolute;
  left: 6px; bottom: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .mat-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .mat-chip { padding: 3px 3px 5px; }
  .mat-chip-label { font-size: 0.62rem; }
  .inspo-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────
   LobbyPanel v2 — Signs365 acrylic flow controls
   ────────────────────────────────────────────────────────────────── */

/* Width × Height number inputs */
.size-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.size-field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.size-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6c5e48;
  text-transform: uppercase;
}
.size-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.size-input {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #d9d2c1;
  border-radius: 8px;
  padding: 9px 28px 9px 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -moz-appearance: textfield;
}
.size-input::-webkit-outer-spin-button,
.size-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.size-input:focus {
  border-color: #b89656;
  box-shadow: 0 0 0 3px rgba(184, 150, 86, 0.18);
}
.size-unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 500;
  color: #8a7d65;
  pointer-events: none;
}
.size-x {
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 500;
  color: #b09f80;
  padding-bottom: 10px;
}

/* Common-size preset toolbar */
.size-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.size-preset {
  appearance: none;
  background: #faf6ec;
  border: 1px solid #e2d9c4;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5a4f3a;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
  font-variant-numeric: tabular-nums;
}
.size-preset:hover {
  background: #f3ecdb;
  border-color: #c8b88f;
  color: #2a221a;
}
.size-preset.is-active {
  background: #2a221a;
  border-color: #2a221a;
  color: #f9f5e8;
}
.size-preset:active { transform: translateY(1px); }

/* 3-up segmented grid (drilled holes — five options wraps onto two rows) */
.seg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.seg-grid-3 .seg-btn {
  border: 1px solid #d9d2c1;
  background: #fff;
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #4a4030;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
}
.seg-grid-3 .seg-btn:hover {
  background: #faf6ec;
  border-color: #c8b88f;
}
.seg-grid-3 .seg-btn.is-active {
  background: #2a221a;
  border-color: #2a221a;
  color: #f9f5e8;
}

/* Live SVG preview on the cream stage */
.lobby-panel-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Reserve room for floating panel on desktop */
  padding: 24px calc(340px + 36px) 24px 36px;
  z-index: 2;
}
.lobby-panel-preview svg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 30px rgba(48, 36, 18, 0.18));
}

@media (max-width: 720px) {
  .lobby-panel-preview {
    padding: 16px 16px 110px 16px;
  }
  .size-row { gap: 8px; }
  .size-input { font-size: 0.96rem; padding: 8px 24px 8px 10px; }
  .size-presets { gap: 4px; }
  .size-preset { padding: 5px 10px; font-size: 0.72rem; }
  .seg-grid-3 .seg-btn { padding: 7px 4px; font-size: 0.72rem; }
}

/* ─────────────────────────────────────────────
   LobbyPanel floating control panel
   Sits inside the canvas-stage so customers can
   toggle size/corners/standoffs/cut without
   scrolling away from the live preview.
   ───────────────────────────────────────────── */
.floating-panel-panel {
  width: clamp(260px, 26%, 320px);
  /* Pin to top-right so the floor area + panel center stay clear */
  top: 18px;
  bottom: auto;
  right: 18px;
}
.floating-panel-panel .floating-panel-body {
  max-height: min(72vh, 600px);
  overflow-y: auto;
}

/* W × H size row inside floating panel */
.fp-size-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.fp-size-input {
  text-align: center;
  padding: 7px 8px;
  font-variant-numeric: tabular-nums;
}
.fp-size-x {
  font-size: 0.75rem;
  color: rgba(20, 25, 35, 0.55);
  letter-spacing: 0.04em;
}

/* Size presets inside floating panel */
.fp-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.fp-preset {
  background: #fbfaf7;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(20, 25, 35, 0.78);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 4px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fp-preset:hover {
  border-color: rgba(0, 0, 0, 0.22);
  background: #fff;
}
.fp-preset.is-active {
  background: #1a1d22;
  border-color: #1a1d22;
  color: #fff;
}

/* Mobile: hide the in-canvas float (the primary control form sits directly
   below the preview, which keeps controls close to the design area). */
@media (max-width: 760px) {
  .floating-panel-panel { display: none !important; }
}

/* Hide the duplicated primary fieldsets when the in-canvas float is present and
   product=panel — the float already mirrors Size, Corners, Standoff color/position,
   Cut shape, and Headline, so showing them in the side form too would be redundant.
   Artwork, Variable Data, Standoff Spacing, and Quantity stay visible because they
   need the wider real estate (file drop zones, multi-line textareas, etc.). */
@media (min-width: 761px) {
  body[data-product="panel"] .controls-panel .control-block.is-floated-on-desktop {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────
   Gemini cascade — primary in-canvas control surface
   ───────────────────────────────────────────── */

/* Widen the floating panel so the cascade fits comfortably without dominating
   the canvas. Caps at 380px and 35% of the canvas so the live preview is
   never crowded out. The panel anchors top+bottom inside the canvas-wrap so
   it never grows past the wrap (the wrap has overflow:hidden) — the cascade
   body scrolls internally instead. */
.floating-panel-logo {
  width: clamp(300px, 32%, 380px);
  top: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
}

/* Cascade scrolls internally — preview never gets pushed offscreen. */
.cascade-body {
  /* Fill remaining height in the panel after the header */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,18,38,0.25) transparent;
}
.cascade-body::-webkit-scrollbar { width: 8px; }
.cascade-body::-webkit-scrollbar-thumb {
  background: rgba(10,18,38,0.22);
  border-radius: 8px;
}

/* Cascade selects gain a subtle cue when downstream of an unset upstream. */
.cascade-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stack-style segmented (vertical or wrap) for spec-mode toggle. */
.fp-seg-stack { flex-wrap: wrap; }
.fp-seg-stack .seg-btn { flex: 1 1 80px; min-width: 80px; }

/* Grid variant for acrylic-type (5 pills) and other multi-pill rows.
   Uses 3 columns so labels never truncate. */
.fp-seg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.fp-seg-grid .seg-btn {
  flex: unset;
  font-size: 0.74rem;
  padding: 7px 4px;
  text-align: center;
}

/* ── Line cards ───────────────────────────────────────────────────────── */
.line-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.line-cards-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.line-card {
  background: rgba(10, 18, 38, 0.03);
  border: 1px solid rgba(10, 18, 38, 0.10);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.line-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(10, 18, 38, 0.06);
}
.line-card-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0A1226;
}
.line-card-remove {
  background: transparent;
  border: 1px solid rgba(10, 18, 38, 0.12);
  color: rgba(10, 18, 38, 0.6);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.line-card-remove:hover {
  background: #E81820;
  color: #fff;
  border-color: #E81820;
}
.line-field { gap: 4px; }

/* ── Color swatch grid (sheen-aware swatches) ─────────────────────────── */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.color-chip {
  background: transparent;
  border: 1px solid rgba(10, 18, 38, 0.10);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.color-chip:hover {
  border-color: rgba(232, 82, 27, 0.4);
  background: rgba(232, 82, 27, 0.04);
}
.color-chip.is-active {
  border-color: #E81820;
  background: rgba(232, 82, 27, 0.08);
  box-shadow: 0 0 0 1px #E81820 inset;
}
.color-chip-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: #ddd center / cover no-repeat;
  border: 1px solid rgba(0,0,0,0.08);
  /* Sheen highlight */
  position: relative;
  overflow: hidden;
}
.color-chip-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}
.color-chip-label {
  font-size: 0.6rem;
  font-weight: 500;
  color: rgba(10, 18, 38, 0.78);
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.02em;
  /* Truncate long names with ellipsis to keep grid tidy */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Floating-panel CTA actions: Add line + Save quote ────────────────── */
.fp-actions { gap: 0; }
.fp-add-line,
.fp-save-quote {
  width: 100%;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.08s ease;
}
.fp-add-line {
  background: transparent;
  border: 1px dashed rgba(10, 18, 38, 0.30);
  color: #0A1226;
}
.fp-add-line:hover {
  border-color: #E81820;
  color: #E81820;
  background: rgba(232, 82, 27, 0.04);
}
.fp-save-quote {
  background: #E81820;
  border: 1px solid #E81820;
  color: #fff;
}
.fp-save-quote:hover {
  background: #d24716;
  border-color: #d24716;
}
.fp-save-quote:active { transform: translateY(1px); }
.fp-pricing-note {
  font-size: 0.7rem;
  color: rgba(10, 18, 38, 0.56);
  margin-top: 4px;
  line-height: 1.35;
}

/* ── Multi-line preview stacking ──────────────────────────────────────── */
.lobby-letter-preview.multi-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  white-space: normal;
}
/* Inner stack — wraps all preview lines. Each line is independently
   draggable now, so the stack itself is non-interactive; grab/drop happens
   on each .preview-line. */
.preview-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.preview-line {
  display: block;
  line-height: 1;
  letter-spacing: 0.02em;
  /* Never wrap — the JS width-scaling in refreshLogoPreview() is authoritative.
     Wrapping made multi-word default text look like a multi-row sign. (Nick) */
  white-space: nowrap;
  /* Drag affordance — each line moves independently */
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transition: color 0.2s ease, font-family 0.15s ease, text-shadow 0.2s ease,
    -webkit-text-stroke 0.2s ease, filter 0.2s ease;
}
.preview-line:active { cursor: grabbing; }

/* ── Mobile: full-width panel, taller scroll, sidebar mirror visible ─── */
@media (max-width: 720px) {
  .floating-panel-logo { width: auto; }
  .cascade-body {
    max-height: 60vh;
  }
  .color-grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  }
  .color-chip-label { font-size: 0.56rem; }
  .lobby-letter-preview { font-size: clamp(1.5rem, 6vw, 2.6rem); }
}

/* ────────────────────────────────────────────────────────────────────
   Architectural dimension rulers — drawn directly on the canvas so they
   hug the rendered design bbox. Vertical ruler (left) shows the first
   line's height; horizontal ruler (below) shows total approximate width.
   Inline styles set position + size live in refreshLogoPreview.
   ──────────────────────────────────────────────────────────────────── */
.lobby-dim-rulers {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  font-family: "GT Helvetica", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lobby-dim-rulers[hidden] { display: none; }
.dim-ruler {
  position: absolute;
  color: rgba(11, 26, 53, 0.78);
}
/* Vertical ruler (height — sits to the left of the design).
   Mirror image of H-ruler: 1px vertical center line + 12px-wide horizontal
   end ticks (matches H-ruler's 12px end ticks rotated). Background must stay
   transparent so the ruler never reads as a filled block. */
.dim-ruler-v {
  width: 12px;
  display: flex;
  flex-direction: column;     /* center line runs TOP→BOTTOM (main axis) */
  align-items: center;        /* keep .dim-line at 1px on cross-axis */
  justify-content: stretch;
  background: transparent !important;
}
.dim-ruler-v .dim-line {
  width: 1px;                  /* a 1px-wide vertical caliper line */
  background: currentColor;
  flex: 1;                     /* fills the full height of the ruler */
  align-self: center;
}
.dim-ruler-v .dim-tick {
  position: absolute;
  left: 0;
  width: 12px;
  height: 1px;
  background: currentColor;
}
.dim-ruler-v .dim-tick-top { top: 0; }
.dim-ruler-v .dim-tick-bot { bottom: 0; }
.dim-ruler-v .dim-label {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px 6px;
  border-radius: 3px;
  color: rgba(11, 26, 53, 0.92);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/* Horizontal ruler (width — sits below the design).
   Mirror image of V-ruler: 1px horizontal center line + 12px-tall vertical
   end ticks. Same caliper styling. */
.dim-ruler-h {
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.dim-ruler-h .dim-line {
  height: 1px;
  background: currentColor;
  flex: 1;
}
.dim-ruler-h .dim-tick {
  position: absolute;
  top: 0;
  height: 12px;
  width: 1px;
  background: currentColor;
}
.dim-ruler-h .dim-tick-left  { left: 0; }
.dim-ruler-h .dim-tick-right { right: 0; }
.dim-ruler-h .dim-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px 6px;
  border-radius: 3px;
  color: rgba(11, 26, 53, 0.92);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
@media (max-width: 720px) {
  .dim-ruler-v .dim-label,
  .dim-ruler-h .dim-label { font-size: 10px; padding: 1px 5px; }
}

/* ────────────────────────────────────────────────────────────────────
   Inline "+ Line" button — sits to the right of each line's Text field,
   keeping all line text inputs visually grouped with their attributes
   stacked underneath each one.
   ──────────────────────────────────────────────────────────────────── */
.line-text-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.line-text-group .fp-text {
  flex: 1 1 auto;
  min-width: 0;
}
.line-add-inline {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px dashed rgba(11, 26, 53, 0.45);
  border-radius: 8px;
  background: rgba(11, 26, 53, 0.04);
  color: #0b1a35;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.line-add-inline:hover {
  background: rgba(11, 26, 53, 0.10);
  border-color: rgba(11, 26, 53, 0.7);
  transform: translateY(-1px);
}
.line-add-inline:active { transform: translateY(0); }
@media (max-width: 540px) {
  .line-add-inline { padding: 0 10px; font-size: 11px; }
}

/* ── See-all-colors link + Gemini palette modal ───────────────────────── */
.color-grid-wrap { display: flex; flex-direction: column; gap: 8px; }
.see-all-colors {
  appearance: none;
  background: transparent;
  border: 1px dashed rgba(10, 18, 38, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0a1226;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.see-all-colors:hover {
  border-color: #E81820;
  background: rgba(232, 82, 27, 0.06);
  color: #E81820;
}

.gem-color-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 18, 38, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  padding: 16px;
  animation: gemFadeIn 0.15s ease;
}
@keyframes gemFadeIn { from { opacity: 0; } to { opacity: 1; } }
.gem-color-modal {
  background: #FAF7F2;
  border-radius: 14px;
  width: min(720px, 100%);
  max-height: min(86vh, 720px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(10, 18, 38, 0.35);
  overflow: hidden;
}
.gem-color-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 6px;
}
.gem-color-modal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -0.01em;
  color: #0a1226;
}
.gem-color-modal-sub {
  margin: 0 24px 12px;
  color: rgba(10, 18, 38, 0.6);
  font-size: 0.85rem;
}
.gem-color-modal-close {
  appearance: none; background: transparent; border: 0;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: rgba(10, 18, 38, 0.6);
  padding: 4px 8px;
  border-radius: 6px;
}
.gem-color-modal-close:hover { background: rgba(10, 18, 38, 0.06); color: #0a1226; }
.gem-color-modal-search {
  margin: 0 24px 16px;
  padding: 10px 14px;
  border: 1px solid rgba(10, 18, 38, 0.16);
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
  background: #fff;
}
.gem-color-modal-search:focus {
  outline: none;
  border-color: #E81820;
  box-shadow: 0 0 0 3px rgba(232, 82, 27, 0.18);
}
.gem-color-modal-grid {
  padding: 0 24px 16px;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}
.gem-color-modal-grid .color-chip { padding: 6px; }
.gem-color-modal-grid .color-chip-label { font-size: 0.7rem; -webkit-line-clamp: 2; }
.gem-color-modal-footer {
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(10, 18, 38, 0.08);
  background: #fff;
}
.gem-color-modal-footer small { color: rgba(10, 18, 38, 0.55); font-size: 0.78rem; }
@media (max-width: 600px) {
  .gem-color-modal { max-height: 92vh; border-radius: 12px; }
  .gem-color-modal-head { padding: 16px 18px 4px; }
  .gem-color-modal-sub, .gem-color-modal-search, .gem-color-modal-grid, .gem-color-modal-footer { padding-left: 18px; padding-right: 18px; }
  .gem-color-modal-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════
   LobbyVinyl / LobbyTents / LobbyADA — control surfaces (May 2026)
   ════════════════════════════════════════════════════════════════════ */

/* Segmented grids 4/5 (extends existing .seg-grid-3) */
.seg-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.seg-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.seg-grid-4 .seg-btn,
.seg-grid-5 .seg-btn {
  padding: 10px 8px; border-radius: 8px; font-size: 0.86rem; font-weight: 600;
  border: 1px solid rgba(10,18,38,0.14); background: #fff; color: #0a1226;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.seg-grid-4 .seg-btn:hover,
.seg-grid-5 .seg-btn:hover { border-color: rgba(10,18,38,0.32); }
.seg-grid-4 .seg-btn.is-active,
.seg-grid-5 .seg-btn.is-active {
  background: #0a1226; color: #fff; border-color: #0a1226;
}
@media (max-width: 540px) {
  .seg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Quantity input — matches text-input */
.qty-input { max-width: 140px; }

/* ─── Vinyl type cards ───────────────────────────────────────────── */
.vinyl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.vinyl-card {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(10,18,38,0.14);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.vinyl-card:hover { border-color: rgba(10,18,38,0.32); }
.vinyl-card.is-active {
  border-color: #E81820;
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.vinyl-card-brand {
  position: absolute; top: 10px; right: 12px;
  display: flex; gap: 6px; align-items: center;
  height: 18px;
}
.vinyl-card-brand img { height: 100%; width: auto; max-width: 70px; opacity: 0.9; object-fit: contain; }
.vinyl-card-title { font-weight: 700; font-size: 0.95rem; color: #0a1226; padding-right: 70px; line-height: 1.25; }
.vinyl-card-sub { font-size: 0.78rem; color: rgba(10,18,38,0.62); line-height: 1.35; }
.vinyl-card-price { margin-top: 6px; font-weight: 700; font-size: 0.88rem; color: #E81820; }

/* Vinyl finishing rows */
.vinyl-finish-rows { display: flex; flex-direction: column; gap: 14px; }
.vinyl-finish-row { display: flex; flex-direction: column; gap: 6px; }
.vinyl-finish-label { font-size: 0.82rem; font-weight: 600; color: rgba(10,18,38,0.78); }
.vinyl-finish-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; color: #0a1226; cursor: pointer;
  padding: 8px 10px; border: 1px solid rgba(10,18,38,0.14); border-radius: 8px; background: #fff;
}
.vinyl-finish-check input[type="checkbox"] { accent-color: #E81820; width: 16px; height: 16px; }
.vinyl-finish-locked {
  padding: 10px 12px;
  font-size: 0.85rem;
  color: rgba(10,18,38,0.7);
  background: rgba(10,18,38,0.04);
  border-radius: 8px;
  border: 1px dashed rgba(10,18,38,0.18);
}

/* Vinyl warnings */
.vinyl-warnings { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.vinyl-warning {
  font-size: 0.8rem;
  color: #B45F1A;
  background: rgba(232,82,27,0.08);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid #E81820;
}

/* ─── Tent size cards ────────────────────────────────────────────── */
.tent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.tent-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 14px;
  border: 1px solid rgba(10,18,38,0.14);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.tent-card:hover { border-color: rgba(10,18,38,0.32); }
.tent-card.is-active {
  border-color: #E81820;
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.tent-card-title { font-weight: 700; font-size: 1rem; color: #0a1226; }
.tent-card-sub { font-size: 0.82rem; color: rgba(10,18,38,0.62); }

/* ─── ADA product cards ──────────────────────────────────────────── */
.ada-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
/* 2-card layout (Raised Print + Aluminum Precision) */
.ada-cards-2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .ada-cards-2up { grid-template-columns: 1fr; }
}
.ada-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(10,18,38,0.14);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.ada-card:hover { border-color: rgba(10,18,38,0.32); }
.ada-card.is-active {
  border-color: #E81820;
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.ada-card-tier {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10,18,38,0.62);
  font-weight: 600;
}
.ada-card-title { font-weight: 700; font-size: 1.02rem; color: #0a1226; line-height: 1.25; }
.ada-card-copy { font-size: 0.84rem; color: rgba(10,18,38,0.7); line-height: 1.4; margin: 4px 0 8px; }
.ada-card-price { font-weight: 700; font-size: 1.4rem; color: #E81820; line-height: 1; }
.ada-card-meta { font-size: 0.78rem; color: rgba(10,18,38,0.55); }
.ada-card-quote .ada-card-price {
  font-size: 1rem;
  color: rgba(10,18,38,0.62);
  font-weight: 600;
}

/* ─── Spec panel (collapsible accordion) ─────────────────────────── */
.spec-panel { border: 1px solid rgba(10,18,38,0.10); border-radius: 12px; padding: 0; overflow: hidden; background: #fafbfd; }
.spec-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: transparent; border: none;
  font: inherit; font-size: 0.95rem; font-weight: 600; color: #0a1226;
  cursor: pointer; text-align: left;
}
.spec-toggle:hover { background: rgba(10,18,38,0.03); }
.spec-toggle-caret {
  font-size: 0.8rem; color: rgba(10,18,38,0.5);
  transition: transform 0.2s;
}
.spec-toggle.is-open .spec-toggle-caret { transform: rotate(180deg); }
.spec-body {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(10,18,38,0.08);
  font-size: 0.88rem;
}
.spec-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding-top: 14px;
  margin-bottom: 12px;
}
.spec-brands {
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.spec-brand-logo {
  height: 24px; width: auto; max-width: 100px;
  object-fit: contain;
  opacity: 0.9;
}
.spec-brand-logo[src$="orafol.svg"] {
  height: 40px; max-width: 150px;
  opacity: 0.95;
}
.spec-titles { display: flex; flex-direction: column; gap: 2px; }
.spec-product-line { font-weight: 700; color: #0a1226; font-size: 0.95rem; line-height: 1.3; }
.spec-manufacturer { font-size: 0.78rem; color: rgba(10,18,38,0.6); }
.spec-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.spec-table th, .spec-table td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(10,18,38,0.06);
  font-size: 0.84rem;
}
.spec-table th {
  font-weight: 600;
  color: rgba(10,18,38,0.7);
  width: 38%;
  background: rgba(10,18,38,0.02);
}
.spec-table td { color: #0a1226; }
.spec-bestfor {
  margin: 10px 0 8px;
  padding: 10px 12px;
  background: rgba(232,82,27,0.06);
  border-left: 3px solid #E81820;
  border-radius: 4px;
  font-size: 0.86rem;
  color: #0a1226;
  line-height: 1.5;
}
.spec-bestfor strong { color: #E81820; }
.spec-datasheets { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.spec-datasheet {
  display: inline-flex;
  font-size: 0.86rem;
  color: #E81820;
  text-decoration: none;
  font-weight: 600;
}
.spec-datasheet:hover { text-decoration: underline; }

/* ============================================================
   Use-case shortcut chips (Quick start row)
   Sits below the 5 product cards in the topbar.
   Click → preselect product + sane config defaults.
   ============================================================ */
.builder-topbar .usecase-block {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(10, 18, 38, 0.06);
}
.builder-topbar .usecase-block .control-header {
  margin-bottom: 8px;
}
.builder-topbar .usecase-block .control-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink, #0A1226);
}
.builder-topbar .usecase-block .helper-tip {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(10, 18, 38, 0.55);
  margin-left: 6px;
}
.usecase-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 2px 0 6px;
}
.usecase-row::-webkit-scrollbar { display: none; }
.usecase-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 168px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(10, 18, 38, 0.10);
  background: #fff;
  color: var(--ink, #0A1226);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: 0 1px 2px rgba(10, 18, 38, 0.04);
}
.usecase-chip:hover {
  border-color: var(--signal, #E81820);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 24, 32, 0.12);
}
.usecase-chip:focus-visible {
  outline: 2px solid var(--signal, #E81820);
  outline-offset: 2px;
}
.usecase-chip-emoji {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}
.usecase-chip-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.usecase-chip-sub {
  font-size: 11.5px;
  color: rgba(10, 18, 38, 0.58);
  font-weight: 500;
}
.usecase-chip-help {
  background: linear-gradient(180deg, #FAF7F2 0%, #fff 100%);
  border-style: dashed;
  border-color: rgba(232, 24, 32, 0.4);
}
.usecase-chip-help .usecase-chip-title { color: var(--signal, #E81820); }
.usecase-chip.is-active {
  border-color: var(--signal, #E81820);
  background: rgba(232, 24, 32, 0.06);
}
@media (max-width: 720px) {
  .usecase-chip { min-width: 148px; padding: 9px 12px; }
  .usecase-chip-title { font-size: 12.5px; }
  .usecase-chip-sub { font-size: 11px; }
}

/* ============================================================
   Use-case "Help me choose" mini-quiz modal
   ============================================================ */
.usecase-quiz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 38, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.usecase-quiz-overlay.is-open { display: flex; }
.usecase-quiz {
  background: #fff;
  width: min(440px, 100%);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(10, 18, 38, 0.28);
  padding: 22px;
}
.usecase-quiz h3 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink, #0A1226);
}
.usecase-quiz p {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(10, 18, 38, 0.62);
}
.usecase-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.usecase-quiz-options button {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid rgba(10, 18, 38, 0.12);
  background: #fff;
  color: var(--ink, #0A1226);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.usecase-quiz-options button:hover {
  border-color: var(--signal, #E81820);
  background: rgba(232, 24, 32, 0.05);
}
.usecase-quiz-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.usecase-quiz-actions button {
  background: none;
  border: none;
  font-size: 12px;
  color: rgba(10, 18, 38, 0.55);
  cursor: pointer;
  padding: 6px 8px;
}

/* ============================================================
   Sticky mobile bottom bar — always-visible price + Buy Now
   ============================================================ */
.mobile-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid rgba(10, 18, 38, 0.10);
  box-shadow: 0 -6px 18px rgba(10, 18, 38, 0.10);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 12px;
}
.mobile-stickybar-price {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.mobile-stickybar-price-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #0A1226);
  letter-spacing: -0.01em;
}
.mobile-stickybar-price-meta {
  font-size: 11px;
  color: rgba(10, 18, 38, 0.55);
  font-weight: 500;
}
.mobile-stickybar-cta {
  flex: 0 0 auto;
  background: var(--signal, #E81820);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(232, 24, 32, 0.32);
  transition: background 120ms ease, transform 120ms ease;
}
.mobile-stickybar-cta:hover { background: var(--signal-deep, #C8121A); }
.mobile-stickybar-cta:active { transform: translateY(1px); }
.mobile-stickybar-cta:disabled {
  background: rgba(10, 18, 38, 0.25);
  box-shadow: none;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .mobile-stickybar { display: flex; }
  /* Add bottom space so content doesn't hide behind the bar */
  body { padding-bottom: 84px; }
}

/* When the topbar contains usecase chips, force single-column stacking
   so the product cards row sits ABOVE the quick-start chips row.
   Otherwise styles.css's 2-col grid (channel-cabinet layout) wins. */
.builder-topbar:has(.usecase-block) {
  grid-template-columns: 1fr !important;
}
.builder-topbar .topbar-usecases {
  margin-top: 4px;
}

/* ============================================================
   Generic live preview for vinyl / tents / ada
   Shares positioning with .lobby-panel-preview
   ============================================================ */
.lobby-generic-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 24px calc(340px + 36px) 24px 36px;
  z-index: 2;
}
.lobby-generic-preview svg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 30px rgba(48, 36, 18, 0.18));
}
@media (max-width: 720px) {
  .lobby-generic-preview { padding: 16px 16px 110px 16px; }
}

/* ── Upload education + quality validation (panel) ───────────────── */
.upload-specs {
  background: rgba(250, 247, 242, 0.6);
  border: 1px solid rgba(60, 50, 35, 0.12);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #2a221a;
}
.upload-specs summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
  outline: none;
  color: #0A1226;
  list-style: revert;
}
.upload-specs summary:hover { color: #E81820; }
.upload-specs ul {
  margin: 12px 0 8px;
  padding-left: 20px;
}
.upload-specs li {
  margin-bottom: 6px;
}
.upload-specs strong {
  font-weight: 600;
  color: #0A1226;
}
.upload-specs a {
  color: #E81820;
  text-decoration: underline;
}
.upload-specs-promise {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(60, 50, 35, 0.12);
  font-style: italic;
  color: #4a3f30;
  font-size: 12.5px;
}

.upload-quality {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid;
}
.upload-quality[data-level="ok"] {
  background: rgba(34, 139, 79, 0.08);
  border-color: rgba(34, 139, 79, 0.3);
  color: #154d2c;
}
.upload-quality[data-level="warn"] {
  background: rgba(232, 142, 24, 0.10);
  border-color: rgba(232, 142, 24, 0.4);
  color: #6b4310;
}
.upload-quality[data-level="error"] {
  background: rgba(232, 24, 32, 0.08);
  border-color: rgba(232, 24, 32, 0.4);
  color: #8a0e14;
}
.upload-quality-icon {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 24px;
  text-align: center;
}
.upload-quality-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.upload-quality-detail {
  opacity: 0.92;
}
.upload-quality-detail strong { font-weight: 600; }
.upload-quality-detail a { color: inherit; text-decoration: underline; }

/* ===========================================================================
   Signs365-style item card (LobbyPanel) — visible after upload
   Pattern from signs365.com designer: green/cream card with thumbnail,
   actual pixel dims, dpi tip, and a Fit / Center / Stretch toggle.
   Brand v2 palette: Signal Red #E81820, Cream #FAF7F2, Navy #0A1226.
   =========================================================================== */
.item-card {
  margin-top: 14px;
  padding: 16px 18px 18px;
  background: #F1F6EE;                /* soft mint-cream, echoes Signs365 green card */
  border: 1px solid #C8DCC0;
  border-radius: 10px;
  font-family: 'GT Helvetica','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.item-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.item-card-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #0A1226;
}
.item-card-divider { color: rgba(10,18,38,0.35); font-weight: 600; }
.item-card-status {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
}
.item-card-status.is-ok   { background: #1E7F3A; color: #fff; }
.item-card-status.is-warn { background: #C97A00; color: #fff; }
.item-card-status.is-err  { background: #C0231C; color: #fff; }

.item-card-tip {
  margin: 0 0 12px;
  font-size: 12px; line-height: 1.5;
  color: rgba(10,18,38,0.78);
}
.item-card-tip strong { font-weight: 700; color: #0A1226; }

.item-card-thumb-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.item-card-thumb {
  width: 88px; height: 88px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(10,18,38,0.12);
  border-radius: 6px;
  flex-shrink: 0;
}
.item-card-actual {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #0A1226; line-height: 1.45;
}
.item-card-actual-sub {
  display: block; margin-top: 2px;
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: rgba(10,18,38,0.62);
}

.item-card-fit-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #0A1226;
  margin-bottom: 6px;
}
.item-card-seg { width: 100%; }

.item-card-fit-hint {
  list-style: none;
  margin: 10px 0 0; padding: 0;
  font-size: 12px; line-height: 1.6;
  color: rgba(10,18,38,0.72);
}
.item-card-fit-hint li { margin: 0; }
.item-card-fit-hint strong { font-weight: 700; color: #0A1226; }

@media (max-width: 520px) {
  .item-card { padding: 14px 14px 16px; }
  .item-card-thumb { width: 72px; height: 72px; }
}