/* Qgen editor visual refresh — CSS overlay, no source access */
@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');

/* Unify the three main editor cards (questions list / editor / settings)
   which already share border+rounded-2xl but had no depth */
.border.border-slate-200.rounded-2xl {
  border-color: #e7e9f5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(79, 70, 229, 0.14);
}

/* Data card used a different radius/shadow (rounded-lg + shadow-md) than
   its siblings (rounded-2xl) — bring it in line */
.shadow-md.rounded-lg.lg\:mt-5 {
  border-radius: 1rem;
  border-color: #e7e9f5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(79, 70, 229, 0.14);
}

/* Sidebar icon rail: subtle depth instead of flat navy, tighter rhythm */
.bg-slate-900 {
  background: linear-gradient(180deg, #201c44 0%, #0f172a 100%);
}
.bg-slate-900 .rounded-full.bg-\[\#4F46E5\] {
  box-shadow: 0 4px 14px -2px rgba(79, 70, 229, 0.6);
}
.bg-slate-900 .rounded-full:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Question list row: fix the white-text-on-light-gray contrast bug,
   add a brand-colored active indicator and hover state */
.px-4.py-4.bg-gray-200.text-white {
  background: #eef2ff;
  color: #312e81;
  border-radius: 0.75rem;
  border-left: 3px solid #4F46E5;
  transition: background-color 0.15s ease;
}
.px-4.py-4.bg-gray-200.text-white:hover {
  background: #e0e7ff;
}
.px-4.py-4.bg-gray-200.text-white p {
  color: #312e81 !important;
}

/* Bring the marketing pages' display font into the app shell for
   section titles, so the two feel like one product */
h2.text-md.font-bold.text-slate-900,
h3.text-md.font-bold.text-slate-900,
h2.text-md.font-bold.text-gray-800 {
  font-family: 'Calistoga', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.1rem;
}

header span.font-bold.text-slate-900 {
  font-family: 'Calistoga', serif;
  font-weight: 400;
  font-size: 1.05rem;
}

/* === Responsive fixes ===
   Below lg (1024px) the 3-column editor tries to fit into a row that's
   too narrow (sm:flex/md:flex both kick in before there's room), causing
   truncated text and wrapped buttons. Stack it instead, and let the
   h-screen/h-5/6 panels (sized for equal-height desktop columns) size to
   their actual content instead of forcing near-full-viewport blocks. */
@media (max-width: 1023.98px) {
  .md\:flex.sm\:flex.lg\:flex.p-6.gap-6 {
    flex-direction: column;
  }
  .lg\:w-\[30\%\],
  .lg\:w-\[46\%\],
  .lg\:w-\[25\%\] {
    width: 100% !important;
  }
  /* the left panel is itself a row (icon rail + questions list) that no
     longer has room to sit side-by-side once full-width; stack it too */
  .lg\:w-\[30\%\] {
    flex-direction: column;
  }
  .h-screen,
  .h-5\/6,
  .max-h-max {
    height: auto !important;
    max-height: none !important;
  }
  .bg-slate-900 {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
  }
}

@media (max-width: 639.98px) {
  .md\:flex.sm\:flex.lg\:flex.p-6.gap-6 {
    padding: 1rem;
    gap: 1rem;
  }
}