/* Roof-pitch article: maps and charts on top of opn-korpus.css. Map colours are set inline
   by the generator (validated palette); everything else uses the blog tokens. */

.rp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.rp-map-wrap { position: relative; margin-top: 8px; }
.rp-map { display: block; width: 100%; height: auto; }
.rp-map use { stroke: #fff; stroke-width: .6; stroke-linejoin: round; cursor: default; }
.rp-map use.is-active { stroke: var(--navy); stroke-width: 1.6; }

.rp-cities { pointer-events: none; }
.rp-cities circle { fill: var(--navy); stroke: #fff; stroke-width: 1; }
.rp-cities text {
  fill: var(--navy);
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.rp-tip {
  position: absolute;
  z-index: 2;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}

.rp-legend-note { margin: 12px 0 0 !important; color: var(--muted); font-size: 12px !important; line-height: 1.5 !important; }

.rp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.rp-duo h4 { margin: 0 0 6px; color: var(--navy); font-size: 14px; }

.rp-stacks { display: grid; gap: 18px; }
.rp-stack-row { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(240px, 1.6fr); gap: 16px; align-items: center; }
.rp-stack-label strong { display: block; color: var(--navy); font-size: 14px; }
.rp-stack-label span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.rp-stack { display: flex; gap: 2px; height: 22px; overflow: hidden; border-radius: 4px; }
.rp-stack span { display: block; height: 100%; }

.rp-within td:last-child { font-weight: 400; white-space: normal; text-align: left; min-width: 260px; }
.rp-within th:last-child { text-align: left; }

.rp-all { margin: 30px 0; }
.rp-all summary { color: var(--vivid); font-size: 15px; font-weight: 700; cursor: pointer; }
.rp-all .article-table { max-height: 520px; overflow-y: auto; font-size: 14px; }
.rp-all .article-table table { font-size: 14px; }

@media (max-width: 780px) {
  .rp-duo { grid-template-columns: 1fr; }
  .rp-stack-row { grid-template-columns: 1fr; gap: 8px; }
  .rp-cities text { font-size: 16px; }
}