/* Survey builder styles, ported from the SurveySwap builder. Loaded after the
   app's Tailwind build by layouts/builder.html.erb. */
@import url("/assets/survey_shared-8960da32.css");

/* ══════════════════════════════════════════════
   BUILDER TOPBAR
   ══════════════════════════════════════════════ */

.builder-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.75rem;
  background: var(--topbar-bg, color-mix(in srgb, var(--ink) 92%, transparent));
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--white-ghost);
  transition: background 350ms ease, border-color 350ms ease;
}

.builder-topbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
  line-height: 1.1;
}

.builder-topbar-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.builder-topbar-brand-wordmark {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}

.builder-topbar-badge {
  font-family: var(--survey-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
}

.builder-topbar-tagline {
  display: none;
  font-family: var(--survey-body-font);
  font-size: 11px;
  font-weight: 400;
  color: var(--white-dim);
  letter-spacing: 0.01em;
}

/* Tagline is extra context; keep it off tighter editor widths. */
@media (min-width: 1200px) {
  .builder-topbar-tagline { display: inline; }
}

.builder-topbar-center {
  display: none;
}

@media (min-width: 768px) {
  .builder-topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 0;
  }
}

.builder-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

/* Buttons */
.builder-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--survey-body-font);
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms ease;
  border: 1px solid var(--white-ghost);
}

.builder-btn--secondary {
  background: var(--card);
  color: var(--white-dim);
}

.builder-btn--secondary:hover {
  border-color: var(--white-faint);
  color: var(--white);
}

.builder-btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 600;
}

.builder-btn--primary:hover {
  box-shadow: 0 0 24px var(--accent-dim);
  transform: translateY(-1px);
}

.builder-btn--topbar-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.builder-btn--topbar-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  transform: translateY(-1px);
}

.builder-topbar-cta {
  white-space: nowrap;
}

/* Theme switcher in topbar */
.builder-theme-switcher {
  position: relative;
}

.builder-theme-switcher--hidden {
  display: none;
}

.builder-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent-dim);
}

.builder-theme-label { display: none; }

@media (min-width: 1200px) {
  .builder-theme-label { display: inline; }
}

@media (max-width: 1120px) {
  .builder-topbar-preview { display: none; }
}

@media (max-width: 860px) {
  .builder-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .builder-topbar-center {
    display: none;
  }
}

.builder-theme-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  z-index: 200;
}

.builder-theme-switcher.open .builder-theme-menu {
  display: block;
}

.builder-account-menu {
  position: relative;
  flex-shrink: 0;
}

.builder-account-menu-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--white);
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.builder-account-menu-toggle:hover {
  border-color: var(--white-faint);
  transform: translateY(-1px);
}

.builder-account-menu-toggle span {
  width: 17px;
  height: 2px;
  display: block;
  background: currentColor;
  border-radius: 999px;
}

.builder-account-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  z-index: 220;
}

.builder-account-menu-dropdown.hidden {
  display: none;
}

.builder-account-menu-item {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  color: var(--white);
  font-family: var(--survey-body-font);
  font-size: 17px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  background: var(--card);
  border: 0;
  border-bottom: 1px solid var(--white-ghost);
  cursor: pointer;
}

.builder-account-menu-item:last-child,
.builder-account-menu-form:last-child .builder-account-menu-item {
  border-bottom: 0;
}

.builder-account-menu-item:hover,
.builder-account-menu-item:focus {
  color: var(--accent-text);
  background: var(--accent);
  outline: none;
}

.builder-account-menu-form {
  margin: 0;
}

.builder-account-menu-item--button {
  appearance: none;
}

/* Stats */
.builder-stats {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  display: none;
}

@media (min-width: 768px) {
  .builder-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

.builder-stat {
  font-size: 13px;
  color: var(--white-faint);
}

.builder-stat strong {
  font-weight: 600;
  color: var(--white-dim);
}

/* Save indicator */
.builder-save-indicator {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--white-dim);
}

@media (min-width: 768px) {
  .builder-save-indicator {
    display: none;
  }
}

/* ══════════════════════════════════════════════
   BUILDER BODY (extends renderer body)
   ══════════════════════════════════════════════ */

.survey-builder-body {
  --white-dim: color-mix(in srgb, var(--white) 76%, transparent);
  --white-faint: color-mix(in srgb, var(--white) 38%, transparent);
  --white-ghost: color-mix(in srgb, var(--white) 12%, transparent);
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  font-family: var(--survey-body-font);
  background: var(--ink);
  color: var(--white);
  transition: background 0.6s cubic-bezier(0.22,1,0.36,1), color 0.4s ease;
}

/* ══════════════════════════════════════════════
   TYPE CHIPS
   ══════════════════════════════════════════════ */

.builder-type-chips {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.builder-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--white-ghost);
  background: var(--white-ghost);
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.builder-type-chip:hover {
  background: var(--white-faint);
  color: var(--white);
}

.builder-type-chip--active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.builder-type-chip--active:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

.builder-type-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* More dropdown */
.builder-type-more {
  position: relative;
}

.builder-type-more summary {
  list-style: none;
}

.builder-type-more summary::-webkit-details-marker {
  display: none;
}

.builder-type-more-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  min-width: 160px;
}

/* ══════════════════════════════════════════════
   MINIMAP (floating bottom-right)
   ══════════════════════════════════════════════ */

.builder-minimap {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 55;
  width: 220px;
  max-height: 50vh;
  overflow-y: auto;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  border: 1px solid var(--white-ghost);
  border-radius: 16px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.builder-minimap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem 0.5rem;
  border-bottom: 1px solid var(--white-ghost);
  margin-bottom: 0.25rem;
}

.builder-minimap-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.builder-minimap-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.builder-minimap-item:hover {
  background: var(--white-ghost);
}

.builder-minimap-item--active {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.builder-minimap-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.builder-minimap-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.builder-minimap-type-icon {
  flex-shrink: 0;
  color: var(--white-dim);
}

.builder-minimap-type-icon svg {
  width: 14px;
  height: 14px;
}

/* Drag handle */
.minimap-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  padding: 0 2px;
}

.builder-minimap-item:hover .minimap-drag-handle {
  opacity: 0.6;
}

.minimap-drag-handle:hover {
  opacity: 1 !important;
}

/* SortableJS ghost (item being dragged) */
.minimap-ghost {
  opacity: 0.4;
  background: var(--accent-dim);
  border-color: var(--accent);
  border-radius: 10px;
}

/* Collapsed pill */
.builder-minimap-collapsed-pill {
  font-size: 12px;
  font-weight: 500;
  color: var(--white-dim);
  text-align: center;
  padding: 0.5rem;
}

.builder-minimap-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border-radius: 10px;
  border: 1px dashed var(--white-faint);
  font-size: 12px;
  font-weight: 500;
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.15s ease;
}

.builder-minimap-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ══════════════════════════════════════════════
   SIDE PANEL
   ══════════════════════════════════════════════ */

:root {
  --builder-app-shell-bottom: 94px;
}

@media (max-width: 767px) {
  :root {
    --builder-app-shell-bottom: 78px;
  }
}

.builder-side-panel-strip {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 55;
  transform: translateY(-50%);
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--white-ghost);
  border-right: none;
  border-radius: 12px 0 0 12px;
}

.builder-side-panel-strip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: none;
}

.builder-side-panel-strip-btn:hover {
  background: var(--white-ghost);
  color: var(--white);
}

.builder-side-panel {
  position: fixed;
  top: var(--builder-app-shell-bottom);
  right: 0;
  z-index: 56;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: calc(100vh - var(--builder-app-shell-bottom));
  height: calc(100dvh - var(--builder-app-shell-bottom));
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(16px);
  border-left: 1px solid var(--white-ghost);
  padding: 1.5rem;
  overflow-y: hidden;
  transform: translateX(0);
  transition: transform 200ms ease-out;
}

.builder-side-panel--collapsed {
  transform: translateX(100%);
}

.builder-side-panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  background: color-mix(in srgb, var(--ink) 90%, transparent);
}

.builder-side-panel-content {
  min-height: 0;
  overflow-y: auto;
}

.builder-side-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.builder-side-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: none;
}

.builder-side-panel-close:hover {
  background: var(--white-ghost);
  color: var(--white);
}

.builder-side-panel-section {
  margin-bottom: 1.25rem;
}

.builder-side-panel-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.5rem;
}

.builder-side-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.builder-side-panel-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}

.builder-side-panel-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--white-ghost);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.builder-side-panel-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--white-dim);
  transition: transform 0.2s ease, background 0.2s ease;
}

.builder-side-panel-switch--on {
  background: var(--accent);
}

.builder-side-panel-switch--on::after {
  transform: translateX(16px);
  background: var(--accent-text);
}

.builder-side-panel-switch-label {
  display: inline-flex;
  cursor: pointer;
}

/* Screen-reader only utility for the hidden checkbox */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.builder-side-panel-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  background: var(--white-ghost);
  border: 1px solid var(--white-ghost);
  border-radius: 8px;
  color: var(--white);
  outline: none;
  transition: border-color 0.15s ease;
}

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

/* ══════════════════════════════════════════════
   EDITABLE FIELD AFFORDANCES
   ══════════════════════════════════════════════ */

/* Wrapper for any editable field — shows edit icon + border on hover */
.editable-field {
  position: relative;
  border: 1px dashed transparent;
  border-radius: 6px;
  padding: 2px 4px;
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: text;
}

.editable-field:hover {
  border-color: var(--white-faint);
  background: var(--white-ghost);
}

.editable-field:focus-within,
.editable-field:focus {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  outline: none;
}

/* Pencil icon that appears on hover */
.editable-field::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 6px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.editable-field:hover::after {
  opacity: 1;
}

.editable-field:focus-within::after,
.editable-field:focus::after {
  opacity: 0;
}

/* Ghost placeholder for empty optional fields */
.editable-field-placeholder {
  color: var(--white-faint);
  font-style: italic;
}

/* Editable choice items — subtle hover tint */
.editable-choice {
  transition: background 0.15s ease, border-color 0.15s ease;
}

.editable-choice:hover {
  background: var(--white-faint) !important;
}

/* ══════════════════════════════════════════════
   BUILDER SLIDE OVERRIDES
   ══════════════════════════════════════════════ */

/* Builder slides: offset top to account for fixed topbar (48px) + progress bar (8px).
   The slide is position:absolute inset:0 with justify-content:center, so we shift the
   top edge down so the centered content sits in the visible area.
   NO overflow-y:auto — that steals wheel events from slide navigation. */
.survey-builder-body .slide {
  top: 56px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  overflow: hidden;
}

/* Compact choices when there are many — scale down card items in builder */
.survey-builder-body .card-stack-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.survey-builder-body .card-stack-item .card-stack-key {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.7rem;
}

/* Choices container: cap height and scroll internally if needed */
.survey-builder-body .flex.flex-col.gap-2 {
  max-height: 50vh;
  overflow-y: auto;
  gap: 0.375rem;
}

.builder-delete-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--white-ghost);
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.builder-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Add question slide */
.builder-add-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.builder-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 24px;
  border: 2px dashed var(--white-faint);
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  background: none;
}

.builder-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.builder-add-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--white-dim);
}

/* ══════════════════════════════════════════════
   PAGE-BASED BUILDER LAYOUT
   ══════════════════════════════════════════════ */

.builder-canvas {
  position: relative;
  min-height: 100vh;
  background: var(--ink);
}

.builder-editor {
  padding-top: 0; /* the layout already spaces content below the fixed top bar */
  padding-bottom: 8rem;
  min-height: 100vh;
  overflow-y: auto;
}

.builder-editor-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

/* Survey intro card */
.builder-intro-card {
  margin-bottom: 2rem;
  padding: 2rem 2.5rem;
  background: var(--card);
  border: 1.5px solid var(--white-ghost);
  border-radius: 20px;
  transition: border-color 300ms ease;
}

.builder-intro-card:hover {
  border-color: var(--white-faint);
}

.builder-intro-eyebrow {
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.builder-intro-title,
.builder-intro-card .builder-intro-title.editable-text {
  font-family: var(--survey-body-font);
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  display: block;
}

.builder-intro-subtitle,
.builder-intro-card .builder-intro-subtitle.editable-text {
  font-family: var(--survey-body-font);
  font-size: 15px;
  font-weight: 300;
  color: var(--white-dim);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
  display: block;
  min-height: 1.5em;
}

/* Placeholder for empty contenteditable elements — uses data-placeholder attribute */
[contenteditable="true"][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--white-faint);
  pointer-events: none;
}
[contenteditable="true"][data-placeholder]:focus:empty::before {
  opacity: 0.5;
}

.builder-intro-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 14px;
  color: var(--white-dim);
}

.builder-intro-sep {
  color: var(--white-faint);
}

/* Page block */
.page-block {
  position: relative;
  margin-bottom: 2rem;
  background: var(--card);
  border: 1.5px solid var(--white-ghost);
  border-radius: 20px;
  padding: 2.25rem 2.5rem 2rem;
  transition: border-color 300ms ease;
}

.page-block:hover {
  border-color: var(--white-faint);
}

@media (max-width: 767px) {
  .page-block {
    padding: 1.5rem 1.25rem;
  }
}

/* Page toolbar (hover-reveal) */
.page-tb {
  position: absolute;
  top: -1rem;
  left: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}

.page-block:hover .page-tb {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.page-tb > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--tb-bg, var(--card));
  border: 1px solid var(--tb-border, var(--white-ghost));
  border-radius: 10px;
  padding: 0.375rem 0.875rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Page header */
.page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--white-ghost);
}

/* Question block */
.q-block {
  position: relative;
  padding-top: 1.75rem;
  padding-bottom: 1.25rem;
}

.q-block:not(:first-child) {
  border-top: 1px solid var(--white-ghost);
}

/* Always-visible drag rail on the left edge of each q-block */
.q-drag-rail {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-faint);
  font-size: 14px;
  letter-spacing: 2px;
  user-select: none;
  cursor: grab;
  border-radius: 6px;
  opacity: 0.45;
  transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}

.q-drag-rail:hover {
  opacity: 1;
  color: var(--white-dim);
  background: var(--white-ghost);
}

.q-drag-rail:active {
  cursor: grabbing;
}

/* Question toolbar (hover-reveal) */
.q-tb {
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  z-index: 15;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}

.q-block:hover .q-tb {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.q-tb > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  background: var(--tb-bg, var(--card));
  border: 1px solid var(--tb-border, var(--white-ghost));
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Question inner — hover highlight */
.q-inner {
  transition: all 200ms ease;
  border-radius: 12px;
  margin: 0 -1rem;
  padding: 0 1rem;
}

.q-block:hover .q-inner {
  background: var(--white-ghost);
}

/* Drag handle */
.drag-handle {
  cursor: grab;
  color: var(--white-faint);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 0.25rem 0.375rem;
  user-select: none;
  transition: color 150ms ease;
}

.drag-handle:hover {
  color: var(--white-dim);
}

.drag-handle:active {
  cursor: grabbing;
}

.page-block.dragging,
.q-block.dragging {
  opacity: 0.4;
}

/* Type dropdown */
.type-sw {
  position: relative;
}

.type-dd {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 200px;
  background: var(--tb-bg, var(--card));
  border: 1px solid var(--tb-border, var(--white-ghost));
  border-radius: 12px;
  padding: 0.25rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  z-index: 50;
}

.type-sw.open .type-dd {
  display: block;
}

.type-dd button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 13px;
  color: var(--white-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
}

.type-dd button:hover {
  background: var(--white-ghost);
}

.type-dd button.active {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Required toggle in toolbar */
.req-toggle {
  font-size: 12px;
  font-weight: 500;
  padding: 0.125rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--white-ghost);
  background: none;
  color: var(--white-faint);
  cursor: pointer;
  transition: all 150ms ease;
}

.req-toggle:hover {
  border-color: var(--white-faint);
  color: var(--white-dim);
}

.req-toggle.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* Toolbar buttons */
.tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--white-faint);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
}

.tb-btn:hover {
  background: var(--white-ghost);
  color: var(--white-dim);
}

.tb-btn.del:hover {
  background: var(--warm-dim);
  color: var(--warm);
}

.tb-btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Pills / options */
.pill-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--card-hover);
  border: 1px solid var(--white-ghost);
  border-radius: 9999px;
  transition: all 200ms ease;
}

.pill-wrap:hover {
  border-color: var(--white-faint);
}

.pill-wrap:focus-within {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.builder-choice-drag-handle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white-faint);
  cursor: grab;
}

.builder-choice-drag-handle:active {
  cursor: grabbing;
}

.builder-choice-drag-handle--pill {
  margin-left: 0.75rem;
}

.builder-choice-ghost {
  opacity: 0.45;
}

.pill-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--warm);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.pill-wrap:hover .pill-del {
  display: flex;
}

/* Visual grid card delete */
.vg-card {
  position: relative;
}

.vg-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--warm);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
}

.vg-card:hover .vg-del {
  display: flex;
}

/* Add option / Add card buttons */
.add-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 1.25rem;
  border: 1.5px dashed var(--white-ghost);
  border-radius: 9999px;
  font-size: 14px;
  color: var(--white-faint);
  background: none;
  cursor: pointer;
  transition: all 200ms ease;
}

.add-option-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* ---------------------------------------------------------------------------
   Builder card stack — shared layout for checkbox / ranking / dropdown
   --------------------------------------------------------------------------- */
.builder-card-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.builder-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--white-ghost);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 150ms ease, border-color 150ms ease;
  position: relative;
}

.builder-card:hover {
  background: var(--white-faint-bg, rgba(255,255,255,0.07));
  border-color: var(--white-ghost);
}

.builder-card-key {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white-faint);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--survey-body-font);
}

