/* TinyBench Tools — small custom styles on top of Tailwind CDN */

/* Drag & drop highlight */
.drop-zone {
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.drop-zone.drag-over {
  border-color: #34d399 !important;
  background-color: rgba(52, 211, 153, 0.07) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

/* Highlighted IDs in the source-text view (tool 1) */
mark.tb-hit {
  background: rgba(52, 211, 153, 0.28);
  color: #d1fae5;
  border-radius: 0.25rem;
  padding: 0 0.12rem;
  outline: 1px solid rgba(52, 211, 153, 0.45);
}

/* Slim dark scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Monospace text areas & outputs */
.tb-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Tab buttons (tool 3) */
.tb-tab {
  transition: color 0.15s ease, background-color 0.15s ease;
}
.tb-tab.active {
  background-color: #262626;
  color: #fafafa;
}

/* Subtle reveal for result sections */
.tb-results {
  animation: tb-fade 0.25s ease both;
}
@keyframes tb-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}