/* gameplay-generator — generated by scripts/tools-v2/build-tool-css.js from
   views/v1-backup/tools-gameplay-generator.ejs. DO NOT EDIT BY HAND: npm run test:tools-page-v2
   regenerates it and fails if this file has drifted.

   The shared vocabulary (.btn-primary, .form-input, .tool-card, .badge-*,
   .toast-*, #map, headings) is NOT here — public/css/tools-page-v2.css
   declares it once for every tool page. What is left is this tool's own,
   with its colour literals resolved to theme tokens and every selector
   scoped to the tool body so nothing reaches the shared header. */

.tpv2-body .tab-button {
  transition: all 0.2s ease-in-out;
}

.tpv2-body .tab-button.active {
  background-color: var(--sk-info);
  color: white;
}

.tpv2-body .card {
  border-radius: 0.375rem;
  overflow: hidden;
}

.tpv2-body .card-header {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.tpv2-body .setting-item {
  padding: 0.5rem 0;
}

.tpv2-body .CodeMirror {
  height: 400px;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
}

.tpv2-body .config-updated {
  animation: highlight 0.5s ease-in-out;
}

@keyframes highlight {
  0% { background-color: var(--sk-info-soft); }
  100% { background-color: transparent; }
}

.tpv2-body .tags-dropdown {
  max-height: 200px;
  overflow-y: auto;
}

.tpv2-body .tagify__tag {
  margin: 5px 0 5px 5px;
}

.tpv2-body .tagify__input {
  margin: 5px;
  min-width: 110px;
}

.tpv2-body .tagify__dropdown {
  position: absolute !important;
  background: var(--sk-surface);
  border: 1px solid var(--sk-border-2);
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 999 !important;
  /* Remove max-height from this element */
  max-height: none !important;
  /* Remove overflow from this element */
  overflow: visible !important;
}

.tpv2-body .tagify__dropdown .tagify__dropdown__wrapper {
  max-height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.tpv2-body .tagify__dropdown__wrapper > div {
  overflow: visible !important;
}

.tpv2-body .tags-dropdown {
  overflow: visible !important;
}

.tpv2-body .tagify__dropdown * {
  /* This is an aggressive fix but should work */
  overflow: visible !important;
}