/*
 * Marcas de lápiz de los ejemplos: subrayado rojo en lo observado (<u>) y resaltador
 * en la corrección o en lo que se quiere señalar (<mark>). Son las mismas marcas de la
 * hoja de la portada (css/components/sheet.css), pero fijas: no se levantan ni se animan.
 *
 * Van dentro de una hoja (.paper), donde los colores son los del papel en los dos temas.
 */
@layer components {
  .mark-flag {
    text-decoration-line: none;
    background-image: linear-gradient(var(--color-pencil), var(--color-pencil));
    background-repeat: no-repeat;
    background-position: 0 97%;
    background-size: 100% max(1px, 0.085em);
  }

  .mark-highlight {
    margin-inline: -0.14em;
    padding-inline: 0.14em;
    border-radius: var(--radius-mark);
    background-color: var(--color-highlight);
    color: inherit;
    /* Si la corrección ocupa varias líneas, cada línea lleva su propio trazo. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* Contraste forzado (Windows): los fondos se anulan, así que las marcas pasan a líneas. */
  @media (forced-colors: active) {
    .mark-flag {
      background-image: none;
      text-decoration-line: underline;
    }

    .mark-highlight {
      border-block-end: 0.12em solid Highlight;
    }
  }
}