/* ============================================================
   MARKET STATS — Philadelphia Metro HDI
   All classes namespaced under .ms-*
   Depends on CSS custom properties defined in style.css
   ============================================================ */

/* ── Tier color utilities ── */
.ms-limited  { color: #dc2626; }
.ms-moderate { color: #d97706; }
.ms-slow     { color: #2563eb; }
.ms-steady   { color: #16a34a; }

.ms-desc {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.85;
  max-width: 640px;
  margin-bottom: 2.5rem;
}

/* ── Stat Pills ── */
.ms-pills {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.ms-pill {
  flex: 1;
  min-width: 140px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  padding: 1.1rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ms-pill-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 0.3rem;
}
.ms-pill-value {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1;
}
.ms-pill-tier {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Chart Meta Row ── */
.ms-chart-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── View tabs (YoY / By Segment) ── */
.ms-view-tabs {
  display: flex;
  gap: 0.4rem;
}
.ms-view-tab {
  background: transparent;
  border: 1.5px solid var(--gray-200);
  padding: 0.35rem 0.8rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.15s;
}
.ms-view-tab.ms-view-active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* ── Segment toggles ── */
.ms-seg-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.ms-seg-toggle {
  background: transparent;
  border: 1.5px solid var(--gray-200);
  padding: 0.35rem 0.8rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.15s;
}
.ms-seg-toggle.ms-seg-on {
  border-color: var(--seg-clr);
  color: var(--black);
}

/* ── Dataset Legend ── */
.ms-legend {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.ms-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.ms-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Chart containers ── */
.ms-chart-wrap {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--gray-200);
  padding: 1.25rem 0.5rem 0.75rem;
}
.ms-chart-wrap canvas { display: block; }
.ms-hidden { display: none !important; }

/* ── Tier Reference Legend ── */
.ms-tier-legend {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
}
.ms-tier-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.ms-tier-swatch {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 1px;
  flex-shrink: 0;
}
.ms-tier-swatch.ms-limited  { background: #dc2626; }
.ms-tier-swatch.ms-moderate { background: #d97706; }
.ms-tier-swatch.ms-slow     { background: #2563eb; }
.ms-tier-swatch.ms-steady   { background: #16a34a; }
.ms-tier-range {
  color: var(--gray-400);
  font-size: 0.58rem;
}

/* ── Source attribution ── */
.ms-source {
  font-size: 0.6rem;
  color: var(--gray-400);
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ms-pills { flex-direction: column; }
  .ms-pill  { min-width: 0; }
  .ms-tier-legend { gap: 1rem; }
}