/* format_cell: a pointy-top hexagon holding one family of formats. Cells tile like a
   honeycomb: three in the first row, two in the second, shifted by half a cell. */
.format-cell {
  position: relative;
  isolation: isolate;
  grid-column: span 2;
  aspect-ratio: 0.866;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding-inline: 18%;
  text-align: center;
}
.format-cell::before,
.format-cell::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.format-cell::before { inset-block: calc(var(--space-1) * 1.1547); inset-inline: var(--space-1); background: var(--color-ink); }
.format-cell::after {
  inset-block: calc((var(--space-1) + var(--border-edge)) * 1.1547);
  inset-inline: calc(var(--space-1) + var(--border-edge));
  background: var(--color-paper);
}
.format-cell:nth-child(odd)::after { background: var(--color-accent-soft); }
.format-cell h3 { margin: 0; font-size: var(--fs-h3); }
.format-cell-codes { margin: 0; font-weight: var(--font-weight-semibold); direction: ltr; unicode-bidi: isolate; max-width: 9ch; }
.format-cell:nth-child(3) { grid-column: 2 / span 2; margin-block-start: -28.87%; }
.format-cell:nth-child(4) { grid-column: 1 / span 2; margin-block-start: -28.87%; }
.format-cell:nth-child(5) { grid-column: 3 / span 2; margin-block-start: -28.87%; }
@media (min-width: 720px) {
  .format-cell:nth-child(1) { grid-column: 1 / span 2; }
  .format-cell:nth-child(2) { grid-column: 3 / span 2; }
  .format-cell:nth-child(3) { grid-column: 5 / span 2; margin-block-start: 0; }
  .format-cell:nth-child(4) { grid-column: 2 / span 2; margin-block-start: -28.87%; }
  .format-cell:nth-child(5) { grid-column: 4 / span 2; margin-block-start: -28.87%; }
}
/* Hover answers at once: the fill turns to amber. */
.format-cell:hover { color: var(--color-accent-ink); }
.format-cell:hover::after { background: var(--color-accent); }
@media (max-width: 719px) {
  .format-cell { padding-inline: 6%; gap: var(--space-1); }
  .format-cell h3 { font-size: var(--fs-body); }
  .format-cell-codes { font-size: var(--type-small); max-width: none; }
}