/*
 * Veriko Docs — cabecera y cuerpo de una ENTRADA DE LANZAMIENTO del changelog.
 *
 * Sólo se aplica bajo `.changelog-release`, la clase raíz que el template pone
 * cuando la entrada abre una versión. Las entradas corrientes y la lista
 * `/changelog` conservan `changelog.css` sin tocar; esta hoja no redefine
 * ningún selector de aquélla. TODO selector de este archivo menciona la clase
 * raíz — lo comprueba `docs-presentacion.test.ts`.
 *
 * Sin efectos ni transiciones de entrada. Cero hex propios: la luz sale de
 * `color-mix()` sobre `--color-primary`, y el patrón lleva la explicación de
 * su relleno en el bloque siguiente.
 */

/* ── Fondo del hero ─────────────────────────────────────────────────────────
 * `graphPaper` de hero-patterns 2.1.0 (MIT, Alec Lomas), port verbatim del
 * original Hero Patterns (Steve Schoger, CC BY 4.0); fila en
 * `landing/public/assets/MANIFEST.md`, donde ya estaba licenciado y registrado
 * desde el bakeoff del landing. Trazado sin tocar: el agente no dibuja
 * patrones.
 *
 * Es un patrón DISTINTO al de la portada a propósito: repetir allí y aquí los
 * mismos puntos hacía que las dos superficies nuevas se confundieran. La
 * retícula, además, encaja con una página de versión.
 *
 * Va como `data:` URI porque la CSP admite `img-src 'self' data:` y bloquea
 * los estilos en línea; un `data:` URI no lee custom properties, así que el
 * relleno repite el valor que `--color-text` ya tiene en cada tema. */
.changelog-release {
  --changelog-release-pattern:
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23171717%22%20fill-opacity%3D%220.055%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.5%22%20d%3D%22M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z%22%2F%3E%3Cpath%20d%3D%22M6%205V0H5v5H0v1h5v94h1V6h94V5H6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  --changelog-release-glow:
    radial-gradient(
      ellipse 110% 90% at 8% -10%,
      color-mix(in srgb, var(--color-primary) 34%, transparent),
      transparent 76%
    );
}

[data-theme="dark"] .changelog-release {
  --changelog-release-pattern:
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23ededed%22%20fill-opacity%3D%220.05%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.5%22%20d%3D%22M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z%22%2F%3E%3Cpath%20d%3D%22M6%205V0H5v5H0v1h5v94h1V6h94V5H6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  --changelog-release-glow:
    radial-gradient(
      ellipse 110% 90% at 8% -10%,
      color-mix(in srgb, var(--color-primary) 52%, transparent),
      transparent 76%
    );
}

/* La anchura la fija `changelog.css` para toda la familia del changelog
 * (1180 px, `:has(.changelog-entry)`), y la entrada de lanzamiento la conserva:
 * esta página no tiene barra lateral, así que acotarla a la anchura de
 * contenido dejaba 280 px de hueco a cada lado en una pantalla de 1440
 * (corrección del owner sobre render, 2026-09-09). Lo que se acota es el
 * TEXTO, no el contenedor: los filetes van a todo lo ancho y la medida de
 * lectura se sujeta más abajo con `padding-inline-end`.
 *
 * Por eso aquí no hay regla de anchura: heredarla es lo correcto, y escribir
 * una que repitiera el mismo valor sería una que envejece sola. */

/* La cabecera NO lleva superficie ni borde. La banda con fondo liso y filete
 * —la misma que la portada— se descartó sobre render: no llegaba al borde de
 * la página y se cortaba de golpe contra el papel. Aquí la luz y el patrón van
 * en una capa DETRÁS del texto y se disuelven con una máscara radial, así que
 * el hero no tiene canto: se apaga. */
