@charset "UTF-8";
/* One heading row on every screen: palace name at left, stem/branch at right.
   Keep the existing twelve-palace outer grid and all chart data unchanged. */
.chart-grid > .palace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 8px;
  align-content: start;
  align-items: start;
}

.chart-grid > .palace > h3 {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding-right: 0;
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chart-grid > .palace > .branch {
  grid-column: 2;
  grid-row: 1;
  position: static;
  display: block;
  justify-self: end;
  margin: 0;
  padding-top: 3px;
  line-height: 1.5;
  white-space: nowrap;
  text-align: right;
}

.chart-grid > .palace > .stars,
.chart-grid > .palace > .minor,
.chart-grid > .palace > .age {
  grid-column: 1 / -1;
  min-width: 0;
}
.chart-grid > .palace > .stars { grid-row: 2; }
.chart-grid > .palace > .minor { grid-row: 3; }
.chart-grid > .palace > .age { grid-row: 4; }

@media (max-width: 650px) {
  .chart-grid > .palace { column-gap: 6px; }
  .chart-grid > .palace > .branch { padding-top: 2px; }
}