.builder-card-key--square {
  border-radius: 6px;
}

.builder-card-key--number {
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
}

.builder-card-bullet {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: var(--white-faint);
  font-size: 18px;
  line-height: 1;
}

.builder-card-text {
  flex: 1;
  color: var(--white);
  font-size: 15px;
  outline: none;
  cursor: text;
  min-width: 40px;
}

.builder-card-grip {
  color: var(--white-faint);
  display: inline-flex;
  align-items: center;
}

.builder-card-del {
  background: none;
  border: none;
  color: var(--white-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease;
}

.builder-card:hover .builder-card-del {
  opacity: 1;
}

.builder-card-del:hover {
  color: #ec4646;
}

.builder-card--add {
  background: transparent;
  border: 1.5px dashed var(--white-ghost);
  cursor: pointer;
  color: var(--white-faint);
  text-align: left;
  font-family: var(--survey-body-font);
  font-size: 14px;
}

.builder-card--add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.builder-card--add .builder-card-key {
  background: transparent;
  border: 1.5px dashed currentColor;
  color: inherit;
}

.builder-card--add .builder-card-text {
  color: inherit;
}

/* Generic text-input preview (date, number, email) */
.builder-input-preview {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: var(--white-ghost);
  border: 1.5px dashed var(--white-ghost);
  border-radius: 12px;
  color: var(--white-faint);
  font-size: 14px;
  font-style: italic;
}

.builder-input-preview svg {
  color: var(--white-dim);
  flex-shrink: 0;
}

.builder-input-preview-label {
  color: var(--white-dim);
}

/* NPS preview */
.builder-nps {
  padding: 0.5rem 0;
}

.builder-nps-scale {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.builder-nps-dot {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white-ghost);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--survey-body-font);
}

.builder-nps-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  font-size: 12px;
  color: var(--white-faint);
}

/* Matrix preview (builder) */
.builder-matrix-wrap {
  overflow-x: auto;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
}

.builder-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.builder-matrix th,
.builder-matrix td {
  padding: 0.5rem 0.625rem;
  text-align: left;
  color: var(--white);
}

.builder-matrix-corner {
  width: 1%;
  border-bottom: 1px solid var(--white-ghost);
}

.builder-matrix-th {
  text-align: center;
  font-weight: 500;
  color: var(--white-dim);
  border-bottom: 1px solid var(--white-ghost);
  position: relative;
  white-space: nowrap;
}

.builder-matrix-editable {
  outline: none;
  cursor: text;
  min-width: 40px;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 150ms ease;
}

.builder-matrix-editable:hover,
.builder-matrix-editable:focus {
  background: var(--white-ghost);
}

.builder-matrix-del {
  background: none;
  border: none;
  color: var(--white-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease;
}

.builder-matrix-th:hover .builder-matrix-del,
.builder-matrix-row-label:hover .builder-matrix-del {
  opacity: 1;
}

.builder-matrix-del:hover {
  color: #ec4646;
}

.builder-matrix-row-label {
  font-weight: 500;
  color: var(--white);
  border-bottom: 1px solid var(--white-ghost);
  min-width: 14rem;
  line-height: 1.35;
  white-space: normal;
}

.builder-matrix-editable--row {
  line-height: 1.35;
}

.builder-matrix-cell {
  text-align: center;
  border-bottom: 1px solid var(--white-ghost);
  vertical-align: middle;
}

.builder-matrix-radio {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--white-faint);
  opacity: 0.6;
}

.builder-matrix-cell-empty {
  border-bottom: 1px solid var(--white-ghost);
}

.builder-matrix-add-col button,
.builder-matrix-add-row button {
  background: transparent;
  border: 1.5px dashed var(--white-ghost);
  border-radius: 8px;
  color: var(--white-faint);
  font-size: 12px;
  font-family: var(--survey-body-font);
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.builder-matrix-add-col button:hover,
.builder-matrix-add-row button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.builder-matrix-add-row {
  text-align: center;
  padding-top: 0.75rem;
}

/* Dropdown label — just an indicator, not a preview */
.builder-dropdown-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--white-ghost);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white-faint);
  margin-bottom: 0.625rem;
}

/* Tagbox — chips */
.builder-tag-hint {
  font-size: 12px;
  color: var(--white-faint);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.builder-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.builder-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: var(--white-ghost);
  border: 1px solid var(--white-ghost);
  border-radius: 9999px;
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  transition: all 150ms ease;
}

.builder-tag:hover {
  border-color: var(--accent-dim);
}

.builder-tag-text {
  outline: none;
  cursor: text;
  min-width: 20px;
}

.builder-tag-del {
  background: none;
  border: none;
  color: var(--white-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease;
}

.builder-tag:hover .builder-tag-del {
  opacity: 1;
}

.builder-tag-del:hover {
  color: #ec4646;
}

.builder-tag--add {
  background: transparent;
  border: 1.5px dashed var(--white-ghost);
  color: var(--white-faint);
  cursor: pointer;
  font-family: var(--survey-body-font);
}

.builder-tag--add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Add question button (in page) */
.add-question-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.875rem;
  border: 1.5px dashed var(--white-ghost);
  border-radius: 14px;
  font-family: var(--survey-body-font);
  font-size: 14px;
  color: var(--white-faint);
  background: none;
  cursor: pointer;
  transition: all 250ms ease-out;
}

.add-question-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Editable completion page */
.builder-end-page {
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: 1.5px solid var(--accent-dim);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.builder-end-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.builder-end-page-eyebrow {
  color: var(--accent);
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.builder-end-page-edit-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--white-ghost);
  border-radius: 999px;
  background: var(--white-ghost);
  color: var(--white-faint);
  font-family: var(--survey-body-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.builder-end-page-content {
  min-height: 120px;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px dashed var(--white-ghost);
  background: color-mix(in srgb, var(--white) 5%, transparent);
  color: var(--white);
  outline: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.builder-statement-editor {
  display: block;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--white-ghost);
  border-radius: 12px;
  background: var(--white-ghost);
  color: var(--white);
  font-family: var(--survey-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  white-space: pre-wrap;
}

.builder-statement-editor:focus {
  border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--white) 9%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}

.builder-rich-text-editable p,
.builder-rich-text-editable div {
  margin: 0 0 1em;
}

.builder-rich-text-editable p:last-child,
.builder-rich-text-editable div:last-child {
  margin-bottom: 0;
}

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

.builder-question-rich-title {
  min-width: 0;
  flex: 1;
}

.builder-question-rich-title p,
.builder-question-rich-description p {
  white-space: pre-wrap;
}

.builder-question-rich-title:focus,
.builder-question-rich-description:focus {
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.builder-end-page-content:focus {
  background: var(--white-ghost);
  border-color: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}

.builder-end-page-content:empty::before {
  content: "Thank you for completing this survey!";
  color: var(--white-faint);
}

.builder-end-page-content > :first-child {
  margin-top: 0;
}

.builder-end-page-content > :last-child {
  margin-bottom: 0;
}

.builder-end-page-content h1,
.builder-end-page-content h2,
.builder-end-page-content h3 {
  margin: 0 0 0.75rem;
  color: var(--white);
  font-family: var(--survey-body-font);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.builder-end-page-content p,
.builder-end-page-content li {
  color: var(--white-dim);
  font-family: var(--survey-body-font);
  font-size: 16px;
  line-height: 1.55;
}

/* Add new page button */
.builder-add-page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.25rem;
  margin-top: 0.5rem;
  border: 2px dashed var(--white-ghost);
  border-radius: 20px;
  font-family: var(--survey-body-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--white-faint);
  background: none;
  cursor: pointer;
  transition: all 250ms ease-out;
}

.builder-add-page:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.builder-add-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 20px;
  transition: all 200ms ease;
}

.builder-add-page:hover .builder-add-page-icon {
  background: var(--accent);
  color: var(--accent-text);
}

/* Animated question type picker */
.new-question-wrap {
  position: relative;
}

.new-question-menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.625rem);
  z-index: 80;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  width: min(420px, calc(100vw - 2rem));
  max-height: min(440px, 70vh);
  overflow-y: auto;
  padding: 0.625rem;
  transform: translateX(-50%);
  background: var(--tb-bg, var(--card));
  border: 1px solid var(--tb-border, var(--white-ghost));
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.24);
  backdrop-filter: blur(16px);
}

.new-question-wrap--open .new-question-menu {
  display: grid;
  animation: builder-question-type-pop 180ms cubic-bezier(0.22,1,0.36,1);
}

.new-question-wrap--minimap .new-question-menu {
  left: auto;
  right: 0;
  transform: none;
  width: min(360px, calc(100vw - 2rem));
}

.new-question-type {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--white-dim);
  font-family: var(--survey-body-font);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.new-question-type:hover,
.new-question-type:focus-visible {
  background: var(--white-ghost);
  border-color: var(--white-faint);
  color: var(--white);
  outline: none;
}

.new-question-type--layout {
  grid-column: 1 / -1;
  background: var(--accent-dim);
  color: var(--accent);
}

.new-question-ending-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.375rem;
  margin-top: 0.25rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--white-ghost);
}

.new-question-ending-heading {
  padding: 0 0.25rem 0.125rem;
  color: var(--white-faint);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.new-question-type--ending {
  background: var(--card-soft, var(--white-ghost));
}

.new-question-type--ending.new-question-type--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.new-question-type--ending:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  color: var(--white-faint);
}

.new-question-type--ending:disabled:hover {
  background: transparent;
  border-color: transparent;
}

.new-question-type-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.new-question-type-status {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

.new-question-ending-remove {
  justify-self: start;
  border: 0;
  padding: 0.25rem 0.375rem;
  background: transparent;
  color: var(--white-faint);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.new-question-ending-remove:hover,
.new-question-ending-remove:focus-visible {
  color: var(--accent);
  outline: none;
}

.new-question-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--white-ghost);
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}

@keyframes builder-question-type-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.new-question-wrap--minimap.new-question-wrap--open .new-question-menu {
  animation-name: builder-question-type-pop-minimap;
}

@keyframes builder-question-type-pop-minimap {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .new-question-menu {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-question-wrap--open .new-question-menu {
    animation: none;
  }
}

/* Page break separator */
.page-break {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 1.25rem;
  padding: 0;
}

.page-break-line {
  flex: 1;
  height: 1px;
  background: var(--white-ghost);
}

.page-break-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-faint);
}

/* Editable text states */
.editable-text {
  outline: none;
  cursor: text;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background 150ms ease, box-shadow 150ms ease;
  min-width: 40px;
  display: inline-block;
}

.editable-text:hover {
  background: var(--white-ghost);
}

.editable-text:focus {
  background: var(--white-ghost);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* Selection toolbar shared by question titles/descriptions, Statements,
   the Content end page, and Workflow text endings. It is fixed so it stays
   immediately under the browser selection even inside a scrolling editor. */
.builder-rich-text-toolbar {
  position: fixed;
  z-index: 250;
  min-width: 116px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  background: #fff;
  color: #57534e;
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.16);
}

.builder-rich-text-toolbar[hidden],
.builder-rich-text-controls[hidden],
.builder-rich-text-link-form[hidden] {
  display: none;
}

.builder-rich-text-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
}

.builder-rich-text-button.ss-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 6px;
  color: #57534e;
}

.builder-rich-text-button.ss-button:hover,
.builder-rich-text-button.ss-button:focus-visible {
  transform: none;
  background: #f5f5f4;
  color: #1c1917;
}

.builder-rich-text-button--bold strong {
  font-size: 17px;
}

.builder-rich-text-button--italic em {
  font-family: Georgia, serif;
  font-size: 18px;
}

.builder-rich-text-link-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(360px, calc(100vw - 16px));
  padding: 0.45rem;
}

.builder-rich-text-link-form input {
  min-width: 0;
  flex: 1;
  padding: 0.6rem 0.65rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #fff;
  color: #1c1917;
  font-family: var(--survey-body-font);
  font-size: 13px;
  line-height: 1.2;
  outline: none;
}

.builder-rich-text-link-form input:focus {
  border-color: #3b40c4;
  box-shadow: 0 0 0 3px rgba(59, 64, 196, 0.14);
}

.builder-rich-text-link-form input[aria-invalid="true"] {
  border-color: #dc2626;
}

.builder-rich-text-link-apply.ss-button {
  min-height: 36px;
}

/* Rich heading em styling */
.rich-heading em {
  color: var(--accent);
  font-style: italic;
}

/* Accent bar */
.accent-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.375rem;
  margin-bottom: 0.25rem;
}

.accent-bar-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--tb-bg, var(--card));
  border: 1px solid var(--tb-border, var(--white-ghost));
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--white-faint);
  cursor: default;
  opacity: 0.5;
  transition: all 150ms ease;
}

.accent-bar-btn.ready {
  opacity: 1;
  cursor: pointer;
  color: var(--white-dim);
}

.accent-bar-btn.ready:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.accent-bar-icon {
  font-family: var(--survey-body-font);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
}

.accent-bar-preview {
  font-size: 11px;
  color: var(--white-faint);
  opacity: 0.4;
}

/* Matrix table styles */
.mat-table {
  width: 100%;
  border-collapse: collapse;
}

.mat-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white-faint);
  padding: 0.5rem 0.5rem 0.625rem;
  text-align: center;
  vertical-align: bottom;
  position: relative;
}

.mat-table td {
  border-top: 1px solid var(--white-ghost);
  padding: 0.625rem 0.5rem;
  text-align: center;
}

.mat-table td:first-child {
  text-align: left;
  font-size: 14px;
  color: var(--white);
  padding-left: 0.75rem;
  position: relative;
}

.mat-radio {
  width: 28px;
  height: 28px;
  border: 2px solid var(--white-ghost);
  border-radius: 50%;
  margin: 0 auto;
  transition: border-color 150ms ease;
}

.mat-radio:hover {
  border-color: var(--white-faint);
}

.mat-add-col,
.mat-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px dashed var(--white-ghost);
  border-radius: 50%;
  color: var(--white-faint);
  background: none;
  cursor: pointer;
  transition: all 200ms ease;
}

.mat-add-col:hover,
.mat-add-row:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Matrix delete badges */
.mat-cdel,
.mat-rdel {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--warm);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
}

.mat-ch:hover .mat-cdel,
.mat-rl:hover .mat-rdel {
  display: flex;
}

/* Slider preview */
.slider-preview {
  padding: 0.5rem 0;
}

.slider-value {
  text-align: center;
  font-family: var(--survey-body-font);
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.slider-track {
  position: relative;
  height: 6px;
  background: var(--white-ghost);
  border-radius: 3px;
}

.slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--warm), var(--accent));
}

.slider-thumb {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--accent-dim);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  font-size: 12px;
  color: var(--white-faint);
}

/* Binary cards */
.binary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 639px) {
  .binary-grid {
    grid-template-columns: 1fr;
  }
}

.binary-card {
  background: var(--white-ghost);
  border: 1.5px solid var(--white-ghost);
  border-radius: 16px;
  padding: 1rem 1rem 1.25rem;
  text-align: center;
  transition: border-color 200ms ease;
}

.binary-card:hover {
  border-color: var(--white-faint);
}

.binary-card.yes:hover {
  border-color: var(--accent);
}

.binary-card.no:hover {
  border-color: var(--warm);
}

.binary-emoji {
  font-size: 40px;
  margin-bottom: 0.625rem;
}

.binary-title {
  font-family: var(--survey-body-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.binary-sub {
  font-size: 12px;
  color: var(--white-faint);
}

/* Visual grid */
.visual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}

@media (max-width: 639px) {
  .visual-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vg-card {
  background: var(--white-ghost);
  border: 1.5px solid var(--white-ghost);
  border-radius: 14px;
  padding: 0.75rem 0.75rem 0.875rem;
  text-align: center;
  transition: border-color 200ms ease;
}

.vg-card:hover {
  border-color: var(--white-faint);
}

.vg-emoji {
  font-size: 32px;
  margin-bottom: 0.5rem;
}

.vg-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.vg-sub {
  font-size: 11px;
  color: var(--white-faint);
  margin-top: 0.125rem;
}

/* Short text input preview */
.text-preview {
  border-bottom: 1.5px solid var(--white-ghost);
  padding: 0.75rem 0;
}

.text-preview-placeholder {
  font-size: 16px;
  color: var(--white-faint);
  font-style: italic;
}

/* Long text (textarea) preview */
.textarea-preview {
  background: var(--white-ghost);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  min-height: 100px;
}

.textarea-preview-placeholder {
  font-size: 15px;
  color: var(--white-faint);
  font-style: italic;
}

/* ══════════════════════════════════════════════
   CHOICE SCREEN (new survey / templates)
   ══════════════════════════════════════════════ */

.builder-choice-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  padding-top: calc(60px + 3rem);
  padding-bottom: 4rem;
}

.builder-choice-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.builder-choice-header h1 {
  font-family: var(--survey-body-font);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.builder-choice-header p {
  font-size: 1.125rem;
  color: var(--white-dim);
}

.builder-choice-header-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.builder-choice-overview-link {
  min-height: 44px;
}

/* Primary row: scratch + AI */
.builder-choice-primary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  width: 100%;
  max-width: 640px;
  margin-bottom: 3rem;
}

.builder-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 16px;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  min-height: 200px;
}

.builder-choice-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.3);
}

.builder-choice-icon {
  font-size: 2.5rem;
  margin-bottom: 0.875rem;
}

.builder-choice-card h2 {
  font-family: var(--survey-body-font);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.375rem;
}

.builder-choice-card p {
  font-size: 0.8125rem;
  color: var(--white-dim);
  line-height: 1.5;
}

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

