/* Works with Tailwind CDN (no @apply). High-contrast inputs, big buttons, ripple, slider, error states. */
/* Modal: lock background scroll when open */
body.modal-open { overflow: hidden; }



/* --- Likert buttons --- */
.likert-btn{
  width:100%;
  border-radius:0.5rem;
  padding:0.75rem 1rem;
  background:#1f2937;            /* slate-800 */
  color:#e5e7eb;                  /* slate-200 */
  text-align:left;
  font-size:0.95rem;
  border:1px solid #334155;       /* slate-700 */
  transition:background .15s, transform .1s, border-color .15s, box-shadow .15s;
  position:relative; overflow:hidden;
}
.likert-btn:hover{ background:#334155; }            /* slate-700 */
.likert-btn.active{
  background:#4f46e5; border-color:#818cf8;         /* indigo-600 ring */
  box-shadow:0 0 0 2px rgba(129,140,248,.35) inset;
}
.kts-press.pressed{ transform:scale(.99); }

/* Ripple */
.kts-ripple-ink{
  position:absolute; width:12rem; height:12rem; border-radius:9999px;
  transform:translate(-50%,-50%); pointer-events:none; opacity:.25;
  background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%);
  animation:kts-ripple .4s ease-out forwards;
}
@keyframes kts-ripple{ from{ transform:translate(-50%,-50%) scale(.2);} to{ transform:translate(-50%,-50%) scale(1);} }

/* --- Inputs --- */
.kts-input{
  width:100%;
  border-radius:0.5rem;
  background:#0f172a;          /* slate-900 */
  color:#e2e8f0;               /* slate-200 */
  border:1px solid #334155;    /* slate-700 */
  padding:0.55rem 0.75rem;
  font-size:0.95rem;
  outline:none;
  caret-color:#818cf8;         /* indigo-400 */
}
.kts-input::placeholder{ color:#64748b; } /* slate-500 */
.kts-input:focus{
  border-color:#6366f1;        /* indigo-500 */
  box-shadow:0 0 0 2px rgba(99,102,241,.35);
}
.kts-input-error{
  border-color:#fb7185 !important; /* rose-400 */
  box-shadow:0 0 0 2px rgba(251,113,133,.35) !important;
}

/* Labels/help */
.kts-label{ color:#cbd5e1; font-size:.9rem; margin-bottom:.25rem; display:block; }
.kts-help{ color:#94a3b8; font-size:.78rem; margin-top:.25rem; display:block; }
.kts-field{ display:flex; flex-direction:column; }

/* Checkbox */
.kts-checkbox{
  appearance:none; width:1rem; height:1rem; border-radius:0.25rem;
  border:1px solid #475569; background:#0f172a; display:grid; place-items:center;
}
.kts-checkbox:checked{
  background:linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color:transparent;
}

/* Slider */
.kts-range{
  appearance:none; height:0.5rem; border-radius:9999px; outline:none;
  background:linear-gradient(90deg,#0f172a 0%, #6366f1 50%, #0f172a 100%);
}
.kts-range::-webkit-slider-thumb{
  appearance:none; width:28px; height:28px; border-radius:9999px; background:#fff;
  box-shadow:0 0 0 4px rgba(99,102,241,.35); cursor:pointer; transition:transform .1s;
}
.kts-range:active::-webkit-slider-thumb{ transform:scale(.95); }
.kts-range::-moz-range-thumb{
  width:28px; height:28px; border-radius:9999px; background:#fff; border:0;
  box-shadow:0 0 0 4px rgba(99,102,241,.35); cursor:pointer;
}

/* Feedback */
.shake{ animation:kts-shake .3s; }
@keyframes kts-shake{
  0%{transform:translateX(0)}25%{transform:translateX(-3px)}
  50%{transform:translateX(3px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}
}

/* Print cleanup */
@media print{
  body{ background:#fff; color:#000; }
  #btn-export,#btn-print,#btn-clear{ display:none !important; }
}
/* Modal fade (optional smoothness) */
#demo-modal { transition: opacity .15s ease; }
#demo-modal.hidden { opacity: 0; pointer-events: none; }

/* Modal panel vertical scroll */
#demo-modal .modal-panel {
  max-height: 85vh;          /* keeps it within the viewport */
  overflow-y: auto;          /* scrolls if content is tall */
}