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

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

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

#preview .mermaid svg {
  max-width: 100% !important;
  width: 100%;
}

/* 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;
}

/* 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;
}

/* MEW-017後半(min): table-only wide display toggle. Tables normally share
   the reading column's max-width via --table-max-width falling back to
   --reading-max-width; when wide-tables mode is enabled, overriding
   --table-max-width to 100% lets tables expand to the full preview width
   while headings/paragraphs/etc. remain capped at the reading column. */
#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%;
}

.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-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);
  }
}

#preview table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin-top: 1rem;
  margin-bottom: 1rem;
  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;
}