/* Shared styles for all resource pages — diagrams, figures, inline CSS charts */

/* ── Diagram figures ── */
.resource-diagram {
  margin: 24px 0 28px;
  display: block;
}
.resource-diagram img,
.resource-diagram svg {
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
  border-radius: 8px;
}
.resource-diagram figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: #888;
  font-style: italic;
}

/* ── Inline CSS bar charts ── */
.css-chart {
  margin: 24px 0 28px;
  background: #F4F1ED;
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
}
.css-chart-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #3D3D3D;
  margin-bottom: 12px;
}
.css-chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.css-chart-label {
  font-size: 11px;
  color: #3D3D3D;
  min-width: 100px;
  flex-shrink: 0;
}
.css-chart-track {
  flex: 1;
  height: 18px;
  background: #E5E2DC;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.css-chart-bar {
  height: 100%;
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding-left: 6px;
}
.css-chart-bar span {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.css-chart-value {
  font-size: 11px;
  font-weight: 600;
  color: #3D3D3D;
  min-width: 64px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Country pair chart variant ── */
.css-chart-pair-row {
  margin-bottom: 12px;
}
.css-chart-pair-label {
  font-size: 11px;
  font-weight: 600;
  color: #141414;
  margin-bottom: 4px;
}
.css-chart-pair-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.css-chart-bar--navy { background: #1B4F72; }
.css-chart-bar--orange { background: #C25E0A; }
.css-chart-bar--navy-light { background: #1B4F72; opacity: 0.55; }

/* ── Mobile responsive ── */
@media (max-width: 480px) {
  .css-chart-label { min-width: 72px; font-size: 10px; }
  .css-chart-value { min-width: 48px; font-size: 10px; }
}