/* El diálogo de confirmación.
 *
 * Mismo patrón que el salto (`dialog.jump`, en sidebar.css): el <dialog> es
 * solo el envoltorio transparente que trae el backdrop, y la caja visible es el
 * hijo. Cambia el anclaje —centrado y no pegado arriba, porque aquí no crece
 * ninguna lista bajo el cursor— y el ancho, que se mide en texto corrido y no
 * en resultados.
 *
 * Declaraciones planas primero y reglas anidadas al final de cada bloque: sin
 * `CSSNestedDeclarations` todo lo que venga detrás de una anidada se descarta.
 */
dialog.confirm {
  background: transparent;
  border: 0;
  max-block-size: 100dvh;
  max-inline-size: 100dvw;
  padding: 0;

  &::backdrop {
    backdrop-filter: blur(3px);
    background-color: oklch(0% 0 0 / 0.4);
  }
}

.confirm__box {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-darker);
  /* El color hay que fijarlo aquí. El UA pone `color: canvastext` en `dialog`,
     y `canvastext` sigue al `color-scheme` del navegador, no a la clase de tema
     de la app: con el tema oscuro elegido y Chrome en claro, el mensaje saldría
     negro sobre negro. */
  color: var(--color-text);
  border-radius: 0.75em;
  box-shadow: 0 1em 3em oklch(0% 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  gap: calc(var(--block-space) * 1.5);
  /* Estrecha a propósito: lo que se lee aquí es una pregunta de dos líneas, y
     a lo ancho el ojo pierde el renglón al volver. */
  inline-size: min(46ch, 92dvw);
  margin: auto;
  padding: calc(var(--block-space) * 1.5) var(--inline-space);
}

.confirm__message {
  margin: 0;
  /* Los mensajes van de seis palabras a tres renglones —el de banear a alguien
     enumera lo que pasa— y el diálogo no debe saltar de tamaño entre uno y
     otro más de lo que pide el propio texto. */
  text-wrap: pretty;
}

.confirm__button {
  /* Los dos botones miden lo mismo aunque «Cancel» sea más corto que
     «Confirm»: en un diálogo de dos opciones, el ancho desigual se lee como
     jerarquía y aquí la jerarquía ya la dan el color y el orden. */
  min-inline-size: 8em;
  justify-content: center;
}