/*
 * Fragmentos de documento dentro de las guías, sobre una hoja (.paper):
 * - .example: un «Así no» o un «Así sí», con la nota a lápiz del asesor;
 * - .model: un párrafo modelo para copiar la estructura («Así puedes redactarlo»);
 * - .formula: una fórmula con sus variables en cursiva.
 *
 * Todo lo que es documento va en la letra de tesis; las etiquetas, en la del asesor.
 */
@layer components {
  /* Un «Así no» seguido de su «Así sí». */
  .example-pair {
    display: grid;
    gap: var(--space-xs);
  }

  .example,
  .model,
  .formula {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-m) var(--space-l);
    color: var(--color-print);
    font-family: var(--font-document);
    font-size: var(--step-0);
    line-height: 1.7;
  }

  /* Etiqueta: dice qué es el fragmento. La palabra lleva el significado, no el color. */
  .example__verdict,
  .model__label,
  .formula__label {
    font-family: var(--font-brand);
    font-size: var(--step--1);
    font-weight: var(--weight-strong);
    line-height: var(--leading-snug);
  }

  .example__verdict--wrong {
    color: var(--color-pencil);
  }

  .example__verdict--right,
  .model__label,
  .formula__label {
    color: var(--color-accent-text);
  }

  /* Nota del asesor, a lápiz, al pie del fragmento. */
  .example__note {
    justify-self: end;
    max-inline-size: 24ch;
    color: var(--color-pencil);
    font-family: var(--font-hand);
    font-size: 1.3em;
    line-height: 1.12;
    text-align: end;
    text-wrap: balance;
    rotate: -1.5deg;
  }

  /* Filas de un documento (por ejemplo, la fila general de una matriz): rótulo y texto. */
  .model__rows {
    display: grid;
    gap: var(--space-xs);
  }

  .model__rows dt {
    font-weight: 700;
  }

  .model__rows dd {
    margin: 0;
  }

  /* Párrafo modelo: sangría de primera línea, como en la tesis. */
  .model__text {
    text-indent: 2em;
  }

  /* Referencias de ejemplo: sangría francesa, como en la lista de referencias.
     Va después de .model__text para que su sangría gane a la de primera línea. */
  .example__text--reference,
  .model__text--reference {
    padding-inline-start: 2em;
    text-indent: -2em;
    overflow-wrap: anywhere;
  }

  /* Huecos que llena cada tesista: entre corchetes y en cursiva. */
  .model__blank {
    font-style: italic;
  }

  /* Si la fórmula no cabe en una línea, se reparte en líneas parejas. */
  .formula__expression {
    font-size: 1.35em;
    font-variant-numeric: lining-nums;
    text-wrap: balance;
  }

  .formula__expression var,
  .formula__legend var {
    font-style: italic;
  }

  .formula__legend {
    display: grid;
    gap: var(--space-3xs);
    padding: 0;
    list-style: none;
  }

  /* En pantallas angostas el margen interior baja para dejar más ancho al texto. */
  @media (max-width: 35.99rem) {
    .example,
    .model,
    .formula {
      padding-inline: var(--space-m);
    }
  }
}