.builder-choice-badge {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  background: var(--accent);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inline templates section */
.builder-templates-inline {
  width: 100%;
  max-width: 860px;
}

.builder-templates-inline-label {
  font-family: var(--survey-body-font);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white-dim);
  text-align: center;
  margin-bottom: 2rem;
}

.builder-templates-inline-category {
  margin-bottom: 1.75rem;
}

.builder-templates-inline-category-name {
  display: block;
  font-family: var(--survey-body-font);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  margin-bottom: 0.75rem;
}

.builder-templates-inline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}

@media (max-width: 700px) {
  .builder-choice-primary {
    grid-template-columns: 1fr;
  }

  .builder-templates-inline-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════
   TEMPLATES SCREEN
   ══════════════════════════════════════════════ */

.builder-templates-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  padding-top: calc(60px + 2rem);
}

.builder-templates-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  width: 100%;
  max-width: 860px;
}

.builder-templates-back {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--white-dim);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 150ms ease;
}

.builder-templates-back:hover {
  color: var(--white);
}

.builder-templates-header h1 {
  font-family: var(--survey-body-font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.builder-templates-header p {
  font-size: 1rem;
  color: var(--white-dim);
}

.builder-templates-categories {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.builder-templates-category-label {
  font-family: var(--survey-body-font);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white-dim);
  margin-bottom: 1rem;
}

.builder-templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.builder-template-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  cursor: pointer;
  transition: all 200ms ease;
  text-align: left;
  color: inherit;
  width: 100%;
}

.builder-template-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.builder-template-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.builder-template-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.builder-template-body h4 {
  font-family: var(--survey-body-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.builder-template-body p {
  font-size: 0.8125rem;
  color: var(--white-dim);
  line-height: 1.4;
  margin: 0;
}

.builder-template-meta {
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: 0.25rem;
}

@media (max-width: 700px) {
  .builder-templates-grid {
    grid-template-columns: 1fr;
  }

  .builder-templates-back {
    position: static;
    display: block;
    margin-bottom: 1rem;
    text-align: left;
  }
}

/* ══════════════════════════════════════════════
   AI CREATE SCREEN
   ══════════════════════════════════════════════ */

.builder-ai-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  padding-top: calc(60px + 2rem);
  background: var(--ink);
}

.builder-ai-container {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.builder-ai-header {
  text-align: center;
  margin-bottom: 2rem;
}

.builder-ai-header h1 {
  font-family: var(--survey-body-font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.builder-ai-header p {
  color: var(--white-dim);
}

.builder-ai-messages {
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.builder-ai-message {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  max-width: 85%;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.builder-ai-message--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-text);
}

.builder-ai-message--assistant {
  align-self: flex-start;
  background: var(--white-ghost);
  color: var(--white);
}

.builder-ai-input-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .builder-ai-input-area {
    flex-direction: row;
    align-items: flex-start;
  }
}

.builder-ai-input-area textarea {
  flex: 1;
  min-height: 80px;
  resize: none;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  color: var(--white);
  font-family: var(--survey-body-font);
}

.builder-ai-input-area textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.builder-ai-input-area textarea::placeholder {
  color: var(--white-dim);
}

.builder-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  color: var(--white-dim);
}

.builder-ai-loading.hidden {
  display: none;
}

.builder-ai-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--white-ghost);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.builder-ai-back {
  margin-top: 2rem;
  color: var(--white-dim);
  text-decoration: none;
  font-size: 0.875rem;
}

.builder-ai-back:hover {
  color: var(--white);
}

/* ══════════════════════════════════════════════
   LOGIC MAP — WORKFLOW VIEW (MOCKUP)
   Static ERB/CSS preview. Real canvas ships later
   as a React Flow island — see
   docs/superpowers/plans/2026-04-15-survey-builder-logic-maps.md
   ══════════════════════════════════════════════ */

/* Workflow pane shell */
.builder-workflow-pane {
  position: fixed;
  inset: 96px 0 0 0;            /* below the fixed top bar */
  display: flex;
  background: var(--ink);
  z-index: 10;
}

@media (max-width: 1023px) {
  .builder-workflow-pane {
    inset: 144px 0 0 0;         /* the top bar wraps the view tabs onto a second row */
  }
}

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

/* Left rail */
.workflow-rail {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--white-ghost);
  background: color-mix(in srgb, var(--card) 60%, var(--ink) 40%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workflow-rail-tabs {
  display: flex;
  border-bottom: 1px solid var(--white-ghost);
  padding: 0.5rem;
  gap: 2px;
}

.workflow-rail-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--white-dim);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.workflow-rail-tab svg { width: 14px; height: 14px; }

.workflow-rail-tab:hover { color: var(--white); }

.workflow-rail-tab--active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.workflow-rail-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 2rem;
}

.workflow-rail-section {
  margin-bottom: 1.5rem;
}

.workflow-rail-section-label {
  font-family: var(--survey-body-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 0.6rem;
}

.workflow-rail-empty {
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.5;
  padding: 0.8rem;
  background: var(--card);
  border: 1px dashed var(--white-ghost);
  border-radius: 10px;
}

.workflow-rail-empty--compact {
  padding: 0.5rem 0.6rem;
  border: 0;
  background: transparent;
  font-size: 11px;
}

.workflow-rule {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  transition: border-color 180ms ease;
}

.workflow-rule:hover { border-color: var(--white-faint); }

.workflow-rule-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.workflow-rule-body { min-width: 0; flex: 1; }

.workflow-rule-title {
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-rule-expr code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--white-dim);
  word-break: break-all;
}

.workflow-rail-add {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--white-dim);
  background: transparent;
  border: 1px dashed var(--white-ghost);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: color 180ms ease, border-color 180ms ease;
}

.workflow-rail-add:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.workflow-rail-add-icon {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.workflow-variable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 8px;
  margin-bottom: 0.4rem;
}

.workflow-variable-name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--white);
}

.workflow-variable-value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.workflow-ending {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 8px;
}

.workflow-ending-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-dim);
}

.workflow-ending-dot--success { background: var(--accent); }

.workflow-ending-title {
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
}

/* Canvas */
.workflow-canvas {
  flex: 1;
  position: relative;
  overflow: auto;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle, var(--white-ghost) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

.workflow-canvas-inner {
  position: relative;
}

.workflow-edges {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Edge labels */
.workflow-edge-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.workflow-edge-label svg { color: var(--accent); }

.workflow-edge-label code {
  font-family: inherit;
  color: var(--white);
  white-space: nowrap;
}

/* Nodes */
.workflow-node {
  position: absolute;
  background: var(--card);
  border: 1.5px solid var(--white-ghost);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  font-family: var(--survey-body-font);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.workflow-node:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.workflow-node-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.workflow-node-type {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.workflow-node-number {
  font-family: var(--survey-body-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.workflow-node-required {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}

.workflow-node-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-node-meta {
  margin-top: 0.35rem;
  font-size: 10px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Start / end nodes */
.workflow-node--start,
.workflow-node--end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--card);
}

.workflow-node--start { border-color: var(--white-faint); }
.workflow-node--end   { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }

.workflow-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 12px var(--white-faint);
}

.workflow-node-dot--end {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-dim);
}

.workflow-node-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
}

/* Connection handles (little dots on node edges) */
.workflow-node-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.workflow-node-handle--left { left: -5px; }
.workflow-node-handle--right { right: -5px; }

/* Canvas controls (zoom in/out/fit) */
.workflow-canvas-controls {
  position: fixed;
  left: calc(280px + 1rem);
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  z-index: 5;
}

.workflow-canvas-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--white-dim);
  font-size: 16px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.workflow-canvas-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Minimap placeholder */
.workflow-canvas-minimap {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 180px;
  padding: 0.6rem 0.7rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  z-index: 5;
}

.workflow-canvas-minimap-label {
  font-family: var(--survey-body-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 0.4rem;
}

.workflow-canvas-minimap-box {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 25% 40%, var(--accent-dim) 8%, transparent 9%),
    radial-gradient(circle at 55% 50%, var(--accent-dim) 8%, transparent 9%),
    radial-gradient(circle at 80% 60%, var(--accent-dim) 8%, transparent 9%),
    var(--ink);
  border: 1px solid var(--white-ghost);
}

/* React island host. The Canvas renders into this; Phase 3 still shows
   the placeholder card defined below. */
.workflow-canvas-island {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
  justify-content: stretch;
}

.logic-map-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.logic-map-placeholder-card {
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.logic-map-placeholder-eyebrow {
  font-family: var(--survey-body-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.logic-map-placeholder-title {
  font-family: var(--survey-body-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.5rem;
}

.logic-map-placeholder-body {
  font-family: var(--survey-body-font);
  font-size: 13px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.logic-map-placeholder-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  border-radius: 10px;
  border: 1px solid var(--white-ghost);
}

.logic-map-placeholder-meta dt {
  font-family: var(--survey-body-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin: 0 0 0.25rem;
}

.logic-map-placeholder-meta dd {
  font-family: var(--survey-body-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* React Flow island shell */
.logic-map-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  min-height: 0;
}

.lm-rail {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--white-ghost);
  background: color-mix(in srgb, var(--card) 60%, var(--ink) 40%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--survey-body-font);
  color: var(--white);
}

.lm-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--white-ghost);
  padding: 0.5rem;
  gap: 2px;
}

.lm-panel-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.5rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--white-dim);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.lm-panel-tab:hover { color: var(--white); }

.lm-panel-tab--active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.lm-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 2rem;
}

.lm-panel-section {
  margin-bottom: 1.5rem;
}

.lm-panel-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 0.6rem;
}

.lm-panel-empty {
  font-size: 12px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.5;
  padding: 0.8rem;
  background: var(--card);
  border: 1px dashed var(--white-ghost);
  border-radius: 10px;
}

.lm-panel-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

.lm-panel-rule-body { flex: 1; min-width: 0; }

.lm-panel-rule-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lm-panel-rule-expr {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--white-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.lm-panel-rule-delete {
  background: transparent;
  border: 0;
  color: var(--white-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.lm-panel-rule-delete:hover {
  color: #ec4646;
}

.lm-panel-rule--orphan {
  border-color: rgba(236, 70, 70, 0.35);
  background: rgba(236, 70, 70, 0.06);
}

.lm-panel-rule-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ec4646;
  background: rgba(236, 70, 70, 0.12);
  border: 1px solid rgba(236, 70, 70, 0.35);
  border-radius: 4px;
  vertical-align: 1px;
}

.lm-logic-select--orphan {
  border-color: rgba(236, 70, 70, 0.5);
  color: #ec4646;
}

.lm-logic-rule-orphan-hint {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ec4646;
  background: rgba(236, 70, 70, 0.12);
  border: 1px solid rgba(236, 70, 70, 0.35);
  border-radius: 4px;
  cursor: help;
}

.lm-panel-variable {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  margin-bottom: 0.4rem;
  font-size: 12px;
}

.lm-panel-variable-name { color: var(--accent); font-weight: 500; flex: 1; }
.lm-panel-variable-value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--white-dim);
}

.lm-panel-ending {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  margin-bottom: 0.45rem;
}

.lm-panel-ending-dot {
  margin-top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #32C08D;
  flex-shrink: 0;
}

.lm-panel-ending-body { flex: 1; min-width: 0; }
.lm-panel-ending-title { font-size: 12px; font-weight: 500; color: var(--white); }
.lm-panel-ending-desc { font-size: 11px; color: var(--white-dim); margin-top: 0.15rem; }

.lm-panel-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.lm-panel-add--stacked {
  flex-direction: column;
  gap: 0.5rem;
}

.lm-panel-add input,
.lm-panel-add select {
  flex: 1;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--white-ghost);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  padding: 0.45rem 0.55rem;
  min-width: 0;
}

.lm-panel-add input:focus,
.lm-panel-add select:focus {
  outline: none;
  border-color: var(--accent);
}

.lm-panel-add button {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
}

.lm-panel-add button:hover {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.lm-panel-add-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: -0.25rem;
}

