/* security-tabs.css — tabbed workspace for /security/:ticker (Phase 4 IA
   consolidation 2026-06-16). One ticker, multiple lenses (Overview / Forecast
   / Alt-Data) without losing context. Matches security-deep design tokens. */

.sd-ws-ticker {
  font-family: var(--sd-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sd-muted, #9ca3af);
  margin: 2px 0 -2px;
}

.sd-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--sd-border, #2a2a35);
  margin: 4px 0 18px;
  position: sticky;
  top: 0;
  background: var(--sd-bg, #0a0a0c);
  z-index: 20;
  overflow-x: auto;
  scrollbar-width: none;
}
.sd-tabs::-webkit-scrollbar { display: none; }

.sd-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--sd-muted, #9ca3af);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 11px 16px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.sd-tab:hover { color: var(--sd-text, #e5e7eb); }
.sd-tab[aria-selected="true"] {
  color: var(--sd-gold, #f0b72a);
  border-bottom-color: var(--sd-gold, #f0b72a);
}
.sd-tab:focus-visible { outline: 2px solid var(--sd-blue, #60a5fa); outline-offset: -2px; border-radius: 4px; }
.sd-tab .sd-tab-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--sd-muted, #9ca3af);
  margin-top: 1px;
  letter-spacing: .02em;
}

.sd-tabpanel { animation: sd-tab-fade .18s ease; }
.sd-tabpanel[hidden] { display: none; }
@keyframes sd-tab-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Lazy iframe panels (Forecast / Alt-Data) */
.sd-tab-frame {
  width: 100%;
  border: 0;
  display: block;
  background: var(--sd-bg, #0a0a0c);
  min-height: 70vh;
}
.sd-tab-frame-wrap { position: relative; }
.sd-tab-loading {
  color: var(--sd-muted, #9ca3af);
  font-size: 13px;
  padding: 40px 8px;
  text-align: center;
}
.sd-tab-fallback {
  font-size: 12.5px;
  color: var(--sd-muted, #9ca3af);
  padding: 12px 0 4px;
}
.sd-tab-fallback a { color: var(--sd-gold, #f0b72a); text-decoration: none; }
.sd-tab-fallback a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .sd-tabpanel { animation: none; }
}