/*
 * Live split-view preview for the WordPress Informed Consent Generator page.
 * Wide screens (>= 1200px) only; narrow screens are unchanged, and the normal
 * Generate/Print flow is untouched. Activated by the body.icg-has-live-preview
 * class that preview.js adds once it has built the preview pane.
 */
#livePreview { display: none; }

@media (min-width: 1200px) {
  /* Give the split view room: widen the theme content container on this page.
     The header is suppressed on this page and the footer is a separate
     container, so only the tool area widens. */
  body.icg-has-live-preview #page.grid-container { max-width: min(95vw, 1600px); }
  body.icg-has-live-preview #main.site-main { max-width: none; }

  /* Two-column layout (form left, sticky live preview right). The #icg-app
     prefix beats app.css '#icg-app #demographicsPage{max-width:900px}'. */
  body.icg-has-live-preview #icg-app #demographicsPage {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 3vw, 3.5rem);
    align-items: start;
  }
  body.icg-has-live-preview #icg-app #demographicsForm { min-width: 0; }

  body.icg-has-live-preview #icg-app #livePreview {
    display: block;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--jwg-line, #dfe7ec);
    border-radius: var(--jwg-radius, 10px);
    box-shadow: var(--jwg-shadow, 0 1px 3px rgba(13, 27, 42, 0.08));
    padding: 1.5rem 1.75rem;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* keep the document's line length readable as the pane grows */
  body.icg-has-live-preview #icg-app #livePreview .frameStyle { border: none; margin: 0 auto; padding: 0; text-align: justify; max-width: 820px; }
  body.icg-has-live-preview #icg-app #livePreview h1 { font-size: 1.25rem; }
  body.icg-has-live-preview #icg-app #livePreview h3 { font-size: 1rem; margin-top: 1em; }
  body.icg-has-live-preview #icg-app #livePreview img { max-height: 70px; max-width: 120px; }
  body.icg-has-live-preview .icg-live-empty { color: var(--jwg-ink-muted, #4b5a68); font-style: italic; }

  body.icg-has-live-preview #icg-app #livePreview::before {
    content: "// live preview";
    display: block;
    font-family: var(--jwg-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--jwg-teal-dark, #0f766e);
    margin-bottom: 0.75rem;
  }
}