.lm-canvas-shell {
  flex: 1;
  position: relative;
  background: transparent;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.lm-canvas-shell .react-flow {
  width: 100%;
  height: 100%;
}

.lm-canvas-shell .react-flow__background,
.lm-canvas-shell .react-flow__background * {
  pointer-events: none;
}

.lm-canvas-shell .react-flow__pane { cursor: grab; }
.lm-canvas-shell .react-flow__pane:active { cursor: grabbing; }

.lm-canvas-shell .react-flow__attribution { display: none; }

.lm-canvas-shell .react-flow__controls {
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.lm-canvas-shell .react-flow__controls-button {
  background: transparent;
  border-bottom: 1px solid var(--white-ghost);
  color: var(--white-dim);
  fill: currentColor;
  width: 32px;
  height: 32px;
}

.lm-canvas-shell .react-flow__controls-button:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.lm-canvas-shell .react-flow__minimap {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* Logic-map nodes (lm-* namespace) */
.lm-node {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--white-ghost);
  border-radius: 12px;
  font-family: var(--survey-body-font);
  color: var(--white);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  padding: 0.85rem 1rem;
  min-width: 220px;
  max-width: 280px;
}

.lm-node--start {
  background: color-mix(in srgb, var(--accent) 18%, var(--card) 82%);
  border-color: var(--accent);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  min-width: 0;
}

.lm-node--tracked-variables {
  min-width: 240px;
  max-width: 280px;
  padding: 0;
  background: color-mix(in srgb, var(--card) 94%, #94a3b8 6%);
  border-color: color-mix(in srgb, var(--white-faint) 70%, #94a3b8 30%);
  overflow: visible;
}

.lm-tracked-node-button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lm-tracked-node-button:hover {
  background: color-mix(in srgb, #94a3b8 9%, transparent);
}

.lm-tracked-node-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 3px;
}

.lm-tracked-node-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.lm-tracked-node-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, #94a3b8 18%, transparent);
  color: color-mix(in srgb, var(--white) 68%, #64748b 32%);
}

.lm-tracked-node-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

.lm-tracked-node-optional {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--white-dim);
}

.lm-tracked-node-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.lm-tracked-node-chip {
  max-width: 150px;
  padding: 0.18rem 0.42rem;
  border: 1px solid color-mix(in srgb, #94a3b8 35%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #94a3b8 12%, transparent);
  color: var(--white-dim);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lm-node--ending {
  background: color-mix(in srgb, #32C08D 16%, var(--card) 84%);
  border-color: #32C08D;
  padding: 0;
  overflow: visible;
}

.lm-ending-node-content {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.95rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.lm-ending-node-content {
  cursor: pointer;
}

button.lm-ending-node-content:hover {
  background: color-mix(in srgb, #32C08D 12%, transparent);
}

button.lm-ending-node-content:focus-visible {
  outline: 3px solid color-mix(in srgb, #32C08D 40%, transparent);
  outline-offset: 3px;
}

.lm-ending-node-content .lm-node-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.lm-ending-node-content .lm-node-meta {
  max-width: 178px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lm-ending-node-badges {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.24rem;
}

.lm-ending-node-type,
.lm-ending-node-outcome {
  flex: 0 0 auto;
  padding: 0.15rem 0.35rem;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lm-ending-node-type {
  border: 1px solid color-mix(in srgb, #32C08D 42%, transparent);
  color: color-mix(in srgb, #32C08D 80%, var(--white) 20%);
}

.lm-ending-node-outcome--qualified {
  background: color-mix(in srgb, #32C08D 16%, transparent);
  color: #32C08D;
}

.lm-ending-node-outcome--screenout {
  background: color-mix(in srgb, #f87171 14%, transparent);
  color: #fca5a5;
}

.lm-ending-node-outcome--unset {
  background: var(--white-ghost);
  color: var(--white-dim);
}

.lm-add-ending-node {
  position: relative;
  font-family: var(--survey-body-font);
}

.lm-add-ending-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 1px dashed var(--white-faint);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  color: var(--white-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.lm-add-ending-button:hover,
.lm-add-ending-button:focus-visible,
.lm-add-ending-button[aria-expanded="true"] {
  border-color: #32C08D;
  background: color-mix(in srgb, #32C08D 11%, var(--card));
  color: #32C08D;
}

.lm-add-ending-button:focus-visible {
  outline: 3px solid color-mix(in srgb, #32C08D 28%, transparent);
  outline-offset: 3px;
}

.lm-add-ending-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: color-mix(in srgb, #32C08D 18%, transparent);
  color: #32C08D;
  font-size: 15px;
  line-height: 1;
}

.lm-add-ending-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  left: 50%;
  width: 218px;
  padding: 0.35rem;
  transform: translateX(-50%);
  border: 1px solid var(--white-faint);
  border-radius: 11px;
  background: var(--card);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
}

.lm-add-ending-menu button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.58rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--white-dim);
  font: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.lm-add-ending-menu button:hover,
.lm-add-ending-menu button:focus-visible {
  outline: none;
  background: color-mix(in srgb, #32C08D 10%, transparent);
  color: var(--white);
}

.lm-add-ending-menu-title {
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}

.lm-node--error {
  background: color-mix(in srgb, #ec4646 14%, var(--card) 86%);
  border-color: #ec4646;
}

.lm-node--webhook {
  background: color-mix(in srgb, #FFC107 12%, var(--card) 88%);
  border-color: #FFC107;
}

.lm-node--webhook .lm-node-eyebrow { color: #FFC107; }

.lm-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.lm-node-dot--success { background: #32C08D; }

.lm-node-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}

.lm-node-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 11px;
  color: var(--white-dim);
  margin-bottom: 0.35rem;
}

.lm-node-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

.lm-node-type-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.lm-node-required {
  color: #ec4646;
  font-weight: 700;
}

.lm-node-number {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 0.35rem;
  height: 18px;
  border-radius: 6px;
  background: var(--white-ghost);
  font-size: 10px;
  font-weight: 600;
  color: var(--white);
}

.lm-node-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 0.3rem;
  word-break: break-word;
}

.lm-node-meta {
  font-size: 11px;
  color: var(--white-dim);
}

.lm-node-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ec4646;
  margin-bottom: 0.3rem;
}

.lm-node-body { min-width: 0; flex: 1; }

.lm-node-choices {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lm-node-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.55rem;
  background: color-mix(in srgb, var(--ink) 65%, transparent);
  border: 1px solid var(--white-ghost);
  border-radius: 8px;
  font-size: 11px;
  color: var(--white-dim);
}

.lm-node-choice-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 0.4rem;
}

.lm-node-choice--more {
  color: var(--white-faint);
  font-style: italic;
  justify-content: center;
}

/* React Flow handles */
.lm-handle {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.lm-handle--default {
  background: var(--white-faint);
}

.lm-handle--choice {
  background: var(--accent);
  position: relative;
  right: -6px;
}

/* Branching button on question nodes + popover */
.lm-node-branch-btn {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--white-dim);
  border: 1.5px solid var(--white-ghost);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  z-index: 2;
}

.lm-node-branch-btn:hover,
.lm-node-branch-btn.is-open {
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  border-color: var(--accent);
  color: var(--accent);
}

.lm-branching-popover {
  position: absolute;
  top: calc(50% + 20px);
  right: 0;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 20;
}

.lm-branching-popover-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  background: transparent;
  color: var(--white);
  border: 0;
  border-radius: 7px;
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.lm-branching-popover-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.lm-branching-popover-item--disabled {
  color: var(--white-faint);
  cursor: not-allowed;
}

.lm-branching-popover-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-faint);
  background: var(--white-ghost);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

/* Conditional edge label pill */
.lm-edge-label {
  pointer-events: none;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.lm-edge-label code {
  font-family: inherit;
  color: var(--white);
}

/* Save indicator + condition editor (Phase 5) */
.lm-save-indicator {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  font-family: var(--survey-body-font);
  font-size: 11px;
  color: var(--white-dim);
  pointer-events: none;
  z-index: 5;
}

.lm-save-indicator--saving { color: var(--accent); border-color: var(--accent); }
.lm-save-indicator--saved { color: #32C08D; border-color: rgba(50, 192, 141, 0.5); }
.lm-save-indicator--dirty { color: var(--white); }
.lm-save-indicator--conflict { color: #ec4646; border-color: rgba(236, 70, 70, 0.5); }
.lm-save-indicator--error { color: #ec4646; border-color: rgba(236, 70, 70, 0.5); }

.lm-condition-editor {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  font-family: var(--survey-body-font);
  color: var(--white);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.lm-condition-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.5rem;
  border-bottom: 1px solid var(--white-ghost);
}

.lm-condition-editor-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: var(--white);
}

.lm-condition-editor-close {
  background: transparent;
  border: 0;
  color: var(--white-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.lm-condition-editor-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
}

.lm-condition-editor-body label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.lm-condition-editor-body select,
.lm-condition-editor-body input[type="text"] {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--white-ghost);
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--survey-body-font);
  padding: 0.5rem 0.6rem;
}

.lm-condition-editor-body select:focus,
.lm-condition-editor-body input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.lm-condition-editor-preview {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  word-break: break-all;
}

.lm-condition-editor-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem 0.85rem;
  border-top: 1px solid var(--white-ghost);
}

.lm-condition-editor-footer button {
  border: 1px solid var(--white-ghost);
  background: transparent;
  color: var(--white);
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.lm-condition-editor-footer button:hover {
  border-color: var(--white-faint);
}

.lm-condition-editor-save {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.lm-condition-editor-save:hover {
  background: var(--accent);
  filter: brightness(1.1);
}

.lm-condition-editor-delete {
  color: #ec4646;
  border-color: rgba(236, 70, 70, 0.4);
}

.lm-condition-editor-delete:hover {
  background: color-mix(in srgb, #ec4646 10%, transparent);
}

/* --------------------------------------------------------------------------
 * Logic rules editor modal (Typeform-style)
 * ------------------------------------------------------------------------ */
.lm-logic-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-family: var(--survey-body-font);
}

.lm-logic-modal {
  width: min(760px, 92vw);
  max-height: 86vh;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 14px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  color: var(--white);
}

.lm-logic-modal--all {
  width: min(920px, 94vw);
}

.lm-logic-modal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--white-ghost);
  gap: 0.5rem;
}

.lm-logic-modal-header h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

.lm-logic-modal-link {
  justify-self: start;
  background: transparent;
  border: 0;
  color: var(--white-dim);
  font-size: 12px;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
}

.lm-logic-modal-link:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.lm-logic-modal-close {
  justify-self: end;
  background: transparent;
  border: 0;
  color: var(--white-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.35rem;
}

.lm-logic-modal-body {
  padding: 1rem 1.2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lm-logic-modal-intro {
  font-size: 12px;
  color: var(--white-dim);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}

.lm-logic-modal-empty {
  font-size: 12px;
  color: var(--white-faint);
  text-align: center;
  padding: 1.5rem 0;
}

.lm-logic-rule {
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}

.lm-logic-rule.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.lm-logic-rule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.lm-logic-rule-source {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.lm-logic-rule-delete {
  background: transparent;
  border: 0;
  color: var(--white-faint);
  font-size: 16px;
  cursor: pointer;
  padding: 0 0.35rem;
  border-radius: 6px;
}

.lm-logic-rule-delete:hover {
  color: #ec4646;
  background: color-mix(in srgb, #ec4646 10%, transparent);
}

.lm-logic-rule-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lm-logic-rule-unsupported {
  font-size: 12px;
  color: var(--white-dim);
  background: color-mix(in srgb, #FFC107 10%, transparent);
  border: 1px dashed color-mix(in srgb, #FFC107 60%, transparent);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lm-logic-rule-unsupported code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--white);
  background: var(--ink);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  word-break: break-all;
}

.lm-logic-condition {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.lm-logic-condition-prefix {
  min-width: 44px;
}

.lm-logic-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.lm-logic-token-select {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 0;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: inherit;
  cursor: pointer;
}

.lm-logic-select,
.lm-logic-input {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--white-ghost);
  border-radius: 7px;
  padding: 0.4rem 0.55rem;
  font-size: 12px;
  font-family: inherit;
  min-width: 80px;
}

.lm-logic-select:focus,
.lm-logic-input:focus {
  outline: none;
  border-color: var(--accent);
}

.lm-logic-select--op {
  min-width: 0;
  width: auto;
}

.lm-logic-condition-remove {
  background: transparent;
  border: 0;
  color: var(--white-faint);
  font-size: 14px;
  cursor: pointer;
  padding: 0 0.35rem;
}

.lm-logic-condition-remove:hover {
  color: #ec4646;
}

.lm-logic-rule-add-condition {
  align-self: flex-start;
  background: transparent;
  color: var(--accent);
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 7px;
  padding: 0.35rem 0.7rem;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.lm-logic-rule-add-condition:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.lm-logic-rule-then {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px dashed var(--white-ghost);
  padding-top: 0.7rem;
}

.lm-logic-modal-add-rule {
  align-self: flex-start;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.lm-logic-modal-add-rule:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.lm-logic-modal-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--white-ghost);
}

.lm-logic-modal-footer button {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white-ghost);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

.lm-logic-modal-footer button:hover:not(:disabled) {
  border-color: var(--white-faint);
}

.lm-logic-modal-footer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lm-logic-modal-delete-all {
  color: #ec4646;
  border-color: rgba(236, 70, 70, 0.4) !important;
}

.lm-logic-modal-save {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border-color: var(--accent) !important;
}

.lm-logic-modal-save:hover {
  filter: brightness(1.1);
}

/* Track variables modal */
.lm-track-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
  font-family: var(--survey-body-font);
}

.lm-track-modal {
  width: min(680px, 94vw);
  max-height: min(720px, 88vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--white-faint);
  border-radius: 16px;
  background: var(--card);
  color: var(--white);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.3);
}

.lm-track-modal:focus {
  outline: none;
}

.lm-track-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--white-ghost);
}

.lm-track-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

.lm-track-modal-close,
.lm-track-modal-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--white-dim);
  cursor: pointer;
}

.lm-track-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
}

.lm-track-modal-close:hover,
.lm-track-modal-close:focus-visible {
  background: var(--white-ghost);
  color: var(--white);
}

.lm-track-modal-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.25rem 1.25rem;
}

.lm-track-modal-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lm-track-modal-add {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--white-faint);
  border-radius: 9px;
  background: var(--card);
  color: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.lm-track-modal-add:hover:not(:disabled),
.lm-track-modal-add:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
}

.lm-track-modal-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lm-track-modal-count {
  margin-left: auto;
  color: var(--white-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.lm-track-modal-list {
  min-height: 0;
  max-height: min(430px, 55vh);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
  padding: 0.1rem 0.25rem 0.25rem 0.1rem;
  scrollbar-gutter: stable;
}

.lm-track-modal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: start;
  gap: 0.5rem;
}

.lm-track-modal-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.lm-track-modal-input {
  width: 100%;
  min-width: 0;
  padding: 0.58rem 0.7rem;
  border: 1px solid var(--white-faint);
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink) 70%, var(--card) 30%);
  color: var(--white);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.lm-track-modal-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.lm-track-modal-input[aria-invalid="true"] {
  border-color: #dc2626;
}

.lm-track-modal-error {
  color: #dc2626;
  font-size: 11px;
  line-height: 1.35;
}

.lm-track-modal-used {
  color: var(--white-dim);
  font-size: 10px;
  line-height: 1.3;
}

.lm-track-modal-message {
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, #dc2626 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #dc2626;
  font-size: 11px;
}

.lm-track-modal-remove {
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 8px;
  font-size: 18px;
}

.lm-track-modal-remove:hover,
.lm-track-modal-remove:focus-visible {
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color: #dc2626;
}

.lm-track-modal-remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lm-track-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem 1rem;
  border-top: 1px solid var(--white-ghost);
}

.lm-track-modal-cancel,
.lm-track-modal-save {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lm-track-modal-cancel {
  border: 1px solid var(--white-faint);
  background: transparent;
  color: var(--white-dim);
}

.lm-track-modal-save {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.lm-track-modal-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lm-track-modal-cancel:hover,
.lm-track-modal-cancel:focus-visible,
.lm-track-modal-save:hover:not(:disabled),
.lm-track-modal-save:focus-visible {
  filter: brightness(1.08);
}

.lm-track-modal-close:focus-visible,
.lm-track-modal-remove:focus-visible,
.lm-track-modal-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .lm-track-modal-header,
  .lm-track-modal-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lm-track-modal-header h2 {
    font-size: 16px;
  }
}

/* Custom ending editor */
.lm-ending-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 114;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  font-family: var(--survey-body-font);
}

.lm-ending-modal {
  width: min(560px, 94vw);
  max-height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--white-faint);
  border-radius: 16px;
  background: var(--card);
  color: var(--white);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.lm-ending-modal:focus {
  outline: none;
}

.lm-ending-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border-bottom: 1px solid var(--white-ghost);
}

.lm-ending-modal-header h2 {
  margin: 0;
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
}

.lm-ending-modal-header p {
  margin: 0.25rem 0 0;
  color: var(--white-dim);
  font-size: 11px;
}

.lm-ending-modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--white-dim);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lm-ending-modal-close:hover,
.lm-ending-modal-close:focus-visible {
  background: var(--white-ghost);
  color: var(--white);
}

.lm-ending-modal-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.2rem 1.2rem;
  overflow-y: auto;
}

.lm-ending-modal-kind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid color-mix(in srgb, #32C08D 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #32C08D 9%, var(--card));
  color: var(--white-dim);
  font-size: 10px;
}

.lm-ending-modal-kind > span {
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}

.lm-ending-modal-kind small {
  color: var(--white-dim);
  font-size: 10px;
}

.lm-ending-modal-qualified {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid var(--white-faint);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 46%, var(--card));
  cursor: pointer;
}

.lm-ending-modal-qualified input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0.1rem 0 0;
  accent-color: #32C08D;
  cursor: pointer;
}

.lm-ending-modal-qualified > span {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.lm-ending-modal-qualified strong {
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
}

.lm-ending-modal-qualified small {
  color: var(--white-dim);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.lm-ending-modal-qualified:focus-within {
  outline: 2px solid #32C08D;
  outline-offset: 2px;
}

.lm-ending-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
}

.lm-ending-modal-field input,
.lm-ending-modal-field textarea,
.lm-ending-modal-field .lm-ending-rich-text {
  width: 100%;
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--white-faint);
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink) 70%, var(--card) 30%);
  color: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  resize: vertical;
}

.lm-ending-modal-field .lm-ending-rich-text {
  min-height: 112px;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  cursor: text;
}

.lm-ending-modal-field textarea[id="lm-ending-redirect-url"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.lm-ending-modal-field input:focus,
.lm-ending-modal-field textarea:focus,
.lm-ending-modal-field .lm-ending-rich-text:focus {
  outline: none;
  border-color: #32C08D;
  box-shadow: 0 0 0 3px color-mix(in srgb, #32C08D 14%, transparent);
}

.lm-ending-modal-field input[aria-invalid="true"],
.lm-ending-modal-field textarea[aria-invalid="true"],
.lm-ending-modal-field .lm-ending-rich-text[aria-invalid="true"] {
  border-color: #dc2626;
}

.lm-ending-modal-field small {
  color: var(--white-dim);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.lm-ending-variables {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding: 0.65rem 0.7rem;
  border: 1px dashed var(--white-faint);
  border-radius: 9px;
  color: var(--white-dim);
  font-size: 10px;
  font-weight: 500;
}

.lm-ending-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.lm-ending-variable-list button {
  padding: 0.28rem 0.48rem;
  border: 1px solid color-mix(in srgb, #94a3b8 42%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #94a3b8 12%, transparent);
  color: var(--white);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  cursor: pointer;
}

.lm-ending-variable-list button:hover,
.lm-ending-variable-list button:focus-visible {
  border-color: #32C08D;
  outline: none;
  background: color-mix(in srgb, #32C08D 12%, transparent);
  color: #32C08D;
}

.lm-ending-modal-error {
  padding: 0.55rem 0.68rem;
  border: 1px solid color-mix(in srgb, #dc2626 44%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #f87171;
  font-size: 11px;
}

.lm-ending-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.82rem 1.2rem 0.95rem;
  border-top: 1px solid var(--white-ghost);
}

.lm-ending-modal-cancel,
.lm-ending-modal-save {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lm-ending-modal-cancel {
  border: 1px solid var(--white-faint);
  background: transparent;
  color: var(--white-dim);
}

.lm-ending-modal-save {
  border: 1px solid #32C08D;
  background: #32C08D;
  color: #071812;
}

.lm-ending-modal-save:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.lm-ending-modal-cancel:hover,
.lm-ending-modal-cancel:focus-visible,
.lm-ending-modal-save:hover:not(:disabled),
.lm-ending-modal-save:focus-visible {
  filter: brightness(1.08);
}

.lm-ending-modal-close:focus-visible,
.lm-ending-modal-cancel:focus-visible,
.lm-ending-modal-save:focus-visible,
.lm-ending-variable-list button:focus-visible {
  outline: 2px solid #32C08D;
  outline-offset: 2px;
}

/* Equal-weight randomized routing modal */
.lm-random-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(2px);
  font-family: var(--survey-body-font);
}

.lm-random-modal {
  width: min(680px, 94vw);
  max-height: min(760px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--white-faint);
  border-radius: 16px;
  background: var(--card);
  color: var(--white);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.34);
}

.lm-random-modal:focus {
  outline: none;
}

.lm-random-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--white-ghost);
}

.lm-random-modal-eyebrow {
  margin-bottom: 0.2rem;
  color: #f59e0b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lm-random-modal-header h2 {
  margin: 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.lm-random-modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--white-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lm-random-modal-close:hover,
.lm-random-modal-close:focus-visible {
  background: var(--white-ghost);
  color: var(--white);
}

.lm-random-modal-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.2rem;
}

.lm-random-modal-help {
  margin: 0;
  color: var(--white-dim);
  font-size: 12px;
  line-height: 1.55;
}

.lm-random-modal-options {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.lm-random-modal-options legend {
  margin-bottom: 0.15rem;
  color: var(--white-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lm-random-modal-option {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.lm-random-modal-option:hover {
  border-color: var(--white-faint);
}

.lm-random-modal-option.is-selected {
  border-color: color-mix(in srgb, #f59e0b 72%, transparent);
  background: color-mix(in srgb, #f59e0b 9%, transparent);
}

.lm-random-modal-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.lm-random-modal-check {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white-faint);
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.lm-random-modal-option input:focus-visible + .lm-random-modal-check {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

.lm-random-modal-option.is-selected .lm-random-modal-check {
  border-color: #f59e0b;
  background: #f59e0b;
}

.lm-random-modal-option-label {
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lm-random-modal-option-weight {
  color: #f59e0b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.lm-random-modal-summary,
.lm-random-modal-empty,
.lm-random-modal-warning {
  padding: 0.7rem 0.8rem;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.45;
}

.lm-random-modal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent);
  background: color-mix(in srgb, #f59e0b 8%, transparent);
  color: var(--white-dim);
}

.lm-random-modal-summary strong {
  color: #f59e0b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lm-random-modal-empty {
  border: 1px dashed var(--white-faint);
  color: var(--white-dim);
  text-align: center;
}

.lm-random-modal-warning {
  border: 1px solid color-mix(in srgb, #dc2626 45%, transparent);
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #fca5a5;
}

.lm-random-modal-footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem 1rem;
  border-top: 1px solid var(--white-ghost);
}

.lm-random-modal-footer-spacer {
  flex: 1;
}

.lm-random-modal-cancel,
.lm-random-modal-save,
.lm-random-modal-remove {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lm-random-modal-cancel {
  border: 1px solid var(--white-faint);
  background: transparent;
  color: var(--white-dim);
}

.lm-random-modal-save {
  border: 1px solid #f59e0b;
  background: #f59e0b;
  color: var(--ink);
}

.lm-random-modal-remove {
  border: 1px solid color-mix(in srgb, #dc2626 50%, transparent);
  background: transparent;
  color: #fca5a5;
}

.lm-random-modal-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lm-random-modal-cancel:hover,
.lm-random-modal-cancel:focus-visible,
.lm-random-modal-save:hover:not(:disabled),
.lm-random-modal-save:focus-visible,
.lm-random-modal-remove:hover,
.lm-random-modal-remove:focus-visible {
  filter: brightness(1.1);
}

.lm-edge-label--randomized {
  border-color: #f59e0b;
  color: #fbbf24;
}

.lm-edge-label--randomized code {
  color: inherit;
}

@media (max-width: 640px) {
  .lm-random-modal-header,
  .lm-random-modal-body,
  .lm-random-modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lm-random-modal-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .lm-random-modal-remove {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
}

.lm-logic-all-rules {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.lm-logic-all-rules th,
.lm-logic-all-rules td {
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--white-ghost);
  vertical-align: top;
}

.lm-logic-all-rules th {
  color: var(--white-faint);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.lm-logic-all-rules code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  word-break: break-all;
}

.lm-logic-all-rules-open {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 11px;
  cursor: pointer;
}

.lm-logic-all-rules-open:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.lm-logic-all-rules-delete {
  background: transparent;
  color: var(--white-faint);
  border: 1px solid var(--white-ghost);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  cursor: pointer;
}

.lm-logic-all-rules-delete:hover {
  color: #ec4646;
  border-color: rgba(236, 70, 70, 0.5);
  background: color-mix(in srgb, #ec4646 10%, transparent);
}

/* --------------------------------------------------------------------------
 * Results pane — owner-facing table of submitted responses. Light-themed
 * Typeform-style surface that replaces the editor canvas when the Results
 * tab is active.
 * ------------------------------------------------------------------------ */

.builder-results-pane,
.builder-results-page {
  --results-bg: #f6f7f8;
  --results-surface: #ffffff;
  --results-border: #e5e7ea;
  --results-border-strong: #d5d8dc;
  --results-text: #1f2328;
  --results-text-muted: #6b7280;
  --results-text-faint: #9aa0a6;
  --results-hover: #f6f7fa;
  --results-active: #eef2ff;
  --results-accent: #3b40c4;

  --icon-short-text: #3b82f6;
  --icon-long-text: #3b82f6;
  --icon-email: #0ea5e9;
  --icon-number: #f59e0b;
  --icon-date: #10b981;
  --icon-single-select: #7c3aed;
  --icon-dropdown: #7c3aed;
  --icon-multi-select: #16a34a;
  --icon-tagbox: #ea580c;
  --icon-rating: #eab308;
  --icon-yes-no: #0891b2;
  --icon-ranking: #f97316;
  --icon-image-picker: #db2777;
  --icon-matrix: #6366f1;
}

.builder-results-pane {
  position: fixed;
  inset: 72px 0 0 0;
  display: flex;
  flex-direction: column;
  background: var(--results-bg);
  color: var(--results-text);
  z-index: 10;
  padding: 0;
  overflow: hidden;
}

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

.builder-results-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.builder-results-loading,
.builder-results-error {
  color: var(--results-text-muted);
  font-size: 14px;
  padding: 1.5rem;
  text-align: center;
}

.builder-results-error {
  color: #d93025;
}

.builder-results-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--results-bg);
}

/* Sub-tabs (Smart Insights / Insights / Summary / Responses) */
.results-subtabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 1.5rem;
  background: var(--results-surface);
  border-bottom: 1px solid var(--results-border);
}

.results-subtab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--results-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.results-subtab:hover:not(:disabled) {
  color: var(--results-text);
}

.results-subtab--active {
  color: var(--results-text);
  border-bottom-color: var(--results-text);
  cursor: default;
}

.results-subtab--disabled,
.results-subtab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.results-subtab-count {
  color: var(--results-text-faint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.results-outcome-summary {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.85rem;
  margin-left: auto;
  color: var(--results-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.results-outcome-summary strong {
  color: var(--results-text);
  font-variant-numeric: tabular-nums;
}

.results-outcome-summary-note {
  padding-left: 0.85rem;
  border-left: 1px solid var(--results-border);
  color: var(--results-text-faint);
}

.results-subtab-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #d9f6e3;
  color: #10b981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.results-subtab-dot::after {
  content: "✦";
  font-size: 11px;
}

/* Empty state */
.builder-results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 2rem;
  color: var(--results-text-muted);
  text-align: center;
  flex: 1;
}

.builder-results-empty-icon {
  color: var(--results-text-faint);
  margin-bottom: 0.5rem;
}

.builder-results-empty-title {
  font-family: var(--survey-body-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--results-text);
}

.builder-results-empty-body {
  max-width: 400px;
  font-size: 14px;
  line-height: 1.55;
}

/* Toolbar */
.results-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--results-surface);
  border-bottom: 1px solid var(--results-border);
}

.results-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  background: #f1f3f5;
  border-radius: 8px;
}

.results-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--results-text-muted);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.results-view-btn:hover:not(:disabled) {
  color: var(--results-text);
}

.results-view-btn--active {
  background: var(--results-surface);
  color: var(--results-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.results-view-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.results-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 240px;
  max-width: 320px;
}

.results-search-icon {
  position: absolute;
  left: 10px;
  color: var(--results-text-faint);
  pointer-events: none;
}

.results-search-input {
  width: 100%;
  padding: 0.45rem 0.7rem 0.45rem 2rem;
  background: var(--results-surface);
  border: 1px solid var(--results-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--results-text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.results-search-input:focus {
  outline: none;
  border-color: var(--results-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--results-accent) 18%, transparent);
}

.results-search-input::placeholder {
  color: var(--results-text-faint);
}

.results-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: var(--results-surface);
  border: 1px solid var(--results-border);
  border-radius: 8px;
  color: var(--results-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}

.results-chip:hover:not(:disabled) {
  background: var(--results-hover);
  border-color: var(--results-border-strong);
}

.results-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.results-chip svg {
  color: var(--results-text-muted);
}

.results-toolbar-spacer {
  flex: 1;
}

.results-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--results-surface);
  border: 1px solid var(--results-border);
  border-radius: 8px;
  color: var(--results-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}

.results-icon-btn:hover:not(:disabled) {
  background: var(--results-hover);
  color: var(--results-text);
  border-color: var(--results-border-strong);
}

.results-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.results-icon-btn--download:hover {
  color: var(--results-accent);
  border-color: var(--results-accent);
  background: color-mix(in srgb, var(--results-accent) 6%, var(--results-surface));
}

/* Table */
.results-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--results-surface);
}

.results-table {
  /* table-layout: fixed so explicit <col> widths are honored and one
     long header doesn't stretch its column arbitrarily wide. */
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--results-text);
}

.results-col-check { width: 44px; }
.results-col-meta { width: 160px; }
.results-col-question { width: 220px; }

/* Pin the header row as a whole so it doesn't overlap the first data row. */
.results-table thead tr {
  position: sticky;
  top: 0;
  z-index: 5;
}

.results-th {
  position: sticky;
  top: 0;
  background: var(--results-surface);
  color: var(--results-text-muted);
  font-weight: 500;
  font-size: 12px;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--results-border);
  z-index: 2;
  height: 44px;
  vertical-align: middle;
  overflow: hidden;
}

.results-th-inner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.results-th-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--results-text);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.results-th--check {
  padding-left: 1rem;
  padding-right: 0.5rem;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--results-surface);
}

.results-th--sticky {
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--results-surface);
}

/* Respondent column: third sticky-left, sits just right of Submitted
   (44px check + 160px submitted = 204px). Slightly lower z than Submitted
   so its text never overlaps the Submitted column while horizontally
   scrolling, and both get an inset shadow to show they're pinned. */
.results-th--sticky-2 {
  position: sticky;
  left: 204px;
  z-index: 5;
  background: var(--results-surface);
  box-shadow: 1px 0 0 var(--results-border);
}

.results-td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--results-border);
  vertical-align: top;
  color: var(--results-text);
  line-height: 1.4;
  background: var(--results-surface);
}

/* Clamp the inner content so long answers don't stretch rows vertically.
   Tooltip (title attr) on the table cell surfaces the full text on hover. */
.results-td-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.results-td--check {
  padding-left: 1rem;
  padding-right: 0.5rem;
  width: 44px;
  background: var(--results-surface);
  position: sticky;
  left: 0;
  z-index: 4;
}

.results-td--sticky {
  position: sticky;
  left: 0;
  background: var(--results-surface);
  z-index: 3;
  white-space: nowrap;
}

.results-td--sticky-2 {
  position: sticky;
  left: 204px;
  background: var(--results-surface);
  z-index: 2;
  box-shadow: 1px 0 0 var(--results-border);
  white-space: nowrap;
}

.results-td--meta {
  color: var(--results-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.results-row:hover .results-td {
  background: var(--results-hover);
}

.results-row:hover .results-td--check,
.results-row:hover .results-td--sticky,
.results-row:hover .results-td--sticky-2 {
  background: var(--results-hover);
}

.results-row--hidden { display: none; }

.results-submitted {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: var(--results-text);
  font-variant-numeric: tabular-nums;
}

.results-submitted-date { font-weight: 500; }
.results-submitted-time { color: var(--results-text-muted); font-size: 12px; }

.results-outcome-badge {
  width: fit-content;
  margin-top: 0.18rem;
  padding: 0.12rem 0.34rem;
  border-radius: 999px;
  background: #fff1f2;
  color: #be123c;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

/* Why Dot flagged a response, under its badge. */
.results-flag-note {
  margin-top: 0.12rem;
  color: #be123c;
  font-size: 11px;
  line-height: 1.35;
}

.results-watch-link {
  width: fit-content;
  margin-top: 0.18rem;
  color: var(--results-accent);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.results-watch-link:hover { text-decoration: underline; }

.results-empty-match {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--results-text-muted);
  font-size: 13px;
}

/* Checkbox */
.results-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.results-check input {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.results-check span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--results-border-strong);
  border-radius: 4px;
  background: var(--results-surface);
  transition: background 100ms ease, border-color 100ms ease;
  position: relative;
}

.results-check input:checked + span {
  background: var(--results-accent);
  border-color: var(--results-accent);
}

.results-check input:checked + span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.results-check input:disabled + span { opacity: 0.5; }

/* Answer pills */
.results-pill {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  border: 1px solid transparent;
}

.results-pill--single {
  background: #f1f3f5;
  color: var(--results-text);
  border-color: #e5e7ea;
}

.results-pill--multi {
  background: #fff4ec;
  color: #c2410c;
  border-color: #fed7aa;
  margin: 0 0.15rem 0.15rem 0;
}

.results-pill--rating {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
  font-weight: 600;
}

/* Column-type icons (Typeform-style colored chip + glyph) */
.results-col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.results-col-icon svg { display: block; }

.results-col-icon--short-text { color: var(--icon-short-text); }
.results-col-icon--long-text { color: var(--icon-long-text); }
.results-col-icon--email { color: var(--icon-email); }
.results-col-icon--number { color: var(--icon-number); }
.results-col-icon--date { color: var(--icon-date); }
.results-col-icon--single-select { color: var(--icon-single-select); }
.results-col-icon--dropdown { color: var(--icon-dropdown); }
.results-col-icon--multi-select { color: var(--icon-multi-select); }
.results-col-icon--tagbox { color: var(--icon-tagbox); }
.results-col-icon--rating { color: var(--icon-rating); }
.results-col-icon--yes-no { color: var(--icon-yes-no); }
.results-col-icon--ranking { color: var(--icon-ranking); }
.results-col-icon--image-picker { color: var(--icon-image-picker); }
.results-col-icon--matrix { color: var(--icon-matrix); }

/* ══════════════════════════════════════════════
   RESULTS FULL PAGE (/builder/:id/results direct URL)
   ══════════════════════════════════════════════ */

.builder-results-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  padding-top: 60px;
  background: var(--results-surface);
  color: var(--results-text);
}

.builder-results-page-head {
  flex-shrink: 0;
  padding: 1rem 1.5rem 0.75rem;
  background: var(--results-surface);
  border-bottom: 1px solid var(--results-border);
}

.builder-results-page-head-text h1 {
  font-family: var(--survey-body-font);
  font-size: 1.25rem;
  color: var(--results-text);
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.builder-results-page-head-text p {
  color: var(--results-text-muted);
  font-size: 0.85rem;
  margin: 0.15rem 0 0;
}

.builder-results-page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--results-text-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 150ms ease;
}

.builder-results-page-back:hover {
  color: var(--results-accent);
}

.builder-results-page .builder-results-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  .results-subtabs {
    padding: 0 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .results-subtab {
    flex: 0 0 auto;
    padding: 0.75rem 0.85rem;
    white-space: nowrap;
  }

  .results-toolbar {
    flex-wrap: wrap;
    align-items: stretch;
    padding: 0.65rem 0.75rem;
  }

  .results-search {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  .results-toolbar-spacer {
    display: none;
  }

  .results-chip {
    flex: 1 1 auto;
    justify-content: center;
  }

  .builder-results-page-head {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ══════════════════════════════════════════════
   SURVEY DASHBOARD (/builder index)
   ══════════════════════════════════════════════ */

/* --- Body override when dashboard is present --- */
.survey-builder-body.builder-dashboard-body,
body:has(.builder-dashboard) {
  background-color: #FFFFFF !important;
  color: #1A1A1A;
  font-family: var(--survey-body-font);
}

.survey-builder-body.builder-dashboard-body::before,
body:has(.builder-dashboard)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: none;
}

.survey-builder-body.builder-dashboard-body [data-controller="survey-particles"],
.survey-builder-body.builder-dashboard-body canvas.fixed,
body:has(.builder-dashboard) [data-controller="survey-particles"],
body:has(.builder-dashboard) canvas.fixed {
  display: none !important;
}

/* --- Scoped warm-light container --- */
.builder-dashboard {
  --builder-brand: #3b40c4;
  --builder-brand-hover: #2e329e;
  --builder-brand-soft: #EEF2FF;
  --builder-brand-border: #C7D0FB;
  --builder-brand-text: #312E81;
  --builder-neutral: #6B7280;
  --builder-neutral-soft: #F8FAFC;
  --builder-neutral-border: #E5E7EB;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 96px;
  background-color: transparent;
  color: #1A1A1A;
  font-family: var(--survey-body-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.builder-dashboard > * {
  position: relative;
  z-index: 1;
}

/* --- Header --- */
.builder-dashboard-header {
  margin-bottom: 2.5rem;
}

.builder-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--builder-neutral);
  background: #FFFFFF;
  border: 1px solid var(--builder-neutral-border);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 16px;
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.builder-dashboard-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--builder-brand);
  flex-shrink: 0;
}

.builder-dashboard-header-text h1 {
  font-family: var(--survey-display-font);
  font-size: 2.25rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 0.35rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.builder-dashboard-header-text p {
  color: var(--builder-neutral);
  font-family: var(--survey-body-font);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

.builder-dashboard-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* --- Sections --- */
.builder-dashboard-sections {
  display: grid;
  gap: 48px 20px;
  margin-top: 16px;
}

.builder-dashboard-section {
  min-width: 0;
}

.builder-dashboard-section.is-hidden {
  display: none;
}

.builder-dashboard-section-label {
  font-family: var(--survey-display-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--builder-neutral);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--builder-neutral-border);
}

/* --- Toolbar (search + chips) --- */
.builder-dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.builder-dashboard-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 380px;
  background: #FFFFFF;
  border: 1px solid var(--builder-neutral-border);
  border-radius: 12px;
  padding: 0 0.75rem;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.builder-dashboard-search:focus-within {
  background: #FFFFFF;
  border-color: var(--builder-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--builder-brand) 10%, transparent);
}

.builder-dashboard-search svg {
  color: var(--builder-neutral);
  flex-shrink: 0;
}

.builder-dashboard-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #1A1A1A;
  font-family: var(--survey-body-font);
  font-size: 0.85rem;
  padding: 0.6rem 0.7rem;
}

.builder-dashboard-search input::placeholder {
  color: var(--builder-neutral);
}

.builder-dashboard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.builder-dashboard-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.72rem;
  background: #FFFFFF;
  border: 1px solid var(--builder-neutral-border);
  border-radius: 999px;
  color: var(--builder-neutral);
  font-family: var(--survey-body-font);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.builder-dashboard-chip:hover {
  color: #1A1A1A;
  border-color: var(--builder-brand-border);
  background: var(--builder-brand-soft);
}

.builder-dashboard-chip.is-active {
  background: var(--builder-brand);
  border-color: var(--builder-brand);
  color: #FFFFFF;
}

.builder-dashboard-chip.is-active .builder-dashboard-chip-count {
  color: #FFFFFF;
  opacity: 0.85;
}

.builder-dashboard-chip-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* --- Grid --- */
.builder-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* --- Dashboard cards --- */
.builder-dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid var(--builder-neutral-border);
  border-radius: 20px;
  padding: 22px;
  cursor: pointer;
  min-width: 0;
  transition: border-color 180ms ease, box-shadow 200ms ease, transform 200ms ease;
  box-shadow: 0 1px 0 rgba(26,26,26,0.02), 0 8px 24px -16px rgba(26,26,26,0.10);
}

.builder-dashboard-card:hover {
  border-color: var(--builder-brand-border);
  box-shadow: 0 1px 0 rgba(26,26,26,0.02), 0 16px 40px -20px rgba(26,26,26,0.16);
}

.builder-dashboard-card.is-hidden {
  display: none;
}

/* --- Top bar: platform pill + meta + status + menu --- */
.builder-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.builder-card-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 220px;
  flex-wrap: wrap;
  min-width: 0;
}

.builder-card-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* --- Platform pill --- */
.builder-card-platform {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.3;
}

.builder-card-platform--surveyswap {
  background: #E2ECFB;
  color: #2F6BD8;
}

.builder-card-platform--google-forms {
  background: #ECE4FB;
  color: #6B46C1;
}

.builder-card-platform--qualtrics {
  background: #DCEFE2;
  color: #2F8F4F;
}

.builder-card-platform--microsoft-forms {
  background: #D6EEEC;
  color: #1F8079;
}

.builder-card-platform--other {
  background: #ECE7DF;
  color: #6E665B;
}

.builder-card-import-source {
  color: var(--builder-neutral);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
}

/* --- Meta text --- */
.builder-card-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--builder-neutral);
  white-space: nowrap;
}

.builder-card-meta .builder-card-meta-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--builder-neutral);
  margin: 0 6px;
  vertical-align: middle;
}

/* --- Status badge --- */
.builder-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.3;
}

