/* Visual output for AI X Generator pages. See visual.js. */
.fd-visual-hidden { display: none !important; }
/* The plugin's result column is too narrow for a canvas, so it widens once one is showing. */
.fd-visual .ai-x-generator-container:has(.fd-visual-active),
.fd-visual .ai-x-generator-form:has(.fd-visual-active),
.fd-visual .aixg-result-shell.fd-visual-active { width: 100% !important; max-width: 1120px !important; margin-inline: auto !important; box-sizing: border-box; }
@media (max-width: 760px) {
  .fd-visual:has(.fd-visual-active) { padding-inline: 0.5rem !important; }
  .fd-visual .ai-x-generator-container:has(.fd-visual-active) { padding-inline: 0 !important; }
  .fd-canvas { padding: 0.75rem; }
  .fd-canvas__actions { padding: 0 0.75rem 0.75rem; }
}
.fd-visual-output { font-family: Inter, system-ui, sans-serif; color: #111; text-align: left; }
.fd-canvas { background: #fff; color: #111; padding: 1.25rem; box-sizing: border-box; font-family: Inter, system-ui, sans-serif; }
.fd-canvas__title { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; }
.fd-canvas__grid {
  display: grid;
  grid-template-columns: repeat(var(--fd-columns), minmax(0, 1fr));
  grid-template-rows: var(--fd-rows);
  gap: 0;
  border-top: 1px solid #111;
  border-left: 1px solid #111;
}
.fd-canvas__block {
  padding: 0.85rem;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  background: #fff;
  min-width: 0;
  overflow-wrap: anywhere;
}
.fd-canvas__name { margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 700; color: #c81e2e; }
.fd-canvas__block ul { list-style: disc; margin: 0; padding: 0 0 0 1rem; }
.fd-canvas__block li { margin: 0 0 0.4rem; font-size: 0.875rem; line-height: 1.4; }
.fd-canvas__notes { margin-top: 1rem; background: #f4f2ef; border: 1px solid #111; }
.fd-canvas__mark { margin: 0.75rem 0 0; font-size: 0.75rem; color: #686868; text-align: right; }
.fd-canvas__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0 1.25rem 1.25rem; }
.fd-canvas__actions button {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid #111;
  border-radius: 0.375rem;
  background: #fff;
  color: #111;
  font: 600 0.9375rem Inter, system-ui, sans-serif;
  cursor: pointer;
}
.fd-canvas__actions button:first-child { background: #111; color: #fff; }
.fd-canvas__actions button:hover:not(:disabled) { background: #c81e2e; border-color: #c81e2e; color: #fff; }
.fd-canvas__actions button:disabled { opacity: 0.6; cursor: wait; }
.fd-canvas__status { margin: 0; font-size: 0.875rem; color: #c81e2e; }
.fd-visual-active .aixg-result-pdf-button { display: none !important; }
.fd-visual-active .aixg-result-toolbar { position: static !important; }

@media (max-width: 760px) {
  .fd-canvas:not(.is-export) .fd-canvas__grid { display: block; border-left: 0; }
  .fd-canvas:not(.is-export) .fd-canvas__block { grid-area: auto !important; border-left: 1px solid #111; }
}

/* The downloads always use this wide version, off screen. */
.fd-visual-stage { position: fixed; top: 0; left: -2400px; width: 1600px; z-index: -1; }
.fd-canvas.is-export { width: 1600px; padding: 2.5rem; }
.fd-canvas.is-export .fd-canvas__title { font-size: 2rem; }
.fd-canvas.is-export .fd-canvas__name { font-size: 1rem; }
.fd-canvas.is-export .fd-canvas__block { padding: 1.1rem; }
.fd-canvas.is-export .fd-canvas__block li { font-size: 1.05rem; }