/* Braces stretch; the mathematical text and its labels do not. */
.annotated-math { clear: both; max-inline-size: 100%; overflow-x: auto; padding: .6rem .3rem; margin-block: 1.5rem; }
.annotated-math__row { display: flex; align-items: center; justify-content: center; gap: .25em; inline-size: max-content; min-inline-size: 100%; font: var(--step-1)/1.4 var(--font-formal); color: var(--ink); }
.annotated-math__group { display: grid; grid-template-rows: 1.4rem .75rem auto .75rem 1.4rem; align-items: center; justify-items: stretch; text-align: center; }
.annotated-math__symbols { grid-row: 3; white-space: nowrap; }
.annotated-math__edge { white-space: pre; }
.annotated-math__brace { grid-row: 4; inline-size: 100%; block-size: .65rem; fill: none; stroke: var(--blue-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.annotated-math__label { grid-row: 5; font: var(--step--1)/1.3 var(--font-hand); color: var(--blue-ink); white-space: nowrap; padding-inline: .3rem; }
.annotated-math__group--above .annotated-math__brace { grid-row: 2; transform: scaleY(-1); }
.annotated-math__group--above .annotated-math__label { grid-row: 1; }
@media print { .annotated-math { overflow: visible; } .annotated-math__row { font-size: 1rem; } }
/* Distinguish the three symbol roles without relying on colour alone. */
.annotated-math__group--red { --annotation-ink: var(--red-ink); }
.annotated-math__group--blue { --annotation-ink: var(--blue-ink); }
.annotated-math__group--green { --annotation-ink: var(--green-ink); }
.annotated-math__group { color: var(--annotation-ink, var(--ink)); }
.annotated-math__group .annotated-math__brace { stroke: var(--annotation-ink, var(--blue-ink)); }
.annotated-math__group .annotated-math__label { color: var(--annotation-ink, var(--blue-ink)); }

.annotated-math--wrap .annotated-math__row { flex-wrap:wrap; inline-size:auto; min-inline-size:0; }
.annotated-math__item { display:inline-flex; align-items:center; gap:.25em; }
/* stack=true sets a grammar as it is written by hand: one group per line, each
   separator under the prefix's ::=, and each group's label at the line's end. */
.annotated-math--stack .annotated-math__row { display:grid; grid-template-columns:repeat(3,max-content); justify-content:center; align-items:baseline; gap:.2em .4em; inline-size:auto; min-inline-size:0; }
.annotated-math--stack :is(.annotated-math__item, .annotated-math__group) { display:contents; }
.annotated-math--stack .annotated-math__edge { justify-self:end; }
.annotated-math--stack :is(.annotated-math__symbols, .annotated-math__label) { grid-row:auto; }
.annotated-math--stack .annotated-math__symbols { color:var(--annotation-ink, var(--ink)); justify-self:start; text-align:start; }
.annotated-math--stack .annotated-math__brace { display:none; }
.annotated-math--stack .annotated-math__label { justify-self:start; padding-inline-start:1em; }
/* Eight alphabet roles, each with its own annotation ink. */
.annotated-math__group--violet { --annotation-ink:#7544a3; }
.annotated-math__group--orange { --annotation-ink:#a64c00; }
.annotated-math__group--teal { --annotation-ink:#006e73; }
.annotated-math__group--olive { --annotation-ink:#666800; }
.annotated-math__group--pink { --annotation-ink:#a13276; }
:root[data-theme="dark"] .annotated-math__group--violet { --annotation-ink:#c5a0ef; }
:root[data-theme="dark"] .annotated-math__group--orange { --annotation-ink:#ffad64; }
:root[data-theme="dark"] .annotated-math__group--teal { --annotation-ink:#68d1ce; }
:root[data-theme="dark"] .annotated-math__group--olive { --annotation-ink:#cbd275; }
:root[data-theme="dark"] .annotated-math__group--pink { --annotation-ink:#efa0d5; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .annotated-math__group--violet { --annotation-ink:#c5a0ef; }
  :root:not([data-theme="light"]) .annotated-math__group--orange { --annotation-ink:#ffad64; }
  :root:not([data-theme="light"]) .annotated-math__group--teal { --annotation-ink:#68d1ce; }
  :root:not([data-theme="light"]) .annotated-math__group--olive { --annotation-ink:#cbd275; }
  :root:not([data-theme="light"]) .annotated-math__group--pink { --annotation-ink:#efa0d5; }
}