/* SYNAPSE — multi-party negotiation view (Phase 6, additive stylesheet).
   Star visualization centered on SYNAPSE + session/mediation components.
   Reuses conn-* and digest-* components; charte variables from styles.css. */

.mp-session { cursor: pointer; }
.mp-session--selected { border-color: var(--accent-blue, #6EA8FF); }

.mp-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .mp-detail-grid { grid-template-columns: 1fr; }
}

.mp-star {
  width: 100%;
  max-width: 460px;
  display: block;
  margin: 0 auto;
}

.mp-center {
  fill: var(--graphite-2, #16181b);
  stroke: var(--accent-blue, #6EA8FF);
  stroke-width: 1.5;
}

.mp-center-label {
  fill: var(--white, #F4F6F8);
  font-family: var(--ff-mono, monospace);
  font-size: 10px;
  letter-spacing: .14em;
}

.mp-center-count {
  fill: var(--text-3, #5e646d);
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  letter-spacing: .1em;
}

.mp-kind-badge {
  font-family: var(--ff-mono, monospace);
  font-size: .54rem;
  letter-spacing: .1em;
  padding: .14rem .4rem;
  border: 1px solid var(--text-3, #5e646d);
  color: var(--text-3, #5e646d);
}

.mp-kind-badge--multi {
  border-color: var(--type-mp, #B48EAD);
  color: var(--type-mp, #B48EAD);
  background: rgba(180, 142, 173, .08);
}

.mp-exchange-block {
  margin-top: 1rem;
  display: grid;
  gap: 0;
}

.mp-link {
  stroke-width: 1.4;
}
.mp-link--invited  { stroke: var(--text-3, #5e646d); stroke-dasharray: 4 4; }
.mp-link--joined   { stroke: var(--accent-blue, #6EA8FF); }
.mp-link--proposed { stroke: var(--accent-good, #7da77b); stroke-width: 2; }

.mp-node circle {
  fill: var(--graphite, #101214);
  stroke-width: 1.5;
}
.mp-node--invited circle  { stroke: var(--text-3, #5e646d); }
.mp-node--joined circle   { stroke: var(--accent-blue, #6EA8FF); }
.mp-node--proposed circle { stroke: var(--accent-good, #7da77b); }

.mp-node text {
  fill: var(--text-2, #8D949E);
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  letter-spacing: .06em;
}

.mp-legend {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: .66rem;
  color: var(--text-3, #5e646d);
  font-family: var(--ff-mono, monospace);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mp-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  margin-right: .3rem;
  border: 1.5px solid;
}
.mp-dot--invited  { border-color: var(--text-3, #5e646d); }
.mp-dot--joined   { border-color: var(--accent-blue, #6EA8FF); }
.mp-dot--proposed { border-color: var(--accent-good, #7da77b); }

.mp-side {
  display: grid;
  gap: .7rem;
}

.mp-inline {
  display: grid;
  gap: .4rem;
}

.mp-inline span {
  font-family: var(--ff-mono, monospace);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3, #5e646d);
}

.mp-mediation {
  margin-top: 1rem;
  border-top: 1px solid var(--line, #2A2E33);
  padding-top: .9rem;
}

.mp-med-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .6rem;
  margin: .6rem 0;
}

.mp-med-party {
  border: 1px solid var(--line, #2A2E33);
  background: var(--graphite, #101214);
  padding: .6rem .75rem;
  display: grid;
  gap: .35rem;
}

.mp-med-party strong {
  color: var(--white, #F4F6F8);
  font-size: .8rem;
}

.mp-mode-note {
  font-family: var(--ff-mono, monospace);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-amber, #D6A64F);
}