/* Portado de la maqueta ac-mezcla (paleta menta) una sola vez (78bbddd); desde entonces se edita aquí. */
/* La mesa del cumple vista desde arriba, con el juguete de 2 € posado encima.
   El suelo de toda la página es el mantel de vichy de la paleta: una baldosa de 2 × 2 cuadros sacada de la foto de
   plastilina, en la misma medida y fase que la foto de la portada (cifras de c-mantel-trabajo/mesa-medidas.json), así
   que la foto sigue sin costura. Nunca va texto sobre el vichy: todo va en objetos de la mesa (cartón, papel, tique,
   servilletas). La luz viene de arriba a la izquierda: las sombras caen abajo a la derecha, cortas y blandas. */

@property --radio { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root:has(.listachan) {
  --letra-caja: "Coiny", "Atkinson Hyperlegible Next", ui-rounded, system-ui, sans-serif;
  --letra: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Curvas: salida fuerte para lo que entra o responde; entrada y salida para lo que se mueve en pantalla. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* El margen del móvil deja ver unos 24 px de mantel a cada lado (16 px a 320 de ancho) */
  --margen: max(clamp(16px, 6.2vw, 24px), env(safe-area-inset-left), env(safe-area-inset-right));
  --hueco: 88px;                 /* entre objetos de la mesa (secciones) */
  --ancho: 1200px;
  /* Radios por material: papel 6, cartón 10, plástico 22, píldora 999; el móvil 30 por fuera y 24 la pantalla */
  --radio-papel: 6px;
  --radio-carton: 10px;
  --radio-plastico: 22px;
  --radio-movil: 30px;
  --radio-pantalla: 24px;

  --sombra-baja: 1px 1px 1px rgb(var(--sombra) / .16), 3px 6px 10px -4px rgb(var(--sombra) / .38);
  --sombra-mesa: 1px 2px 2px rgb(var(--sombra) / .18), 6px 14px 22px -8px rgb(var(--sombra) / .46);
  --sombra-filtro: drop-shadow(1px 2px 1px rgb(var(--sombra) / .16)) drop-shadow(6px 14px 14px rgb(var(--sombra) / .32));

  /* El vichy, en el móvil: la franja de la mesa (1664 px de ancho del original) ocupa el ancho de la página.
     Las cifras van en cqw de .pagina (el contenedor) y solo las usa su ::before, que pinta el mantel. */
  --suelo-ancho: calc(100cqw * 238.1 / 1664);
  --suelo-alto: calc(100cqw * 228 / 1664);
  --suelo-x: calc(100cqw * 553.13 / 1664);
  --suelo-y: calc(100cqw * 184 / 1664);
  --foto-proporcion: 780 / 648;
  /* la mesa sin mantel: plastilina clara en gris (ac-mezcla-trabajo/tablero.py), teñida con --mesa-desnuda */
  --img-tablero: url("../img/tablero.webp");

  color-scheme: only light;      /* «only»: que el modo oscuro forzado de Chrome no invierta las fotos */
  interpolate-size: allow-keywords;
  scrollbar-color: var(--tinta-suave) var(--papel-2);
}
/* Desde 700 px: la mesa entera (2688 px de ancho del original), de lado a lado. */
@media (min-width: 700px) {
  :root:has(.listachan) {
    --suelo-ancho: calc(100cqw * 250 / 2688);
    --suelo-alto: calc(100cqw * 240 / 2688);
    --suelo-x: calc(100cqw * 72.6 / 2688);
    --suelo-y: calc(100cqw * 135 / 2688);
    --foto-proporcion: 1440 / 1136;
  }
}
@media (min-width: 1100px) {
  :root:has(.listachan) { --margen: max(40px, env(safe-area-inset-left), env(safe-area-inset-right)); --hueco: 136px; }
}

.listachan *, .listachan *::before, .listachan *::after { box-sizing: border-box; }
:root:has(.listachan) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
.listachan {
  margin: 0; min-width: 320px;
  background: var(--mantel-cruce);   /* solo asoma al estirar la página: el tono del mantel */
  color: var(--tinta);
  font: 400 18px/1.5 var(--letra);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--acento-tinta);
  accent-color: var(--acento-tinta);
}
.listachan ::selection { background: var(--tinta); color: var(--papel); }

.listachan h1, .listachan h2, .listachan h3, .listachan p, .listachan ul, .listachan ol, .listachan dl, .listachan dd, .listachan figure { margin: 0; }
.listachan h1, .listachan h2 { font-family: var(--letra-caja); font-weight: 400; letter-spacing: -.005em; text-wrap: balance; }
.listachan h1 { font-size: clamp(34px, 2.6vw + 24px, 58px); line-height: 1.04; }
.listachan h2 { font-size: clamp(30px, 1.6vw + 24px, 44px); line-height: 1.06; }
.listachan h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.listachan p { text-wrap: pretty; }
.listachan ul, .listachan ol { padding: 0; list-style: none; }
.listachan img, .listachan svg, .listachan picture { display: block; max-width: 100%; }
.listachan img { height: auto; }
.listachan [hidden] { display: none !important; }

.listachan :focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: var(--radio-papel); }

/* Ir al contenido: fuera de la vista hasta que el teclado llega a él; entonces aparece, al momento (solo se llega con
   el teclado, y lo que se hace con el teclado no se anima). */
.listachan .saltar {
  position: absolute; z-index: 20; top: 8px; left: var(--margen);
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border-radius: var(--radio-papel); background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-mesa); font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.listachan .saltar:focus-visible { transform: none; }

.listachan .solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.listachan .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.listachan .ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- La página: el mantel ---------- */
/* .pagina es el contenedor de los cqw (el ancho de la página, sin la barra de desplazamiento). El contenedor también
   contiene el posicionado fijo: lo que deba quedarse quieto en la ventana (un aviso de cookies, una barra de
   «Crear») va fuera de .pagina, como hijo de <body>, igual que el <dialog>. */
.listachan .pagina {
  position: relative; isolation: isolate;
  container-type: inline-size;
  overflow-x: clip;              /* lo que se tuerce o la tapa que se abre no abren scroll lateral */
  padding-bottom: env(safe-area-inset-bottom);
}
.listachan .pagina::before {                /* el mantel: un pseudo del contenedor mide sus cqw contra él */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-color: var(--mantel-cruce);
  background-image: var(--img-suelo);
  background-size: var(--suelo-ancho) var(--suelo-alto);
  background-position: var(--suelo-x) var(--suelo-y);
}
/* La foto de plastilina de la mesa, arriba de todo: termina en el mismo vichy de la baldosa. */
.listachan .mesa-foto {
  position: absolute; z-index: -1; top: 0; left: 0; width: 100%;
  aspect-ratio: var(--foto-proporcion);
  pointer-events: none;
}
.listachan .mesa-foto img { width: 100%; height: auto; } /* la franja en el móvil y la entera desde 700 px: <source media> */

/* La rejilla del escritorio: 12 columnas, 1200 px como mucho, con el vichy a los lados */
.listachan .rejilla { position: relative; margin-top: var(--hueco); padding-inline: var(--margen); }
@media (min-width: 1100px) {
  .listachan .rejilla {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
    max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto;
  }
}

/* El enlace de texto: tinta con el subrayado del acento, separado de la letra */
.listachan .enlace {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tinta); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--acento-tinta);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color 160ms ease, text-decoration-thickness 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .listachan .enlace:hover { text-decoration-color: var(--tinta); text-decoration-thickness: 3px; }
}