/* ═══ SOCIODYNAMIC DASHBOARD STRIP ═══
   Compact horizontal summary of a Sociodynamic analysis.
   Designed to embed inside analysis cards on the public website.
   Requires: Outfit, Inter, JetBrains Mono (Google Fonts).
*/

.sd-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  background: var(--sd-bg-card, #1E1E36);
  border: 1px solid var(--sd-border, rgba(255,255,255,0.06));
  border-radius: 10px;
  transition: border-color 0.3s ease;
  overflow: hidden;
  min-height: 76px;
}
.sd-strip:hover {
  border-color: var(--sd-border-active, rgba(212,168,67,0.3));
}

/* ═══ Φ RING (MINI) ═══ */
.sd-strip__phi {
  flex-shrink: 0;
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-strip__phi svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sd-strip__phi svg circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.sd-strip__phi svg .ring-bg {
  stroke: var(--sd-border, rgba(255,255,255,0.06));
}
.sd-strip__phi svg .ring-val {
  stroke-dasharray: var(--sd-ring-circ, 144);
  stroke-dashoffset: var(--sd-ring-circ, 144);
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.23,1,0.32,1);
}
.sd-strip__phi.animated svg .ring-val {
  stroke-dashoffset: var(--sd-ring-offset, 12);
}
.sd-strip__phi-label {
  position: relative;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sd-strip__phi-sub {
  position: relative;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--sd-text-dim, #6A6678);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* Multi-pop: stacked mini rings */
.sd-strip__phi-group {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.sd-strip__phi-group .sd-strip__phi {
  width: 42px;
  height: 42px;
}
.sd-strip__phi-group .sd-strip__phi-label {
  font-size: 0.68rem;
}
.sd-strip__phi-group .sd-strip__phi-sub {
  font-size: 0.42rem;
}
.sd-strip__phi-group .sd-strip__phi svg .ring-val {
  stroke-dasharray: var(--sd-ring-circ, 119);
  stroke-dashoffset: var(--sd-ring-circ, 119);
}
.sd-strip__phi-group .sd-strip__phi.animated svg .ring-val {
  stroke-dashoffset: var(--sd-ring-offset, 10);
}

/* ═══ σ BARS ═══ */
.sd-strip__sigma {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 100px;
  max-width: 140px;
  flex-shrink: 0;
}
.sd-strip__sigma-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-strip__sigma-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: var(--sd-text-dim, #6A6678);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.sd-strip__sigma-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.sd-strip__sigma-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(0.23,1,0.32,1);
  width: 0;
}
.sd-strip__sigma-fill--amber {
  background: var(--sd-amber, #D4A843);
}
.sd-strip__sigma-fill--red {
  background: var(--sd-red, #E05555);
}

/* ═══ SCB / AAR RATIO ═══ */
.sd-strip__ratio {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sd-strip__ratio-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  line-height: 1;
}
.sd-strip__ratio-labels .scb-l { color: var(--sd-teal, #45B8A0); }
.sd-strip__ratio-labels .aar-l { color: var(--sd-red, #E05555); }
.sd-strip__ratio-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.sd-strip__ratio-seg {
  transition: width 1.4s cubic-bezier(0.23,1,0.32,1);
  width: 0;
}
.sd-strip__ratio-seg--scb {
  background: var(--sd-teal, #45B8A0);
  border-radius: 3px 0 0 3px;
}
.sd-strip__ratio-seg--aar {
  background: var(--sd-red, #E05555);
  border-radius: 0 3px 3px 0;
  flex: 1;
}

/* ═══ QUADRANT BADGE ═══ */
.sd-strip__quadrant {
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sd-strip__quadrant--I  { background: rgba(69,184,160,0.12); color: #45B8A0; border: 1px solid rgba(69,184,160,0.2); }
.sd-strip__quadrant--II { background: rgba(85,136,204,0.12); color: #5588CC; border: 1px solid rgba(85,136,204,0.2); }
.sd-strip__quadrant--III { background: rgba(224,138,69,0.12); color: #E08A45; border: 1px solid rgba(224,138,69,0.2); }
.sd-strip__quadrant--IV { background: rgba(224,85,85,0.12); color: #E05555; border: 1px solid rgba(224,85,85,0.2); }

/* ═══ MS PROFILE BADGE ═══ */
.sd-strip__ms-badge {
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(85,136,204,0.1);
  color: #5588CC;
  border: 1px solid rgba(85,136,204,0.15);
  white-space: nowrap;
}

/* ═══ FINDING HEADLINE ═══ */
.sd-strip__finding {
  flex: 1;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sd-text-secondary, #9A96A6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ═══ LOOPS (mini dots) ═══ */
.sd-strip__loops {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.sd-strip__loop-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid transparent;
}
.sd-strip__loop-dot--active  { background: var(--sd-red, #E05555); border-color: rgba(224,85,85,0.3); }
.sd-strip__loop-dot--weak    { background: var(--sd-orange, #E08A45); border-color: rgba(224,138,69,0.3); }
.sd-strip__loop-dot--latent  { background: var(--sd-orange, #E08A45); border-color: rgba(224,138,69,0.3); opacity: 0.5; }
.sd-strip__loop-dot--inactive { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.06); }

/* ═══ σ-IRR ZONE INDICATOR ═══ */
.sd-strip__sirr {
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(224,85,85,0.1);
  color: var(--sd-red, #E05555);
  border: 1px solid rgba(224,85,85,0.15);
  white-space: nowrap;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 800px) {
  .sd-strip {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    min-height: auto;
  }
  .sd-strip__sigma { min-width: 80px; }
  .sd-strip__ratio { min-width: 80px; }
  .sd-strip__finding { flex-basis: 100%; order: 10; white-space: normal; }
}