/* Compare switcher | shared styles for the dropdown bar that appears at the
   top of every /strategies/compare/* page. Matches the existing cmp-*
   look-and-feel (Inter + JetBrains Mono, navy/blue accents, dark+light). */

#cmp-switcher {
  margin: 8px 0 28px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid;
  position: relative;
}
html.dark #cmp-switcher { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }
html.light #cmp-switcher { background: rgba(13,31,60,0.025); border-color: rgba(13,31,60,0.10); }

.cmp-sw-head {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 700;
  margin-bottom: 14px;
}

.cmp-sw-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.cmp-sw-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
}

.cmp-sw-lab {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 600;
}

.cmp-sw-sel {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  background: transparent;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607080' stroke-width='2.5' stroke-linecap='round'><polyline points='6,9 12,15 18,9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
html.dark .cmp-sw-sel { border-color: rgba(255,255,255,0.14); }
html.light .cmp-sw-sel { border-color: rgba(13,31,60,0.16); background-color: #fff; }
.cmp-sw-sel:focus { outline: none; border-color: #2463EB; }

.cmp-sw-vs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.5;
  padding: 0 4px 12px;
  align-self: end;
}

.cmp-sw-swap {
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  align-self: end;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.15s;
}
html.dark .cmp-sw-swap { border-color: rgba(255,255,255,0.14); }
html.light .cmp-sw-swap { border-color: rgba(13,31,60,0.16); }
.cmp-sw-swap:hover { border-color: #2463EB; color: #2463EB; }

.cmp-sw-go {
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid #0D1F3C;
  background: #0D1F3C;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  align-self: end;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}
html.dark .cmp-sw-go { background: #2463EB; border-color: #2463EB; }
.cmp-sw-go:hover { opacity: 0.9; transform: translateY(-1px); }
.cmp-sw-go.is-disabled, .cmp-sw-go[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.cmp-sw-hint {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.6;
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 720px) {
  #cmp-switcher { padding: 14px 16px; }
  .cmp-sw-row { gap: 10px; }
  .cmp-sw-col { flex: 1 1 100%; }
  .cmp-sw-vs { display: none; }
  .cmp-sw-swap { flex: 1; text-align: center; padding: 9px; }
  .cmp-sw-go { flex: 1; }
}