/* Document appearance for the preview pane */
body {
  font-family: 'Helvetica Neue', sans-serif;
}

#preview {
  padding: 1rem 2rem;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #002244;
}

#preview img,
#preview .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* mermaid.js writes its own inline max-width (from useMaxWidth: true) onto
   the generated <svg>, which otherwise overrides the shared rule above. */
#preview .mermaid svg {
  max-width: 100% !important;
  width: 100%;
}

.mermaid .label foreignObject > div {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}

#preview h1,
#preview h2,
#preview h3,
#preview h4,
#preview h5 {
  border-bottom: 1px solid #aac8ff;
  color: #0055aa;
}

#preview .preview-sanitizer-error {
  color: #b00020;
  border: 1px solid #b00020;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  background-color: #fdeaea;
}

#preview .preview-heading-flash {
  background-color: var(--heading-flash-bg, #fff8b3);
  box-shadow: 0 0 0 2px var(--heading-flash-ring, rgba(255, 248, 179, 0.6));
}

#preview .preview-heading-flash.preview-heading-fade-out {
  animation: preview-heading-fade-out var(--heading-flash-fade-duration, 600ms)
    ease-out forwards;
}

@keyframes preview-heading-fade-out {
  0% {
    background-color: var(--heading-flash-bg, #fff8b3);
    box-shadow: 0 0 0 2px var(--heading-flash-ring, rgba(255, 248, 179, 0.6));
  }

  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(255, 248, 179, 0);
  }
}

/* Cross-search string-level match highlight (Issue #193 round-3 fix 1):
   applied to just the matched substring, independent of the heading-flash
   styling/timing above. */
#preview mark.crosssearch-flash {
  background-color: var(--heading-flash-bg, #fff8b3);
  box-shadow: 0 0 0 2px var(--heading-flash-ring, rgba(255, 248, 179, 0.6));
  color: inherit;
  border-radius: 2px;
}

#preview mark.crosssearch-flash.crosssearch-flash-fade-out {
  animation: crosssearch-flash-fade-out var(--search-match-flash-fade-duration, 600ms)
    ease-out forwards;
}

@keyframes crosssearch-flash-fade-out {
  0% {
    background-color: var(--heading-flash-bg, #fff8b3);
    box-shadow: 0 0 0 2px var(--heading-flash-ring, rgba(255, 248, 179, 0.6));
  }

  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(255, 248, 179, 0);
  }
}

#preview table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1rem 0;
  width: max-content;
}

#preview th,
#preview td {
  border: 1px solid #aac8ff;
  padding: 0.4rem 0.75rem;
  text-align: left;
}

#preview th {
  background-color: #dfefff;
  color: #0055aa;
  font-weight: 600;
}

#preview tbody tr:nth-child(even) {
  background-color: #f4f8ff;
}

pre {
  background: #dfefff;
  padding: 0.5rem;
  overflow-x: auto;
  border-left: 4px solid #88b4ff;
}

code {
  background: #cce0ff;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  color: #003366;
}

pre code {
  display: block;
  padding: 0;
  background: transparent;
  color: inherit;
}

a {
  color: #0077cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* MEW-017(min): Reading column width for top-level flow content.
   Headings, paragraphs, lists, blockquotes, hr, tables, code blocks, and
   Mermaid diagrams all share the same max-width (--reading-max-width) and
   are horizontally centered as a block within #preview. Tables and code
   blocks additionally shrink to their own content when narrower than the
   cap (width: max-content) and scroll horizontally if their content would
   exceed the cap (per MEW-007), but never render wider than the shared
   column. Mermaid diagrams instead always fill the column width (Z-2):
   mermaid.js's own inline max-width on the generated <svg> is overridden
   below so the diagram scales up to the cap rather than shrinking to its
   natural size. Text within paragraphs/headings still wraps left-aligned
   (ragged right) inside that centered column; only the column's own
   horizontal position is centered, not the text's line alignment.
   Values are exposed as custom properties so a future adjustment UI can
   reuse them as initial values. */
#preview {
  --reading-max-width: 60rem;
  --reading-line-height: 1.75;
  --reading-paragraph-spacing: 1.1em;
  --reading-heading-space-before: 1.6em;
  --reading-heading-space-after: 0.7em;
}

/* Shared positioning for every top-level block type. A fixed calc()-based
   left offset (not margin-left/right: auto) is essential here: auto-
   centering computes a different offset for each element based on ITS OWN
   rendered width, so a narrow element (a short code block) ends up with a
   bigger margin than a wide one (a paragraph that wraps out to the full
   cap) even though both are nominally "centered". A fixed offset anchors
   every element's left edge to the same point regardless of its own width,
   so tables/code sit left-aligned inside the centered column exactly like
   body text does, only falling short on the right (ragged right) when
   their content doesn't need the full width. Mermaid diagrams always fill
   the column width (Z-2), so this left-anchoring has no visible effect on
   them, but the same rule still applies for consistency. */
#preview > h1,
#preview > h2,
#preview > h3,
#preview > h4,
#preview > h5,
#preview > h6,
#preview > p,
#preview > ul,
#preview > ol,
#preview > blockquote,
#preview > hr,
#preview pre,
#preview .mermaid {
  max-width: min(var(--reading-max-width), 100%);
  margin-left: calc((100% - min(var(--reading-max-width), 100%)) / 2);
  margin-right: 0;
}

/* MEW-017後半(min): #preview table is split out of the shared rule above so
   a wide-tables toggle can override it individually (--table-max-width).
   Falls back to --reading-max-width when unset, so the default cap is
   unchanged. Unlike the shared rule's fixed left offset, tables always
   use auto margins: since a table's own width (via width: max-content)
   is usually narrower than the cap, a fixed offset would leave it
   left-anchored instead of centered, and would jump position when the
   cap changes (wide toggle). Auto margins keep it centered on its own
   rendered width in both states. */
#preview table {
  max-width: min(var(--table-max-width, var(--reading-max-width)), 100%);
  margin-left: auto;
  margin-right: auto;
}

#preview.wide-tables {
  --table-max-width: 100%;
}

/* Shrink-to-fit sizing only; the column position (max-width + left offset)
   is set once, for every block type, by the shared rule above. */
#preview pre {
  width: max-content;
}

/* Line-height and vertical rhythm for the same flow-content set. */
#preview > h1,
#preview > h2,
#preview > h3,
#preview > h4,
#preview > h5,
#preview > h6,
#preview > p,
#preview > ul,
#preview > ol,
#preview > blockquote {
  line-height: var(--reading-line-height);
}

#preview > p {
  margin-top: 0;
  margin-bottom: var(--reading-paragraph-spacing);
}

#preview > h1,
#preview > h2,
#preview > h3,
#preview > h4,
#preview > h5,
#preview > h6 {
  margin-top: var(--reading-heading-space-before);
  margin-bottom: var(--reading-heading-space-after);
}

/* Avoid excess whitespace when a document opens with a heading. */
#preview > h1:first-child,
#preview > h2:first-child,
#preview > h3:first-child,
#preview > h4:first-child,
#preview > h5:first-child,
#preview > h6:first-child {
  margin-top: 0;
}