/* Shared circular subsection notation for the canonical chapters and method companions. */

.frame-section-sequence,
.section-index-sequence,
.measure-section-head > i {
  border-radius: 50%;
}

/* Keep every numbered tile circular even when the adjacent label wraps. */
.frame-section-index,
.section-index {
  align-items: center;
}

.frame-section-sequence,
.section-index-sequence {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

/* In Sum uses an unnumbered chapter-color dot. */
.sum-section-index {
  align-items: center;
}

.sum-section-sequence {
  width: 12px;
  height: 12px;
  min-height: 12px;
  border-radius: 50%;
}

/* The legacy focused Measurement room shares the same numbered tile treatment. */
.measure-section-head > i {
  --mhc-ink-rgb:var(--mhc-on-chroma-rgb);--mhc-on-plate-rgb:var(--mhc-on-chroma-rgb);--mhc-on-paper-rgb:var(--mhc-on-chroma-rgb);display: grid;
  place-items: center;
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  background: var(--mhc-sage);
  color: var(--mhc-on-chroma);
}

/* Method companions separate the movement number from its label with the same tile. */
.section-register > span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-register > span > b {
  --mhc-ink-rgb:var(--mhc-on-accent-rgb);--mhc-on-plate-rgb:var(--mhc-on-accent-rgb);--mhc-on-paper-rgb:var(--mhc-on-accent-rgb);display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--mhc-accent);
  color: var(--mhc-on-accent);
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .measure-section-head {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}