.changelog-release .changelog-release__header {
  position: relative;
  isolation: isolate;
  margin: 0 0 var(--space-10);
  padding: var(--space-10) 0 var(--space-12);
  /* Elección del owner (2026-09-09) sobre render: la versión y los metadatos
     van en una franja horizontal sobre el título, que gana escala. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "version meta"
    "title   title"
    "lead    lead";
  align-items: baseline;
  gap: var(--space-4);
}

/* La capa de fondo, y la razón de cada número.
 *
 * Se desborda MUY por fuera de la caja del texto —arriba y a los lados— para
 * que ninguno de sus cantos caiga donde se mira. Encima, la máscara la apaga
 * en las cuatro direcciones antes de llegar a su propio borde, así que lo que
 * se ve es una mancha de luz que se desvanece, no un rectángulo recortado.
 *
 * La primera versión ponía el centro de la máscara en la esquina superior
 * izquierda: la luz nacía justo donde empezaba la caja y dejaba canto recto
 * arriba y a la izquierda. Se vio en el render y por eso el centro está ahora
 * bien dentro.
 *
 * `black` y `transparent` no son color: en una máscara sólo cuenta el alfa. */
.changelog-release .changelog-release__header::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* El desborde lateral es EXACTAMENTE el relleno de `.layout-main`: un pixel
     más y la página se va de ancho (medido: 32 px a 1024). El vertical no
     afecta al ancho, así que ahí sí puede ser generoso. */
  inset: -6rem calc(var(--space-8) * -1) -2rem;
  background-image: var(--changelog-release-glow), var(--changelog-release-pattern);
  -webkit-mask-image: radial-gradient(ellipse 70% 64% at 34% 55%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 64% at 34% 55%, black 0%, transparent 78%);
}

@media (max-width: 768px) {
  .changelog-release .changelog-release__header {
    padding: var(--space-8) 0 var(--space-10);
  }

  .changelog-release .changelog-release__header::before {
    inset: -4rem calc(var(--space-4) * -1) -2rem;
  }
}

/* ── Piezas de la cabecera ── */
.changelog-release .changelog-release__version {
  grid-area: version;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.changelog-release .changelog-release__meta {
  grid-area: meta;
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--color-border-strong);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.changelog-release .changelog-release__audience {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  background: var(--color-bg-hover);
  color: var(--color-text-muted);
}

.changelog-release .changelog-release__audience--public {
  background: var(--badge-get-bg);
  color: var(--badge-get-fg);
}

.changelog-release .changelog-release__audience--admin {
  background: var(--badge-put-bg);
  color: var(--badge-put-fg);
}

.changelog-release .changelog-release__title {
  grid-area: title;
  margin-block: var(--space-2) 0;
  margin-inline: 0;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-wrap: pretty;
}

.changelog-release .changelog-release__lead {
  grid-area: lead;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ── Cuerpo: los `h2` del Markdown separan grupos con línea fina, y cada
 * ítem lleva su primer segmento en negrita sobre texto secundario ── */
/* El cuerpo llega tan lejos como la banda (petición del owner sobre render):
 * el texto y los filetes terminan en el mismo sitio que el borde interior de
 * la cabecera, así que la página no tiene dos anchuras distintas apiladas.
 * Se probó y se descartó dejar los filetes largos con la línea corta: abría un
 * hueco a la derecha de cada ítem. */
.changelog-release .changelog-release__body {
  max-width: none;
}

.changelog-release .changelog-release__body > :first-child {
  margin-block-start: 0;
}

.changelog-release .changelog-release__body h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin-block-start: var(--space-12);
  padding-bottom: var(--space-3);
  /* La línea del grupo va teñida hacia el acento: distingue el corte de
     sección del filete que separa una fila de la siguiente. */
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
}

.changelog-release .changelog-release__body ul {
  list-style: none;
  margin-block: var(--space-5) 0;
  padding-inline-start: 0;
}

.changelog-release .changelog-release__body ul > li {
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.changelog-release .changelog-release__body ul > li + li {
  border-top: 1px solid var(--color-border);
}

.changelog-release .changelog-release__body ul > li strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* El primer segmento de cada ítem es su NOMBRE, y se lee como tal: renglón
 * propio, mono y a la escala de una etiqueta, igual que el índice de la
 * portada. En línea con el resto se perdía dentro del párrafo y la sección
 * entera se leía como un muro. Una negrita posterior dentro del mismo ítem
 * sigue en línea, y así es la única que resalta dentro del texto. */
.changelog-release .changelog-release__body ul > li > strong:first-child {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}

.changelog-release .changelog-release__body ul > li {
  padding-block: var(--space-5);
}

/* ── Estado sin acceso: la banda es la misma, el cuerpo se sustituye ── */
.changelog-release .changelog-entry__gated {
  padding-block: var(--space-2) var(--space-10);
}

/* ── En pantalla estrecha la franja se apila ── */
@media (max-width: 640px) {
  .changelog-release .changelog-release__header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "version"
      "meta"
      "title"
      "lead";
  }

  .changelog-release .changelog-release__meta {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}