/* Markdown rhythm v30
 * A relationship-aware reading rhythm shared by published articles,
 * local workflow previews, and the rich document editor.
 */

:root {
  --hux-md-size: var(--hux-article-size, 18px);
  --hux-md-leading: var(--hux-article-leading, 1.9);
  --hux-md-measure: var(--hux-article-measure, 90ch);
  --hux-md-flow: calc(var(--hux-md-size) * 2);
  --hux-md-paragraph-gap: calc(var(--hux-md-size) * 0.75);
  --hux-md-related-gap: var(--hux-md-size);
  --hux-md-list-exit-gap: calc(var(--hux-md-size) * 1.25);
  --hux-md-section-gap: calc(var(--hux-md-size) * 3.5);
  --hux-md-subsection-gap: calc(var(--hux-md-size) * 2.25);
  --hux-md-divider-gap: calc(var(--hux-md-size) * 2.75);
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) {
  max-width: var(--hux-md-measure);
  font-size: var(--hux-md-size);
  line-height: var(--hux-md-leading);
}

/* Reset legacy physical margins before applying one authoritative rhythm. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface)
  > :where(p, ul, ol, pre, blockquote, figure, table, hr, h2, h3, .doc-callout, .markdown-section) {
  margin: 0;
}

.markdown-article > .markdown-section > :is(h2, h3) {
  margin: 0;
}

:is(.local-rich-article, .rich-editor-surface) > div:not([class]) {
  margin: 0;
  font-size: 1em;
  line-height: inherit;
}

/* 2em is the default Typeset flow for genuinely separate content blocks. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface)
  > :where(p, ul, ol, pre, blockquote, figure, table, hr, h2, h3, .doc-callout, .markdown-section)
  + :where(p, ul, ol, pre, blockquote, figure, table, hr, h2, h3, .doc-callout, .markdown-section) {
  margin-top: var(--hux-md-flow);
}

/* Consecutive prose remains visibly grouped. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface) > p + p {
  margin-top: var(--hux-md-paragraph-gap);
}

:is(.local-rich-article, .rich-editor-surface)
  > :is(p, div:not([class]))
  + :is(p, div:not([class])) {
  margin-top: var(--hux-md-paragraph-gap);
}

/* A lead-in sentence and the list/code it introduces form one reading unit. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface) > p + :is(ul, ol) {
  margin-top: var(--hux-md-paragraph-gap);
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) > p + pre,
:is(.markdown-article, .local-rich-article, .rich-editor-surface) > pre + p {
  margin-top: var(--hux-md-related-gap);
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) > :is(ul, ol) + p {
  margin-top: var(--hux-md-list-exit-gap);
}

/* Chapters and subsections always start on the same vertical scale. */
.markdown-article > * + .markdown-heading-2,
.local-rich-article > * + h2,
.rich-editor-surface > * + h2 {
  margin-top: var(--hux-md-section-gap);
}

.markdown-article > * + .markdown-heading-3,
.local-rich-article > * + h3,
.rich-editor-surface > * + h3 {
  margin-top: var(--hux-md-subsection-gap);
}

.markdown-article > .markdown-heading-2 + .markdown-heading-3,
.local-rich-article > h2 + h3,
.rich-editor-surface > h2 + h3 {
  margin-top: calc(var(--hux-md-size) * 1.125);
}

.markdown-article > :is(.markdown-heading-2, .markdown-heading-3)
  + :is(p, ul, ol, pre, blockquote, figure, table, .doc-callout),
.local-rich-article > :is(h2, h3)
  + :is(p, ul, ol, pre, blockquote, figure, table, .doc-callout),
.rich-editor-surface > :is(h2, h3)
  + :is(p, ul, ol, pre, blockquote, figure, table, .doc-callout, div:not([class])) {
  margin-top: var(--hux-md-related-gap);
}

.local-rich-article > :is(h2, h3) + div:not([class]) {
  margin-top: var(--hux-md-related-gap);
}

/* Contenteditable uses <div><br></div> for an intentional blank line.
 * Keep the caret line while preventing it from doubling the next chapter gap.
 */
:is(.local-rich-article, .rich-editor-surface)
  > div:not([class]):has(> br:only-child)
  + h2 {
  margin-top: calc(var(--hux-md-size) * 0.67);
}

/* A divider owns the separation around it; the following chapter does not double it. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface) > * + hr {
  margin-top: var(--hux-md-divider-gap);
}

.markdown-article > hr + .markdown-heading-2,
.local-rich-article > hr + h2,
.rich-editor-surface > hr + h2 {
  margin-top: var(--hux-md-divider-gap);
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) > hr {
  height: 1px;
  border: 0;
  background: #323236;
}

/* Lists use a calmer internal rhythm than surrounding article blocks. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface) > :is(ul, ol) {
  display: grid;
  gap: 0;
  padding-left: 1.45em;
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) li {
  padding-left: 0.2em;
  font-size: 1em;
  line-height: 1.75;
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) li + li {
  margin-top: 0.45em;
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) li::marker {
  color: #7b7b82;
}

/* Code, quotes and callouts share the same outer geometry. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface) > pre {
  overflow-x: auto;
  padding: 18px 20px;
  border: 1px solid #343438;
  border-radius: 6px;
  background: #101013;
  font-size: 0.875em;
  line-height: 1.6;
  white-space: pre;
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) > blockquote {
  padding: 0.35em 0 0.35em 1.15em;
  border-left: 3px solid #5e5e64;
  color: #b9b9bf;
  font-style: normal;
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) > blockquote > p,
:is(.markdown-article, .local-rich-article, .rich-editor-surface) > .doc-callout > p {
  margin: 0;
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) > .doc-callout {
  padding: 18px 20px;
}

/* Media aligns with the reading column and keeps captions optically attached. */
:is(.markdown-article, .local-rich-article, .rich-editor-surface)
  > :is(.markdown-media, .markdown-video-figure, figure.doc-image) {
  width: 100%;
}

:is(.markdown-article, .local-rich-article, .rich-editor-surface) figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  :root {
    --hux-md-section-gap: calc(var(--hux-md-size) * 2.75);
    --hux-md-subsection-gap: calc(var(--hux-md-size) * 1.9);
    --hux-md-divider-gap: calc(var(--hux-md-size) * 2.25);
  }

  :is(.markdown-article, .local-rich-article, .rich-editor-surface) > pre {
    padding: 16px;
  }
}