/* ============================================================
   semantic-diff.css — Semantic differential (bipolar tap-dots)
   ============================================================ */

.sd-container {
  width: 100%; display: flex; flex-direction: column;
  gap: 12px; user-select: none;
}

.sd-row { display: flex; align-items: center; gap: 10px; }

.sd-pole {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85);
  width: 88px; flex-shrink: 0; line-height: 1.2;
}
.sd-pole-left  { text-align: right; }
.sd-pole-right { text-align: left; }

.sd-track {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 4px; position: relative; min-width: 0; padding: 6px 8px;
}
/* gradient connector behind the dots */
.sd-track::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: 50%;
  height: 3px; transform: translateY(-50%); z-index: 0; border-radius: 2px;
  background: linear-gradient(to right, rgba(0,201,177,0.45), rgba(245,158,11,0.45));
}

.sd-dot {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.32);
  background: rgba(18,20,28,0.65);
  cursor: pointer; padding: 0; outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, box-shadow 0.14s ease,
              background 0.14s ease, border-color 0.14s ease;
}
.sd-dot:hover {
  transform: scale(1.15);
  border-color: rgba(255,255,255,0.6);
}
.sd-dot:active { transform: scale(0.95); }
.sd-dot.selected {
  background: var(--sd-color, #00c9b1);
  border-color: var(--sd-color, #00c9b1);
  transform: scale(1.5);
  box-shadow: 0 0 14px var(--sd-color, #00c9b1), 0 2px 8px rgba(0,0,0,0.4);
}

@media (max-width: 600px) {
  .sd-row  { gap: 6px; }
  .sd-pole { width: 60px; font-size: 11px; }
  .sd-dot  { width: 22px; height: 22px; }
  .sd-dot.selected { transform: scale(1.35); box-shadow: 0 0 10px var(--sd-color, #00c9b1); }
}