/* ==========================================================================
   styles/preview.css
   --------------------------------------------------------------------------
   Styling for the preview pane. These rules mirror the published site,
   including .poem preserving its own newlines - which is why a poem needs
   neither a backslash nor trailing spaces in this pipeline.

   If the site's stylesheet changes, this file changes with it. Otherwise the
   preview starts lying, and a lying preview is worse than none.
   ========================================================================== */

.preview {
  max-width: 38rem;
  margin: 0 auto;
  padding: 40px 32px 40vh;
  font-size: var(--preview-size);
  line-height: var(--preview-leading);
  color: var(--fg);
  text-align: justify;
}

.preview > *:first-child { margin-top: 0; }

.preview p { margin: 0 0 1.1em; text-indent: 1.7em; }
.preview p:first-of-type,
.preview p.no-indent,
.preview h1 + p, .preview h2 + p, .preview h3 + p, .preview h4 + p,
.preview blockquote + p,
.preview hr + p { text-indent: 0; }

.preview h1, .preview h2, .preview h3, .preview h4 {
  margin: 2em 0 0.75em; line-height: 1.65; font-weight: 700; text-align: start;
}
.preview h1 { font-size: 1.55rem; }
.preview h2 { font-size: 1.3rem; }
.preview h3 { font-size: 1.12rem; color: var(--accent-strong); }
.preview h4 { font-size: 1rem; color: var(--fg-dim); }

.preview blockquote {
  margin: 1.7em 0; padding: 0.3em 1.3em;
  border-inline-start: 3px solid var(--accent);
  color: var(--fg-dim); font-style: italic;
}
.preview blockquote p { text-indent: 0; }

/* Newlines inside a poem are meaningful. This rule is what makes a trailing
   backslash unnecessary - and harmful, since it prints literally. */
.preview .poem {
  white-space: pre-line;
  text-indent: 0 !important; text-align: center;
  margin: 2rem auto; padding: 1.5rem 2rem;
  background: transparent;
  border: 1px solid var(--line); border-radius: 12px;
  font-style: italic; line-height: 1.8;
}

.preview .text-center { text-indent: 0; text-align: center; }
.preview .scene-start { font-weight: 700; color: var(--accent-strong); }

.preview hr { border: 0; margin: 2.6em auto; width: 38%; border-top: 1px solid var(--line); }

/* The site prints links in ochre and bold. The preview used to print them
   blue, which was both wrong and, on the dark themes, loud. */
.preview a {
  color: var(--accent-strong); font-weight: 700; text-decoration: none;
  text-underline-offset: 3px;
}
.preview a:hover { text-decoration: underline; }

.preview ul, .preview ol { margin: 0 0 1.5rem; padding-right: 1.5rem; padding-left: 1.5rem; }
.preview li { margin-bottom: 0.8rem; color: var(--fg-dim); line-height: 1.8; }

/* Numbering follows the language of the item itself, exactly as the site
   does it. Both rules depend on dir="auto" being set on the <li>. */
.preview ol li:dir(rtl) { list-style-type: persian; }
.preview ol li:dir(ltr) { list-style-type: decimal; }
.preview ol li::marker,
.preview .footnote li::marker { color: var(--accent); font-weight: bold; }

.preview code {
  font-family: var(--font-mono); font-size: 0.85em; direction: ltr; unicode-bidi: isolate;
  background: var(--panel-2); padding: 0.15em 0.4em; border-radius: 4px;
}
.preview pre {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; overflow-x: auto; direction: ltr; margin-bottom: 1.1em;
}
.preview pre code { background: none; padding: 0; }

.preview table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.92em; }
.preview th, .preview td { border: 1px solid var(--line); padding: 9px 12px; text-align: start; }
.preview th { background: var(--panel-2); font-weight: 600; }

.preview sup { font-size: 0.7em; }
.preview sup a.footnote-ref {
  color: var(--accent); font-weight: 800; text-decoration: none; padding: 0 2px;
}
.preview sup a.footnote-ref:hover { text-decoration: underline; color: var(--fg); }

.preview .footnote {
  margin-top: 3rem; margin-bottom: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.preview .footnote hr, .preview .footnotes-sep { display: none; }
.preview .footnote h3 { font-size: 1.1rem; margin-top: 0; margin-bottom: 1.5rem; }
.preview .footnote li { font-size: 0.9rem; }
.preview .footnote li p { display: inline; text-indent: 0; }

.preview a.footnote-backref {
  color: var(--accent); text-decoration: none; margin: 0 8px;
  font-weight: 900; font-family: Arial, sans-serif; display: inline-block;
}
/* The arrow points back the way the text runs. */
.preview .footnote li:dir(rtl) a.footnote-backref { transform: scaleX(-1); }

/* Sources: build.py wraps them so Latin entries can flip to their own
   direction and typeface without dragging the Persian ones with them. */
.preview .sources-container li,
.preview .sources-container p { font-size: 0.9rem; color: var(--fg-dim); line-height: 1.8; }
.preview .sources-container li:dir(ltr) {
  text-align: left; direction: ltr;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* The two structural markers build.py splits on. Showing them makes the
   shape of the published page visible while writing. */
.preview .marker {
  display: flex; align-items: center; gap: 12px;
  margin: 2.4em 0; text-indent: 0;
  font-size: 0.72rem; font-weight: 600; color: var(--accent-strong);
}
.preview .marker::before, .preview .marker::after {
  content: ''; flex: 1; height: 1px; background: var(--accent); opacity: 0.4;
}

.preview .preview-error {
  color: var(--err); text-indent: 0;
  font-family: var(--font-mono); font-size: 0.85rem;
}

.preview__empty {
  color: var(--fg-faint); text-align: center; padding: 22vh 0; text-indent: 0;
  font-size: 0.9rem;
}