/* opus-magnum/section.css
 * Eryn Wells <eryn@erynwells.me>
 */

ol {
  display: grid;

  gap: 0;
  grid-template-columns: min-content 1fr;

  padding-inline-start: 0;

  list-style: none;
  counter-reset: puzzle;

  li {
    align-items: baseline;
    gap: 1ch;
    display: grid;
    grid-template-columns: subgrid;

    &::before {
      counter-increment: puzzle;

      color: var(--text-color-light);
      content: counter(puzzle, upper-roman) ".";
      font-size: var(--text-s);
      font-variant-numeric: tabular-nums;

      text-align: end;
      width: 5ch;
    }
  }
}

details {
  grid-column: main-start / main-end;

  display: flex;
  flex-direction: column;
  align-items: center;

  summary {
    display: block;
    align-self: start;
    width: 100%;
  }
}