/* Shared reading surface for 25 and 36. */
[data-env="math-decima"] {
  --math-row-height: clamp(2rem, 5svh, 2.75rem);
  --math-font: 'Times New Roman', 'Cambria Math', serif;
}
.math-reader {
  max-width: var(--poem-measure);
  margin: 0 auto;
  padding-top: .75rem;
  text-align: left;
}
.math-stage { min-height: calc(10 * var(--math-row-height)); }
.math-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  align-items: center;
  min-height: var(--math-row-height);
  column-gap: 1.75rem;
}
.math-symbol {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font: 1.65rem/1.2 var(--math-font);
  text-align: left;
  white-space: nowrap;
  padding: .2rem 0;
  min-height: var(--math-row-height);
}
.math-reader.is-ready .math-symbol { cursor: pointer; }
.math-reading {
  font-size: 1.2rem;
  line-height: 1.25;
  transition: opacity 180ms ease;
}
/* Keep the line positions fixed as their readings appear. */
.math-reading[aria-hidden="true"] { opacity: 0; visibility: hidden; }
.math-symbol[aria-expanded="true"] { color: var(--accent); }
.math-symbol:focus-visible,
.math-controls button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}
.math-equation {
  min-height: calc(10 * var(--math-row-height));
  display: flex;
  align-items: center;
  font: 1.6rem/1.8 var(--math-font);
}
.math-equation p { text-wrap: pretty; }
.math-controls {
  display: flex;
  gap: .75rem 2rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.math-controls button {
  appearance: none;
  padding: .4rem 0;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: .25em;
  cursor: pointer;
}
.math-controls button:hover { text-decoration-color: currentColor; }
.math-hint {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}
.math-note {
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}
.math-reader [hidden] { display: none; }
@media (max-width: 600px) {
  [data-env="math-decima"] { --math-row-height: 44px; }
  [data-env="math-decima"] .container { padding-inline: 1.25rem; }
  .math-row { grid-template-columns: 6.1rem minmax(0, 1fr); column-gap: .75rem; }
  [data-page="poema-25"] .math-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .math-symbol { font-size: 1.4rem; }
  .math-reading { font-size: 1.05rem; }
  .math-equation { font-size: 1.4rem; }
  .math-controls { column-gap: 1.5rem; margin-top: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .math-reading { transition: none; }
}
@media print {
  .math-controls, .math-hint { display: none; }
  .math-reader .math-verses { display: block; }
  .math-reader .math-equation { display: none; }
  .math-reading[aria-hidden="true"] { opacity: 1; visibility: visible; }
  .math-symbol[aria-expanded] { color: var(--ink); }
}