.builder-card-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.builder-card-status--live {
  background: #E4F1E8;
  color: #2E8B57;
}
.builder-card-status--live .builder-card-status-dot {
  background: #2E8B57;
}

.builder-card-status--draft,
.builder-card-status--blocked,
.builder-card-status--karma-needed,
.builder-card-status--deactive,
.builder-card-status--unlisted {
  background: var(--builder-brand-soft);
  color: var(--builder-brand-text);
}
.builder-card-status--draft .builder-card-status-dot,
.builder-card-status--blocked .builder-card-status-dot,
.builder-card-status--karma-needed .builder-card-status-dot,
.builder-card-status--deactive .builder-card-status-dot,
.builder-card-status--unlisted .builder-card-status-dot {
  background: var(--builder-brand);
}

.builder-card-status--paused,
.builder-card-status--closed {
  background: #E2ECFB;
  color: #2F6BD8;
}
.builder-card-status--paused .builder-card-status-dot,
.builder-card-status--closed .builder-card-status-dot {
  background: #2F6BD8;
}

/* --- Overflow menu --- */
.builder-card-menu {
  position: relative;
}

.builder-card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--builder-neutral);
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 120ms ease;
  line-height: 1;
}

.builder-card-menu-btn:hover {
  background: var(--builder-neutral-soft);
  border-color: var(--builder-neutral-border);
  color: #1A1A1A;
}

