/**
 * derivation-switcher.css
 * -----------------------
 * Styles for the path switcher control and verification badge.
 * Scoped to .discovery-zone to prevent bleed.
 * 
 * Brand colors:
 *   Ocean Blue  #0D3B6E
 *   Forest Green #2D6A4F (success)
 *   Sand Gold   #C8963E
 *   Amber       #D97706 (warning)
 */

/* ---- Path switcher container ----------------------------------------- */
.discovery-zone .path-switcher-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* ---- Path switcher pill ---------------------------------------------- */
.discovery-zone .path-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f6f8fb;
  border: 1px solid #d9e1ec;
  border-radius: 6px;
  padding: 6px 12px;
}

.discovery-zone .path-switcher-label {
  font-size: 13px;
  font-weight: 600;
  color: #0D3B6E;
  font-family: "Source Sans 3", sans-serif;
}

.discovery-zone .path-switcher-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: #0D3B6E;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discovery-zone .path-switcher-btn:hover {
  background: #0b2d52;
}

.discovery-zone .path-switcher-btn:focus {
  outline: 2px solid #C8963E;
  outline-offset: 2px;
}

.discovery-zone .path-switcher-btn:active {
  transform: scale(0.95);
}

/* ---- Verification badge ---------------------------------------------- */
.discovery-zone .verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Source Sans 3", sans-serif;
}

.discovery-zone .verification-badge-pass {
  background: rgba(45, 106, 79, 0.1);
  border: 1px solid #2D6A4F;
  color: #2D6A4F;
}

.discovery-zone .verification-badge-warn {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid #D97706;
  color: #D97706;
}

.discovery-zone .verification-badge:hover {
  opacity: 0.9;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .discovery-zone .path-switcher-btn {
    transition: none;
  }
}