/* The 十二宫 grid.
 *
 * This is the one thing on the site Tabler cannot supply: the traditional
 * square 命盘, twelve palaces in a ring with the birth details in the middle.
 * chart-render.php emits a grid-area name on every palace and on the centre,
 * and without a grid-template-areas to place them into, all thirteen boxes
 * stack in a single column.
 *
 * That is exactly what happened. The rule lived in app.css, the Tabler refactor
 * replaced app.css with tabler.min.css, and the rule went with it — so the most
 * recognisable element of a 紫微斗数 chart rendered as a vertical list for as
 * long as that went unnoticed. Screenshots are the only check that would ever
 * have caught it: every page still returned 200, every value on it was still
 * correct, and the render sweep asserts on CONTENT rather than layout.
 *
 * Only the layout is restored here. The old rule also carried a whole dark
 * palette of its own, which Tabler now owns and which should not come back.
 */

.mingpan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "p-si   p-wu    p-wei  p-shen"
    "p-chen center  center p-you"
    "p-mao  center  center p-xu"
    "p-yin  p-chou  p-zi   p-hai";
}

/* Under ~640px a sixteen-cell ring gives each palace about 90px, which is not
 * enough for four stars and their brightness. Two columns in branch order,
 * with the centre on top, is legible and keeps the reading order. */
@media (max-width: 640px) {
  .mingpan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "center center"
      "p-yin  p-mao"
      "p-chen p-si"
      "p-wu   p-wei"
      "p-shen p-you"
      "p-xu   p-hai"
      "p-zi   p-chou";
  }
}