.builder-card-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  background: #FFFFFF;
  border: 1px solid var(--builder-neutral-border);
  border-radius: 12px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 12px 32px -10px rgba(26,26,26,0.18);
}

.builder-card-menu-dropdown.is-open {
  display: block;
}

.builder-card-menu-form {
  margin: 0;
}

.builder-card-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  font-weight: 500;
  color: #3A3A3A;
  text-decoration: none;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 100ms ease;
}

.builder-card-menu-item:hover {
  background: var(--builder-neutral-soft);
  color: #1A1A1A;
}

.builder-card-menu-item--danger {
  color: #C0392B;
}

.builder-card-menu-item--danger:hover {
  background: #F8E1DD;
  color: #C0392B;
}

/* --- Card body (title + description) --- */
.builder-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-height: 0;
}

.builder-card-title {
  font-family: var(--survey-display-font);
  font-size: 1.125rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.015em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.builder-card-title.is-untitled {
  color: #A29B90;
  font-style: italic;
}

.builder-card-desc {
  font-size: 13px;
  font-family: var(--survey-body-font);
  color: var(--builder-neutral);
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --- Progress bar --- */
.builder-card-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.builder-card-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-family: var(--survey-body-font);
  color: var(--builder-neutral);
}

.builder-card-progress-header b {
  font-family: var(--survey-display-font);
  color: #1A1A1A;
  font-weight: 700;
}

.builder-card-progress-karma {
  font-size: 12px;
  color: var(--builder-neutral);
}

.builder-card-progress-bar {
  height: 6px;
  background: var(--builder-neutral-soft);
  border: 1px solid var(--builder-neutral-border);
  border-radius: 999px;
  overflow: hidden;
}

.builder-card-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(90deg, var(--builder-brand-border), var(--builder-brand));
}

.builder-card-progress-fill--complete {
  background: linear-gradient(90deg, #4DB371, #2E8B57);
}

.builder-card-progress-fill--live,
.builder-card-progress-fill--paused,
.builder-card-progress-fill--closed,
.builder-card-progress-fill--karma-needed {
  background: linear-gradient(90deg, var(--builder-brand-border), var(--builder-brand));
}

/* --- Next-step CTA block --- */
.builder-card-nextstep {
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Brand variant (default). */
.builder-card-nextstep,
.builder-card-nextstep--brand,
.builder-card-nextstep--blue {
  background: var(--builder-brand-soft);
  border: 1px solid var(--builder-brand-border);
}

.builder-card-nextstep-label {
  font-family: var(--survey-display-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.builder-card-nextstep--brand .builder-card-nextstep-label,
.builder-card-nextstep--blue .builder-card-nextstep-label,
.builder-card-nextstep:not([class*="--"]) .builder-card-nextstep-label {
  color: var(--builder-brand);
}

.builder-card-nextstep-text {
  font-size: 13px;
  font-weight: 500;
  color: #3A3A3A;
  font-family: var(--survey-body-font);
}

.builder-card-nextstep-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--survey-body-font);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}

.builder-card-nextstep--brand .builder-card-nextstep-btn,
.builder-card-nextstep--blue .builder-card-nextstep-btn,
.builder-card-nextstep:not([class*="--"]) .builder-card-nextstep-btn {
  background: var(--builder-brand);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 10px -4px color-mix(in srgb, var(--builder-brand) 45%, transparent);
}

.builder-card-nextstep--brand .builder-card-nextstep-btn:hover,
.builder-card-nextstep--blue .builder-card-nextstep-btn:hover,
.builder-card-nextstep:not([class*="--"]) .builder-card-nextstep-btn:hover {
  background: var(--builder-brand-hover);
  transform: translateY(-1px);
}

/* Legacy CTA classes (backwards compat) */
.builder-card-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 12px;
  transition: all 140ms ease;
}

.builder-card-cta--primary {
  color: #FFFFFF;
  background: var(--builder-brand);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 10px -4px color-mix(in srgb, var(--builder-brand) 45%, transparent);
}

.builder-card-cta--primary:hover {
  background: var(--builder-brand-hover);
  transform: translateY(-1px);
}

.builder-card-cta--karma {
  color: #FFFFFF;
  background: var(--builder-brand);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 10px -4px color-mix(in srgb, var(--builder-brand) 45%, transparent);
}

.builder-card-cta--karma:hover {
  background: var(--builder-brand-hover);
  transform: translateY(-1px);
}

.builder-card-cta--warning {
  color: #FFFFFF;
  background: var(--builder-brand);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 10px -4px color-mix(in srgb, var(--builder-brand) 45%, transparent);
}

.builder-card-cta--warning:hover {
  background: var(--builder-brand-hover);
  transform: translateY(-1px);
}

.builder-card-cta--ok {
  color: #FFFFFF;
  background: #2E8B57;
}

/* --- Share link row --- */
.builder-card-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 12px;
  background: var(--builder-neutral-soft);
  border: 1px solid var(--builder-neutral-border);
  border-radius: 12px;
}

.builder-card-share svg {
  flex-shrink: 0;
  color: var(--builder-neutral);
}

.builder-card-share-url {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--survey-body-font);
  color: #3A3A3A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.builder-card-share-url .builder-card-share-prefix {
  color: var(--builder-neutral);
}

.builder-card-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #3A3A3A;
  background: #FFFFFF;
  border: 1px solid var(--builder-neutral-border);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 120ms ease;
}

.builder-card-share-btn:hover {
  background: var(--builder-neutral-soft);
  border-color: var(--builder-brand-border);
  color: #1A1A1A;
}

/* --- Blocked warnings --- */
.builder-card-blocked {
  padding: 16px 14px;
  background: #F8E1DD;
  border: 1px solid #F1C9C2;
  border-radius: 16px;
}

.builder-card-blocked-title,
.builder-card-blocked-feedback-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--survey-display-font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #C0392B;
  margin: 0 0 8px;
}

.builder-card-blocked-title svg,
.builder-card-blocked-feedback-title svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.builder-card-blocked-feedback-title {
  margin-top: 10px;
}

.builder-card-blocked-reasons,
.builder-card-blocked-feedback {
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-size: 12.5px;
  font-family: var(--survey-body-font);
  color: #3A3A3A;
  line-height: 1.6;
}

.builder-card-blocked-reasons li::marker,
.builder-card-blocked-feedback li::marker {
  color: #C0392B;
}

/* --- Stats footer --- */
.builder-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-top: 14px;
  font-size: 12px;
  font-family: var(--survey-body-font);
  color: var(--builder-neutral);
  border-top: 1px solid var(--builder-neutral-border);
}

.builder-card-footer b {
  color: #3A3A3A;
  font-weight: 600;
}

.builder-card-stats {
  display: flex;
  gap: 8px;
}

.builder-card-stats span {
  white-space: nowrap;
}

.builder-card-stats span b {
  color: #3A3A3A;
  font-weight: 600;
}

.builder-card-stats span.builder-card-responses-outside {
  color: var(--builder-neutral);
  cursor: help;
}

.builder-card-stats span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--builder-neutral);
  margin-right: 6px;
  vertical-align: middle;
}

.builder-card-stats span:first-child::before {
  display: none;
}

.builder-card-logic {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.builder-card-logic-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--builder-neutral-soft);
  border: 1px solid var(--builder-neutral-border);
  color: #3A3A3A;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
}

.builder-card-time {
  margin-left: auto;
  white-space: nowrap;
  font-size: 11.5px;
  font-style: italic;
  color: var(--builder-neutral);
}

/* --- Quick-action links --- */
.builder-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -6px;
}

.builder-card-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #3A3A3A;
  text-decoration: none;
  border-radius: 8px;
  transition: all 140ms ease;
  cursor: pointer;
  background: transparent;
  border: none;
}

.builder-card-action svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.builder-card-action:hover {
  background: var(--builder-neutral-soft);
  color: var(--builder-brand);
}

.builder-card-action + .builder-card-action::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--builder-neutral-border);
  margin-right: 4px;
  vertical-align: middle;
}

.builder-card-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder-card-menu-item svg {
  flex-shrink: 0;
}

/* --- Empty state --- */
.builder-dashboard-empty {
  max-width: 680px;
  margin: 3rem auto;
  text-align: center;
  padding: 2.5rem 2rem;
  background: #FFFFFF;
  border: 1px dashed var(--builder-neutral-border);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(26,26,26,0.02), 0 8px 24px -16px rgba(26,26,26,0.10);
}

.builder-dashboard-empty-icon {
  font-size: 2.75rem;
  margin-bottom: 0.75rem;
}

.builder-dashboard-empty h2 {
  font-family: var(--survey-display-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
}

.builder-dashboard-empty p {
  color: var(--builder-neutral);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* --- Action cards (empty state + top of dashboard) --- */
.builder-dashboard-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.builder-dashboard-actions--primary {
  margin: 0 0 1.5rem;
}

.builder-dashboard-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1rem;
  background: #FFFFFF;
  border: 1px solid var(--builder-neutral-border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 150ms ease;
  box-shadow: 0 1px 0 rgba(26,26,26,0.02), 0 8px 24px -16px rgba(26,26,26,0.10);
}

.builder-dashboard-action-card:hover {
  border-color: var(--builder-brand-border);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(26,26,26,0.02), 0 16px 40px -20px rgba(26,26,26,0.16);
}

.builder-dashboard-action-card h3 {
  font-family: var(--survey-display-font);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
}

.builder-dashboard-action-card p {
  font-size: 0.8rem;
  color: var(--builder-neutral);
  margin: 0 0 0.25rem;
  line-height: 1.5;
}

/* --- No results --- */
.builder-dashboard-no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--builder-neutral);
  font-size: 0.9rem;
}

.builder-dashboard-no-results.is-hidden {
  display: none;
}

/* Paid setup confirmation is a true viewport overlay, never an in-flow dashboard
   row. These properties intentionally override `.builder-dashboard > *`, which
   otherwise makes every direct child relative and constrains the modal to the
   dashboard content area. */
.paid-project-live-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.paid-project-live-modal.flex:not(.hidden) {
  display: flex;
}

/* --- Laptop and desktop dashboard layout --- */
@media (min-width: 1024px) {
  .builder-dashboard-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .builder-dashboard-section--wide {
    grid-column: 1 / -1;
  }

  .builder-dashboard-section--wide .builder-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Mobile breakpoint --- */
@media (max-width: 720px) {
  .builder-dashboard {
    padding: 0 16px 64px;
  }
  .builder-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .builder-dashboard-header-text h1 {
    font-size: 1.75rem;
  }
  .builder-dashboard-sections {
    gap: 40px;
  }
  .builder-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .builder-dashboard-card {
    padding: 18px;
  }
  .builder-card-topbar {
    flex-wrap: wrap;
  }
  .builder-card-share {
    flex-direction: column;
    align-items: flex-start;
  }
  .builder-card-nextstep {
    flex-direction: column;
    align-items: flex-start;
  }
  .builder-card-nextstep-btn {
    align-self: stretch;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════
   PUBLISH SUCCESS MODAL
   ══════════════════════════════════════════════ */

.publish-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 480px;
  width: calc(100vw - 2rem);
  color: var(--white);
  border-radius: 20px;
  overflow: visible;
  /* Tailwind Preflight zeroes margins on <dialog>; restore the
     auto-centering the user-agent stylesheet gives it. */
  margin: auto;
}

.publish-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}

.publish-modal[open] .publish-modal-card {
  animation: publish-modal-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes publish-modal-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.publish-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 2rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.publish-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--white-dim);
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.publish-modal-close:hover {
  background: var(--white-ghost);
  color: var(--white);
}

.publish-modal-badge {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--accent-dim);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  animation: survey-badge-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both;
}

.publish-modal-heading {
  font-family: var(--survey-body-font);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.35rem 0;
  line-height: 1.15;
}

.publish-modal-subtext {
  font-family: var(--survey-body-font);
  font-size: 14px;
  color: var(--white-dim);
  margin: 0 0 1.5rem 0;
}

.publish-modal-url-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.publish-modal-url-input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  font-family: var(--survey-body-font);
  font-size: 13px;
  color: var(--white);
  background: var(--white-ghost);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  outline: none;
  text-overflow: ellipsis;
}

.publish-modal-url-input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.publish-modal-copy-btn {
  padding: 0.6rem 1rem;
  font-family: var(--survey-body-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  background: var(--white-ghost);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

.publish-modal-copy-btn:hover {
  background: color-mix(in srgb, var(--white-ghost) 60%, var(--card));
  color: var(--white);
}

.publish-modal-copy-btn[data-state="copied"] {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.publish-modal-copy-btn[data-state="error"] {
  color: #ec4646;
  border-color: rgba(236, 70, 70, 0.4);
}

.publish-modal-actions {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}

.publish-modal-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  font-family: var(--survey-body-font);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--white-ghost);
  transition: all 180ms ease;
}

.publish-modal-btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 600;
}

.publish-modal-btn--primary:hover {
  box-shadow: 0 0 24px var(--accent-dim);
  transform: translateY(-1px);
}

.publish-modal-btn--secondary {
  background: transparent;
  color: var(--white-dim);
}

.publish-modal-btn--secondary:hover {
  color: var(--white);
  border-color: var(--white-faint);
}

@media (max-width: 480px) {
  .publish-modal-card {
    padding: 1.75rem 1.25rem 1.25rem;
  }
  .publish-modal-actions {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════
   PUBLISH CLUSTER (state-aware button + overflow menu)
   ══════════════════════════════════════════════ */

.publish-cluster {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}

.publish-cluster > .builder-btn:not(.publish-cluster-share):has(+ .publish-cluster-menu) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent-text) 20%, transparent);
}

.publish-cluster > .builder-btn--secondary:not(.publish-cluster-share) {
  border-right-color: var(--white-ghost);
}

.publish-cluster-share {
  gap: 0.4rem;
  margin-right: 0.5rem;
}

.publish-cluster-share svg {
  flex-shrink: 0;
}

.publish-cluster-menu {
  position: relative;
}

.publish-cluster-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 100%;
  padding: 0;
  font-family: inherit;
  color: var(--white-dim);
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.publish-cluster-menu-trigger:hover {
  color: var(--white);
  background: color-mix(in srgb, var(--card) 70%, var(--white-ghost));
}

.publish-cluster-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.publish-cluster-menu-panel.hidden {
  display: none;
}

.publish-cluster-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--survey-body-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--white-dim);
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.publish-cluster-menu-item:hover {
  color: var(--white);
  background: var(--white-ghost);
}

.publish-cluster-menu-item--danger {
  color: #ec4646;
}

.publish-cluster-menu-item--danger:hover {
  color: #ec4646;
  background: rgba(236, 70, 70, 0.1);
}

.publish-coachmark {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 160;
  width: min(300px, calc(100vw - 32px));
  padding: 1rem 2.75rem 1rem 1rem;
  font-family: var(--survey-body-font);
  color: #1c1917;
  text-align: left;
  background: #fff;
  border: 1px solid #d6d3d1;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 15, 22, 0.18);
}

