/* Custom scrollbars (light) */
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* JSON syntax tokens (light theme) */
.tok-key  { color: #2563eb; }    /* blue-600 */
.tok-str  { color: #047857; }    /* emerald-700 */
.tok-num  { color: #b45309; }    /* amber-700 */
.tok-bool { color: #b91c1c; }    /* red-700 */
.tok-punct { color: #64748b; }   /* slate-500 */
.tok-null { color: #b91c1c; }

/* Disclosure triangle on details */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: '▸';
  display: inline-block;
  width: 0.9em;
  color: #94a3b8;
  transition: transform 150ms ease;
}
details[open] > summary::before { transform: rotate(90deg); }

/* JSON tree rows */
.json-row { display: block; padding-left: 1rem; line-height: 1.5; }
.json-row.diff-changed { background: rgba(245,158,11,0.10); border-left: 2px solid #f59e0b; padding-left: 0.875rem; }
.json-row.diff-added   { background: rgba(16,185,129,0.10); border-left: 2px solid #10b981; padding-left: 0.875rem; }
.json-row.diff-removed { background: rgba(239,68,68,0.10);  border-left: 2px solid #ef4444; padding-left: 0.875rem; }

/* Accordion chevron */
.accordion-chev { transition: transform 150ms ease; }
details[open] > summary > .accordion-chev { transform: rotate(90deg); }

/* Pulse for prod indicator */
@keyframes recPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
.rec-pulse { animation: recPulse 1.6s ease-in-out infinite; }

/* Skeleton shimmer (light) */
@keyframes recShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.rec-skeleton {
  background-image: linear-gradient(90deg, #f1f5f9 0px, #e2e8f0 40px, #f1f5f9 80px);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: recShimmer 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rec-pulse, .rec-skeleton { animation: none; }
  details > summary::before { transition: none; }
  .accordion-chev { transition: none; }
}

/* Default: hide native number-input up/down spinners so the value column has
   more room for placeholder text. Users type the values directly. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Override: keep spinners on inputs explicitly opted in (small-range integer
   fields where ±1 is a meaningful nudge — e.g. % Discount, $ Discount). */
input[type=number].int-input::-webkit-outer-spin-button,
input[type=number].int-input::-webkit-inner-spin-button {
  -webkit-appearance: auto;
}
input[type=number].int-input {
  -moz-appearance: auto;
  appearance: auto;
}