/* Scroll-manager debug strip (developer affordance; intentionally low-key). */

.debugHeader {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--evergreen-deep);
  border-bottom: 1px solid var(--chrome-border);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--chrome-text-dim);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.debugRow {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

.debugLabel {
  color: var(--chrome-text-dim);
  opacity: 0.75;
  font-weight: 600;
}

.debugValue {
  color: var(--chrome-text);
}

.debugValue.trigger-active {
  color: var(--danger-dot);
  font-weight: bold;
}

.debugValue.boundary-hit {
  color: var(--ok-dot);
  font-weight: bold;
}

.debugStatus {
  font-size: 14px;
  margin-left: var(--sp-1);
}

.queryText {
  color: var(--accent);
}

.mode-live {
  color: var(--ok-dot);
  font-weight: bold;
}

.mode-backward {
  color: var(--unread-bg);
  font-weight: bold;
}

.mode-forward {
  color: var(--danger-dot);
  font-weight: bold;
}

.debugButton {
  padding: 4px var(--sp-3);
  margin-left: var(--sp-2);
  background-color: var(--chrome-hover);
  color: var(--chrome-text);
  border: 1px solid var(--chrome-border);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.debugButton:hover {
  background-color: var(--chrome-active);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}