.publish-coachmark[hidden] {
  display: none;
}

.publish-coachmark--with-menu {
  right: 34px;
}

.publish-coachmark::before {
  position: absolute;
  top: -7px;
  right: 38px;
  width: 12px;
  height: 12px;
  content: '';
  background: #fff;
  border-top: 1px solid #d6d3d1;
  border-left: 1px solid #d6d3d1;
  transform: rotate(45deg);
}

.publish-coachmark-copy {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.publish-coachmark .publish-coachmark-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATION
   ══════════════════════════════════════════════ */

.builder-toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 200;
  max-width: 360px;
  padding: 0.7rem 1rem;
  font-family: var(--survey-body-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  background: var(--card);
  border: 1px solid var(--white-ghost);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.builder-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.builder-toast--success {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.builder-toast--error {
  border-color: rgba(236, 70, 70, 0.5);
  color: #ec4646;
}

/* ================================================================
   TRANSLATION WORKSPACE
   ================================================================ */

.builder-translations-pane {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: calc(100vh - 96px);
  background: #f7f8fc;
  border-top: 1px solid #eceef5;
}

.builder-translations-pane[hidden],
.builder-translations-workspace[hidden],
.builder-translations-empty[hidden],
.builder-translations-toast[hidden] {
  display: none;
}

.builder-translations-sidebar {
  padding: 1.75rem 1rem;
  background: #fff;
  border-right: 1px solid #e7e9f1;
}

.builder-translations-sidebar-head {
  padding: 0 0.5rem 1.25rem;
}

.builder-translations-eyebrow {
  margin: 0 0 0.25rem;
  color: #3b40c4;
  font-family: var(--survey-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.builder-translations-sidebar h2,
.builder-translations-empty h2 {
  margin: 0;
  color: #111827;
  font-family: var(--survey-body-font);
  font-size: 20px;
  font-weight: 700;
}

.builder-translation-language {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e7e9f1;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.builder-translation-language:hover,
.builder-translation-language--active {
  background: #f8f8ff;
  border-color: #aeb4ff;
}

.builder-translation-language--active {
  box-shadow: 0 0 0 2px rgba(59, 64, 196, 0.08);
}

.builder-translation-language--source {
  cursor: default;
  background: #fafafa;
}

.builder-translation-language input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.builder-translation-language:focus-within {
  outline: 2px solid rgba(59, 64, 196, 0.35);
  outline-offset: 2px;
}

.builder-translation-language-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  color: #3b40c4;
  background: #eef0ff;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.builder-translation-language-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.builder-translation-language-copy strong {
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-translation-language-copy small {
  margin-top: 2px;
  color: #8b91a1;
  font-size: 11px;
}

.builder-translation-status-dot {
  width: 7px;
  height: 7px;
  background: #f59e0b;
  border-radius: 999px;
}

.builder-translation-status-dot--ready {
  background: #22a06b;
}

.builder-translation-add {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eceef5;
}

.builder-translation-add label {
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.builder-translation-add select,
.builder-translations-filter select {
  width: 100%;
  min-height: 38px;
  padding: 0 2rem 0 0.75rem;
  color: #1f2937;
  background: #fff;
  border: 1px solid #dfe2eb;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.builder-translation-sidebar-note {
  margin: 1rem 0.5rem 0;
  color: #9297a5;
  font-size: 11px;
  line-height: 1.5;
}

.builder-translations-main {
  position: relative;
  min-width: 0;
  padding: 2rem clamp(1.5rem, 4vw, 4rem) 5rem;
}

.builder-translations-workspace {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.builder-translations-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.builder-translations-header h1 {
  margin: 0.1rem 0 0.4rem;
  color: #111827;
  font-family: var(--survey-body-font);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.builder-translations-header-copy {
  flex: 1;
  max-width: 560px;
}

.builder-translations-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #6b7280;
  font-size: 12px;
}

.builder-translations-progress-copy span:last-child {
  color: #8b91a1;
}

.builder-translations-progress {
  height: 6px;
  margin-top: 0.55rem;
  overflow: hidden;
  background: #e9eaf2;
  border-radius: 999px;
}

.builder-translations-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #3b40c4;
  border-radius: inherit;
  transition: width 220ms ease;
}

.builder-translations-actions {
  display: flex;
  gap: 0.65rem;
  padding-top: 0.25rem;
}

.builder-translations-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.builder-translations-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(390px, 100%);
  padding: 0 0.75rem;
  color: #8b91a1;
  background: #fff;
  border: 1px solid #dfe2eb;
  border-radius: 10px;
}

.builder-translations-search:focus-within {
  border-color: #3b40c4;
  box-shadow: 0 0 0 3px rgba(59, 64, 196, 0.08);
}

.builder-translations-search input {
  width: 100%;
  min-height: 40px;
  color: #111827;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 13px;
}

.builder-translations-filter {
  display: grid;
  gap: 0.25rem;
  min-width: 150px;
}

.builder-translations-filter > span {
  color: #747b8b;
  font-size: 11px;
  font-weight: 700;
}

.builder-translations-table-head,
.builder-translation-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr) 118px;
  gap: 1rem;
}

.builder-translations-table-head {
  padding: 0.55rem 1rem;
  color: #7a8190;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.builder-translations-rows {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e4ed;
  border-radius: 15px;
  box-shadow: 0 10px 26px rgba(31, 41, 55, 0.045);
}

.builder-translation-row {
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eceef4;
}

.builder-translation-row:last-child {
  border-bottom: 0;
}

.builder-translation-source {
  min-width: 0;
}

.builder-translation-string-label {
  display: block;
  margin-bottom: 0.35rem;
  color: #8b91a1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.builder-translation-source p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #3f4653;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.builder-translation-input {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 0.7rem 0.75rem;
  color: #111827;
  background: #fff;
  border: 1px solid #dfe2eb;
  border-radius: 9px;
  outline: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.builder-translation-input:focus {
  border-color: #3b40c4;
  box-shadow: 0 0 0 3px rgba(59, 64, 196, 0.09);
}

.builder-translation-review {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  min-height: 32px;
  padding: 0.35rem 0.55rem;
  color: #9a6700;
  background: #fff7e6;
  border: 1px solid #f5d99b;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.builder-translation-review input {
  accent-color: #22a06b;
}

.builder-translation-row[data-status='reviewed'] .builder-translation-review {
  color: #16794a;
  background: #eaf8f1;
  border-color: #bce8d2;
}

.builder-translation-row[data-status='missing'] .builder-translation-review {
  color: #858b98;
  background: #f5f6f8;
  border-color: #e3e5ea;
  cursor: default;
}

.builder-translations-empty {
  display: grid;
  justify-items: center;
  max-width: 480px;
  margin: 12vh auto 0;
  text-align: center;
}

.builder-translations-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.25rem;
  color: #3b40c4;
  background: #eef0ff;
  border-radius: 18px;
  font-family: var(--survey-body-font);
  font-size: 24px;
  font-weight: 700;
}

.builder-translations-empty p,
.builder-translations-no-results {
  color: #737a89;
  font-size: 14px;
  line-height: 1.6;
}

.builder-translations-no-results {
  margin: 0;
  padding: 2.5rem;
  text-align: center;
}

.builder-translations-toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 120;
  max-width: 380px;
  padding: 0.8rem 1rem;
  color: #165c3b;
  background: #eaf8f1;
  border: 1px solid #bce8d2;
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.14);
  font-size: 13px;
  font-weight: 600;
}

.builder-translations-toast--error {
  color: #a33a27;
  background: #fff2ef;
  border-color: #f0c1b8;
}

@media (max-width: 900px) {
  .builder-translations-pane {
    grid-template-columns: 1fr;
  }

  .builder-translations-sidebar {
    border-right: 0;
    border-bottom: 1px solid #e7e9f1;
  }

  .builder-translations-sidebar > [data-survey-translations-target='languageList'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
  }

  .builder-translations-header,
  .builder-translations-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .builder-translations-actions {
    flex-wrap: wrap;
  }

  .builder-translations-table-head {
    display: none;
  }

  .builder-translation-row {
    grid-template-columns: 1fr;
  }
}

/* The workflow editor's dialogs live inside the fixed workflow pane, so they can't
   rise above the app's top bar on their own. Drop the bar behind them while one is open. */
body:has(.lm-logic-modal-overlay, .lm-track-modal-overlay, .lm-ending-modal-overlay, .lm-random-modal-overlay) .builder-shell-header {
  z-index: 0;
}

/* On phones the floating question list covers the questions themselves. */
@media (max-width: 767px) {
  .builder-minimap {
    display: none;
  }
}

/* ══════════════════════════════════════════════
   SAMPLELABS SKIN ("Builder C · Glass and dock")
   Albert Sans on a lavender-to-cream wash, frosted white cards and a floating
   dock. Overrides the ported SurveySwap look above.
   ══════════════════════════════════════════════ */

.survey-builder-body {
  --survey-display-font: "Albert Sans", "Helvetica Neue", Helvetica, sans-serif;
  --survey-body-font: "Albert Sans", "Helvetica Neue", Helvetica, sans-serif;
  --sl-lavender: #ecedfa;
  --sl-brand: #3b40c4;
  --sl-brand-dark: #2e329e;
  --sl-brand-soft: #ebecf9;
  --sl-brand-line: #a5a8f0;
  --sl-ink: #05061c;
  --sl-ink-muted: #3a3f55;
  --sl-ink-faint: #5a5f78;
  --sl-line: #c9cbe0;
  --sl-cream: #faf2e6;
  --sl-shadow-card: 0 10px 30px -18px rgba(5, 6, 28, 0.28), 0 1px 3px rgba(5, 6, 28, 0.05);
  --sl-shadow-brand: 0 18px 40px -20px rgba(59, 64, 196, 0.7);
  --sl-glass-shadow: 0 30px 60px -36px rgba(5, 6, 28, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  --sl-glass-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  --sl-glass-blur: saturate(180%) blur(20px);
  font-family: var(--survey-body-font);
}

.survey-builder-body,
.survey-builder-body.builder-dashboard-body,
body:has(.builder-dashboard) {
  background: linear-gradient(160deg, #ecedfa 0%, #f5f0f3 55%, #fbf3e8 100%) fixed !important;
}

/* Fade the page colour in behind the floating top bar so cards don't peek above it */
.builder-shell-header {
  background: linear-gradient(var(--sl-lavender) 70%, rgba(236, 237, 250, 0));
}

.builder-canvas {
  background: transparent;
}

/* Top bar buttons */
.builder-btn {
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--sl-line);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}

.builder-btn--secondary {
  background: #fff;
  color: var(--sl-ink);
}

.builder-btn--secondary:hover {
  border-color: var(--sl-brand);
  color: var(--sl-brand);
}

.builder-btn--primary {
  background: var(--sl-brand);
  border-color: var(--sl-brand);
  color: #fff;
}

.builder-btn--primary:hover {
  background: var(--sl-brand-dark);
  border-color: var(--sl-brand-dark);
  box-shadow: none;
  transform: none;
}

.builder-btn--icon {
  width: 44px;
  padding: 0;
  background: var(--sl-ink);
  border-color: var(--sl-ink);
  color: #fff;
}

.builder-btn--icon:hover {
  background: #1a1d40;
  border-color: #1a1d40;
}

/* Editor column, with the question list beside it on wide screens */
.builder-editor-inner {
  max-width: 824px;
  padding: 2.5rem 2rem 9rem;
}

@media (max-width: 767px) {
  .builder-editor-inner {
    padding: 1.5rem 1rem 12rem;
  }
}

@media (min-width: 1280px) {
  .builder-editor-inner {
    margin-left: max(1.5rem, calc(50% - 560px));
    margin-right: auto;
  }
}

/* Survey title: plain text on the wash */
.builder-intro-card {
  margin-bottom: 1rem;
  padding: 0 12px 20px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--sl-ink);
}

.builder-intro-card:hover {
  border-color: transparent;
}

.builder-intro-title,
.builder-intro-card .builder-intro-title.editable-text {
  margin-bottom: 0;
  font-family: var(--survey-display-font);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.builder-intro-subtitle,
.builder-intro-card .builder-intro-subtitle.editable-text {
  margin: 12px 0 0;
  color: var(--sl-ink-faint);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
}

.builder-intro-meta {
  display: block;
  margin: 18px 0 0;
  color: var(--sl-ink-faint);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .builder-intro-title,
  .builder-intro-card .builder-intro-title.editable-text {
    font-size: 36px;
  }
}

/* Question (page) cards: nearly solid white, so they skip the blur */
.page-block {
  margin-bottom: 1rem;
  padding: 1.75rem 2.5rem 2.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 32px;
  box-shadow: var(--sl-glass-shadow);
  transition: box-shadow 200ms ease;
}

/* The selected question: brand ring on its card and a filled number badge,
   matching the question list and the number in the dock */
.page-block:has(.q-block--active) {
  box-shadow: 0 0 0 2px var(--sl-brand), 0 24px 50px -28px rgba(59, 64, 196, 0.55);
}

.q-block--active .q-number {
  background: var(--sl-brand);
  color: #fff;
}

/* Where a dragged card will land */
.page-block.is-drop-target,
.q-block.is-drop-target {
  outline: 2px dashed var(--sl-brand-line);
  outline-offset: 6px;
}

.q-block.is-drop-target {
  border-radius: 16px;
}

.page-block.dragging,
.q-block.dragging {
  opacity: 0.45;
}

/* The page and question toolbars stay visible and share the card's top row */
.page-tb,
.q-tb {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.page-tb {
  margin-bottom: 1rem;
}

.page-tb > div,
.q-tb > div {
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.page-tb > div {
  gap: 0.5rem;
}

.page-tb .tb-btn.del {
  margin-left: 0.25rem;
}

.page-tb-chip,
.page-tb-layout {
  display: inline-flex;
  align-items: center;
  color: var(--sl-ink-faint);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.page-tb-layout {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(5, 6, 28, 0.05);
}

.q-tb {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.25rem auto;
}

.q-tb > div {
  justify-content: flex-end;
}

/* The left-edge rail already drags questions */
.q-tb > div > .drag-handle {
  display: none;
}

/* First question lifts its toolbar into the page row (only when no page header sits between) */
@media (min-width: 640px) {
  .page-tb + div[data-page-index] > .q-block:first-child > .q-tb {
    margin-top: calc(-40px - 1rem);
  }
}

.q-block:first-child {
  padding-top: 0;
}

.q-block:hover .q-inner {
  background: none;
}

.q-drag-rail {
  left: -1.75rem;
}

/* Type and Required live in the dock (builder_dock_controller), not on the card */
.q-tb .type-sw,
.q-tb .req-toggle {
  display: none;
}

/* Question number and indent: description and answers line up under the title */
.q-number {
  display: inline-flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--sl-brand-soft);
  color: var(--sl-brand-dark);
  font-size: 15px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .q-block[data-answer-block="true"] .q-inner > .builder-question-rich-description,
  .q-block[data-answer-block="true"] .q-inner > div[data-question-index] {
    padding-left: 46px;
  }
}

/* Toolbar controls */
.q-tb .tb-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  color: var(--sl-ink-faint);
}

.q-tb .tb-btn:hover {
  background: var(--sl-brand-soft);
  color: var(--sl-ink);
}

.q-tb .tb-btn.del:hover {
  background: #fdf1eb;
  color: #a63a17;
}

.q-tb .type-sw > .tb-btn {
  width: auto;
  gap: 0.5rem;
  padding: 0 1rem;
  border-radius: 9999px;
  background: var(--sl-brand-soft);
  color: var(--sl-ink);
  font-size: 15px;
  font-weight: 600;
}

.q-tb .type-sw > .tb-btn > span:first-child {
  color: var(--sl-brand);
}

.q-tb .type-sw > .tb-btn:hover {
  background: #e4e6f8;
}

.req-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 40px;
  padding: 0 1.125rem;
  border: 1.5px solid var(--sl-line);
  border-radius: 9999px;
  background: #fff;
  color: var(--sl-ink-faint);
  font-size: 15px;
  font-weight: 600;
}

.req-toggle:hover {
  border-color: var(--sl-brand);
  color: var(--sl-brand);
}

.req-toggle.active {
  background: var(--sl-brand);
  border-color: var(--sl-brand);
  color: #fff;
}

.req-toggle.active::before {
  content: "✓";
  font-weight: 700;
}

.req-toggle.active:hover {
  background: var(--sl-brand-dark);
  border-color: var(--sl-brand-dark);
  color: #fff;
}

/* Answer options: soft grey pills */
.pill-wrap {
  min-height: 48px;
  background: rgba(5, 6, 28, 0.05);
  border-color: transparent;
}

.pill-wrap:hover {
  border-color: rgba(5, 6, 28, 0.08);
}

.pill-wrap:focus-within {
  background: #fff;
  border-color: var(--sl-brand);
}

.pill-wrap [contenteditable] {
  padding-inline: 22px;
  color: var(--sl-ink);
  font-size: 16px;
  font-weight: 500;
}

.builder-choice-drag-handle {
  color: var(--sl-ink-faint);
}

.add-option-btn {
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  color: var(--sl-brand-dark);
  font-size: 16px;
  font-weight: 600;
}

.add-option-btn:hover {
  background: var(--sl-brand-soft);
  color: var(--sl-brand-dark);
}

/* End page: a lighter, more see-through card */
.builder-end-page {
  margin: 0 0 2rem;
  padding: 1.75rem 2.5rem 2.25rem;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 0;
  border-radius: 32px;
  box-shadow: var(--sl-glass-ring);
}

.builder-end-page-header {
  margin-bottom: 0.5rem;
}

.builder-end-page-eyebrow {
  padding: 0;
  background: none;
  color: var(--sl-ink-faint);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.builder-end-page-edit-hint {
  display: none;
}

.builder-end-page-content {
  margin: 0 -0.75rem;
  border-color: transparent;
  background: transparent;
}

.builder-end-page-content:hover {
  background: rgba(255, 255, 255, 0.5);
}

.builder-end-page-content:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--sl-brand-line);
  box-shadow: none;
}

.builder-end-page-content h1,
.builder-end-page-content h2,
.builder-end-page-content h3 {
  color: var(--sl-ink);
  font-family: var(--survey-display-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.builder-end-page-content p,
.builder-end-page-content li {
  color: var(--sl-ink-muted);
  font-size: 17px;
}

@media (max-width: 767px) {
  .page-block,
  .builder-end-page {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* Right-hand rail: question list and question settings */
.builder-rail {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 260px;
}

@media (min-width: 1280px) {
  .builder-rail {
    top: 7rem;
    bottom: auto;
    right: auto;
    left: calc(max(1.5rem, calc(50% - 560px)) + 844px);
    width: 280px;
  }
}

.builder-rail .builder-minimap {
  position: static;
  width: auto;
  max-height: calc(100vh - 18rem);
  max-height: calc(100dvh - 18rem);
  gap: 0.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 0;
  border-radius: 28px;
  box-shadow: 0 30px 60px -40px rgba(5, 6, 28, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.builder-minimap-header {
  padding: 0 0 0.25rem;
  border-bottom: 0;
}

.builder-minimap-label {
  color: var(--sl-ink);
  font-family: var(--survey-display-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.builder-minimap-header .builder-side-panel-strip-btn {
  color: var(--sl-ink);
}

.builder-minimap-item {
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 2px solid transparent;
  border-radius: 14px;
}

.builder-minimap-item:hover {
  background: #f5f5fc;
}

.builder-minimap-item--active,
.builder-minimap-item--active:hover {
  background: var(--sl-brand-soft);
}

.builder-minimap-item--active .builder-minimap-number {
  background: var(--sl-brand);
  color: #fff;
}

.builder-minimap-item--active .builder-minimap-title {
  color: var(--sl-brand-dark);
}

/* Dragging in the question list (question_list React island) */
.builder-minimap-item {
  touch-action: manipulation;
  user-select: none;
}

.builder-minimap-item .minimap-drag-handle {
  color: var(--sl-ink-faint);
}

.builder-minimap-item--placeholder {
  background: rgba(59, 64, 196, 0.06);
  box-shadow: inset 0 0 0 2px var(--sl-brand-line);
}

.builder-minimap-item--placeholder > * {
  opacity: 0;
}

.builder-minimap-item--lifted {
  background: #fff;
  box-shadow: 0 18px 36px -14px rgba(5, 6, 28, 0.35), 0 0 0 1px rgba(59, 64, 196, 0.12);
  cursor: grabbing;
  transform: scale(1.02);
}

.builder-minimap-item--lifted .minimap-drag-handle {
  opacity: 1;
}

.builder-minimap-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sl-brand-soft);
  color: var(--sl-brand-dark);
  font-size: 13px;
}

.builder-minimap-title {
  color: var(--sl-ink);
  font-size: 15px;
  font-weight: 600;
}

.builder-minimap-type-icon {
  color: var(--sl-brand);
}

.builder-minimap-type-icon svg {
  width: 18px;
  height: 18px;
}

.builder-minimap-add {
  padding: 0.75rem;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--sl-brand-dark);
  font-size: 15px;
  font-weight: 600;
}

.builder-minimap-add:hover {
  background: var(--sl-brand-soft);
  color: var(--sl-brand-dark);
}

.builder-rail .builder-side-panel-strip {
  position: static;
  width: auto;
  padding: 0;
  transform: none;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 30px 60px -40px rgba(5, 6, 28, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.builder-side-panel-strip .builder-side-panel-strip-btn {
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  height: auto;
  padding: 1rem 1.25rem;
  border-radius: 20px;
  color: var(--sl-ink);
  font-size: 15px;
  font-weight: 600;
}

.builder-side-panel-strip .builder-side-panel-strip-btn svg {
  color: var(--sl-brand);
}

.builder-side-panel-strip .builder-side-panel-strip-btn:hover {
  background: #f5f5fc;
  color: var(--sl-ink);
}

.builder-side-panel {
  background: #fff;
  box-shadow: -12px 0 30px -18px rgba(5, 6, 28, 0.28);
}

.builder-side-panel-header {
  background: #fff;
}

/* Below 1280px the rail sits bottom right, above the dock */
@media (max-width: 1279px) {
  .builder-rail {
    bottom: 6.5rem;
  }
}

/* On phones the question list is hidden, so the rail shrinks to a settings button */
@media (max-width: 767px) {
  .builder-rail {
    right: 1rem;
    bottom: 9.5rem;
    width: auto;
  }

  .builder-side-panel-strip-label {
    display: none;
  }
}

/* ── Workflow tab ── */

.builder-workflow-pane {
  inset: 96px 0 0 0;
  padding: 1rem 1.5rem 6.5rem;
  background: transparent;
}

.builder-workflow-pane .logic-map-app {
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 60px -40px rgba(5, 6, 28, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

@media (max-width: 1023px) {
  .builder-workflow-pane {
    inset: 144px 0 0 0;
    padding: 0.75rem 0.75rem 9rem;
  }
}

.workflow-canvas-island {
  position: relative;
  inset: auto;
}

.lm-canvas-shell .react-flow__background-pattern {
  fill: rgba(59, 64, 196, 0.22) !important;
}

.lm-rail {
  background: #fff;
  border-right: 1px solid var(--sl-brand-soft);
}

.lm-panel-tabs {
  margin: 0.75rem;
  padding: 0.3rem;
  border: 0;
  border-radius: 14px;
  background: var(--sl-brand-soft);
}

.lm-panel-tab {
  border-radius: 10px;
  color: var(--sl-ink-muted);
  font-size: 13px;
  font-weight: 600;
}

.lm-panel-tab:hover {
  color: var(--sl-ink);
}

.lm-panel-tab--active {
  background: #fff;
  color: var(--sl-brand);
  box-shadow: 0 1px 2px rgba(5, 6, 28, 0.08);
}

.lm-panel-section-label,
.lm-panel-add-label {
  color: var(--sl-ink);
  font-family: var(--survey-display-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.lm-panel-empty {
  border: 2px dashed var(--sl-brand-line);
  border-radius: 14px;
  background: none;
  color: var(--sl-ink-faint);
  font-size: 13px;
  font-weight: 400;
}

.lm-panel-rule {
  border: 0;
  border-radius: 14px;
  background: #f5f5fc;
}

.lm-panel-add input,
.lm-panel-add select {
  border: 1.5px solid var(--sl-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sl-ink);
  font-size: 13px;
}

.lm-panel-add button {
  border: 0;
  border-radius: 12px;
  background: var(--sl-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.lm-panel-add button:hover {
  background: var(--sl-brand-dark);
}

/* Nodes are white cards like the editor's question cards */
.lm-node {
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow: var(--sl-shadow-card);
}

.lm-node:hover,
.react-flow__node.selected .lm-node {
  border-color: var(--sl-brand-line);
}

.lm-node--start {
  border: 0;
  background: var(--sl-brand);
  color: #fff;
  box-shadow: var(--sl-shadow-brand);
}

.lm-node--start .lm-node-dot {
  background: #fff;
}

.lm-node--start .lm-node-label {
  color: #fff;
}

.lm-node-type-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--sl-brand-soft);
  color: var(--sl-brand);
}

.lm-node-type-label {
  color: var(--sl-ink-faint);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.lm-node-number {
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
  background: var(--sl-brand);
  color: #fff;
  font-size: 11px;
}

.lm-node-title {
  color: var(--sl-ink);
  font-family: var(--survey-display-font);
  font-size: 15px;
  font-weight: 700;
}

.lm-node--ending {
  background: var(--sl-cream);
  border-color: #f0b49c;
}

.lm-add-ending-button {
  border: 2px dashed var(--sl-brand-line);
  background: #fff;
  color: var(--sl-brand);
  font-size: 12px;
  box-shadow: none;
}

.lm-add-ending-button:hover,
.lm-add-ending-button:focus-visible,
.lm-add-ending-button[aria-expanded="true"] {
  border-color: var(--sl-brand);
  background: #f5f5fc;
  color: var(--sl-brand);
}

.lm-canvas-shell .react-flow__controls,
.lm-canvas-shell .react-flow__minimap {
  border: 0;
  border-radius: 14px;
  box-shadow: var(--sl-shadow-card);
}

/* ── Translations tab ── */

.builder-translations-pane {
  gap: 1.25rem;
  padding: 1rem 1.5rem 8rem;
  background: transparent;
  border-top: 0;
}

.builder-translations-sidebar {
  align-self: start;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 0;
  border-radius: 28px;
  box-shadow: 0 30px 60px -40px rgba(5, 6, 28, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.builder-translations-eyebrow {
  display: none;
}

.builder-translations-sidebar h2,
.builder-translations-empty h2,
.builder-translations-header h1 {
  color: var(--sl-ink);
  font-family: var(--survey-display-font);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.builder-translations-main {
  padding: 1rem 0 4rem;
}

.builder-translation-language {
  border: 2px solid transparent;
  border-radius: 14px;
  background: #f5f5fc;
}

.builder-translation-language:hover,
.builder-translation-language--active {
  background: #fff;
  border-color: var(--sl-brand);
  box-shadow: none;
}

.builder-translation-language-code {
  background: var(--sl-brand-soft);
  color: var(--sl-brand);
}

.builder-translations-rows {
  border: 0;
  border-radius: 28px;
  box-shadow: var(--sl-glass-shadow);
}

.builder-translation-row {
  border-bottom-color: var(--sl-brand-soft);
}

@media (max-width: 1023px) {
  .builder-translations-pane {
    padding: 0.75rem;
  }
}

/* ── Results tab ── */

.builder-results-pane,
.builder-results-page {
  --results-bg: transparent;
  --results-border: #e4e6f8;
  --results-border-strong: var(--sl-line);
  --results-text: var(--sl-ink);
  --results-text-muted: var(--sl-ink-faint);
  --results-hover: #f5f5fc;
  --results-active: var(--sl-brand-soft);
  --results-accent: var(--sl-brand);
}

.builder-results-pane {
  inset: 96px 0 0 0;
  padding: 0.5rem 1.5rem 7rem;
}

@media (max-width: 1023px) {
  .builder-results-pane {
    inset: 144px 0 0 0;
  }
}

/* Tabs sit on the wash; the table is one frosted card below them and the
   Summary charts are a scroll of their own cards (survey_results.css). */
.builder-results-shell {
  width: 100%;
  max-width: 1376px;
  margin: 0 auto;
  background: transparent;
}

.results-views {
  padding: 0 0.25rem 1rem;
}

.results-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border-radius: 28px;
  box-shadow: var(--sl-glass-shadow);
}

.results-card.builder-results-empty {
  flex: none;
  padding: 4rem 1.5rem;
}

.results-outcome-summary-note {
  padding-left: 0;
  border-left: 0;
  font-size: 13px;
}

.results-toolbar {
  padding: 0.75rem 1.25rem;
  background: transparent;
}

.results-search-input,
.results-icon-btn {
  border-radius: 12px;
}

.results-th {
  font-weight: 600;
}

.builder-results-empty {
  gap: 0.6rem;
}

.builder-results-empty-icon {
  margin-bottom: 0.25rem;
}

.builder-results-empty-title {
  font-family: var(--survey-display-font);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.builder-results-empty-body {
  color: var(--sl-ink-faint);
  font-size: 15px;
}

/* Full page (opening /studies/:id/results directly): title on the wash, card below */
.builder-results-page {
  height: calc(100vh - 96px);
  padding: 0.5rem 1.5rem 1.5rem;
  background: transparent;
}

.builder-results-page-head {
  width: 100%;
  max-width: 1376px;
  margin: 0 auto;
  padding: 0 0.25rem 1.25rem;
  background: transparent;
  border-bottom: 0;
}

.builder-results-page-head-text h1 {
  margin-top: 0.4rem;
  color: var(--sl-ink);
  font-family: var(--survey-display-font);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.builder-results-page-head-text p {
  color: var(--sl-ink-faint);
  font-size: 15px;
}

.builder-results-page-back {
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .builder-results-page {
    height: calc(100vh - 144px);
  }
}

@media (max-width: 720px) {
  .builder-results-pane,
  .builder-results-page {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .results-card {
    border-radius: 22px;
  }
}

/* ── Dock ──
   Floats at the bottom on every tab. Question, type and Required only show on Content. */

.builder-dock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 6px;
  transform: translateX(-50%);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  box-shadow: 0 24px 50px -22px rgba(5, 6, 28, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.builder-dock-question-tools {
  display: contents;
}

body:has(.builder-canvas[hidden]) .builder-dock-question-tools {
  display: none;
}

/* Protect swaps Preview for a way back to the questions */
.builder-dock .builder-dock-back,
body:has(.builder-protect-pane:not([hidden])) .builder-dock-preview {
  display: none;
}

body:has(.builder-protect-pane:not([hidden])) .builder-dock-back {
  display: inline-flex;
}

.builder-dock-btn,
.builder-dock .builder-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--sl-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease;
}

.builder-dock-btn:hover,
.builder-dock .builder-btn--secondary:hover {
  background: rgba(5, 6, 28, 0.05);
  color: var(--sl-ink);
}

.builder-dock .builder-btn--primary {
  padding: 0 22px;
  background: var(--sl-brand);
  color: #fff;
}

.builder-dock .builder-btn--primary:hover {
  background: var(--sl-brand-dark);
  color: #fff;
}

.builder-dock .publish-cluster {
  gap: 2px;
}

.builder-dock .publish-cluster > .builder-btn:not(.publish-cluster-share):has(+ .publish-cluster-menu) {
  border-right: 0;
  border-radius: 18px;
}

.builder-dock .publish-cluster-share {
  margin-right: 2px;
}

.builder-dock .publish-cluster-menu-trigger {
  width: 40px;
  min-height: 48px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--sl-ink);
}

.builder-dock .publish-cluster-menu-trigger:hover {
  background: rgba(5, 6, 28, 0.05);
}

.builder-dock .publish-cluster-menu-panel {
  top: auto;
  bottom: calc(100% + 10px);
}

/* Dot, the companion. Shown but not clickable yet. */
.builder-dock-companion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border-radius: 18px;
  background: rgba(5, 6, 28, 0.05);
  color: var(--sl-ink);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
}

.builder-dock-divider {
  width: 1px;
  height: 24px;
  margin: 0 8px;
  background: rgba(5, 6, 28, 0.12);
}

/* Required switch */
.builder-dock-switch {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  height: 24px;
  padding: 2px;
  border-radius: 9999px;
  background: rgba(5, 6, 28, 0.16);
  transition: background 150ms ease;
}

.builder-dock-switch > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(5, 6, 28, 0.3);
  transition: transform 150ms ease;
}

[aria-checked="true"] > .builder-dock-switch {
  background: var(--sl-brand);
}

[aria-checked="true"] > .builder-dock-switch > span {
  transform: translateX(16px);
}

/* Menus open upward from the dock */
.builder-dock .type-sw {
  position: relative;
}

.builder-dock .type-dd {
  top: auto;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 220px;
  max-height: min(440px, 60vh);
  overflow-y: auto;
  transform: translateX(-50%);
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 50px -22px rgba(5, 6, 28, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.builder-dock .new-question-wrap {
  position: relative;
}

.builder-dock .new-question-menu {
  top: auto;
  bottom: calc(100% + 12px);
  left: 0;
  transform: none;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 50px -22px rgba(5, 6, 28, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* Toasts sit above the dock */
.builder-toast {
  bottom: 6.5rem;
}

@media (max-width: 767px) {
  .builder-dock {
    bottom: 12px;
  }

  .builder-dock-divider {
    display: none;
  }

  .builder-dock-btn,
  .builder-dock .builder-btn {
    min-height: 44px;
    padding: 0 12px;
  }
}

/* Number of the selected question in the dock, same badge as on its card */
.builder-dock-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--sl-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

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

/* Confirm dialog (studies/_confirm_dialog), used instead of the browser's confirm() */
.builder-confirm {
  width: calc(100vw - 2rem);
  max-width: 420px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--sl-ink);
  overflow: visible;
}

.builder-confirm::backdrop {
  background: rgba(5, 6, 28, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.builder-confirm[open] .builder-confirm-card {
  animation: publish-modal-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.builder-confirm-card {
  padding: 1.75rem;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  box-shadow: 0 30px 70px -30px rgba(5, 6, 28, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  font-family: var(--survey-body-font);
}

.builder-confirm-title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.builder-confirm-body {
  margin: 0.5rem 0 0;
  color: var(--sl-ink-faint);
  font-size: 15.5px;
  line-height: 1.5;
}

.builder-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.builder-confirm-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: rgba(5, 6, 28, 0.05);
  color: var(--sl-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.builder-confirm-btn:hover {
  background: rgba(5, 6, 28, 0.09);
}

.builder-confirm-btn:focus-visible {
  outline: 2px solid var(--sl-brand);
  outline-offset: 2px;
}

.builder-confirm-btn--primary {
  background: var(--sl-brand);
  color: #fff;
}

.builder-confirm-btn--primary:hover {
  background: var(--sl-brand-dark);
}

.builder-confirm-btn--primary[data-tone="danger"] {
  background: #b8401e;
}

.builder-confirm-btn--primary[data-tone="danger"]:hover {
  background: #9c3517;
}