/* Manual chapters 04 and 11: shared editor, preview and published article type. */
/* Printed articles must not inherit the floating screen navigation. */
@media print {
  body.content-page > .site-header,
  body.content-page > .site-footer,
  body.content-page .content-aside,
  body.content-page .engagement,
  body.content-page .article-actions,
  body.content-page .post-tags,
  body.content-page .back-link,
  body.content-page .related-content { display: none !important; }
  body.content-page .content-layout { display: block !important; }
  body.content-page .content-body { width: 100% !important; max-width: 800px !important; margin-inline: auto; }
  body.content-page .content-body :is(h2,h3) { break-after: avoid; }
  body.content-page .content-body :is(img,figure) { break-inside: avoid; }
  body.content-page .content-body p:has(> img:only-child) { break-inside: avoid; }
  body.content-page .content-body p:has(+ p.caption) { break-after: avoid; }
  body.content-page .content-body p.caption { break-before: avoid; }
  body.content-page .content-body p { orphans: 2; widows: 2; }
}
:root {
  --article-panel: #f5f5f5;
  --article-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif;
  --article-body-size: 16px;
  --article-body-leading: 28.8px;
  --article-heading-size: 20px;
  --article-heading-leading: 28px;
}
.content-body, .post-form .rich-editor {
  font-family: var(--article-font) !important;
  font-size: var(--article-body-size) !important;
  line-height: var(--article-body-leading) !important;
  font-weight: 400;
  letter-spacing: 0 !important;
  word-spacing: 0;
  text-align: left;
  font-style: normal !important;
  overflow-wrap: anywhere;
}
:is(.content-body,.post-form .rich-editor) :is(p,li,span,font,div):not(.engagement,.engagement *,.caption,.caption *,.comparison-description,.comparison-description *,.article-description,.article-description *,.article-meta,.article-meta *,.article-label,.article-label *,.article-smallprint,.article-smallprint *,figcaption,figcaption *) {
  font-family: inherit !important;
  font-size: var(--article-body-size) !important;
  line-height: var(--article-body-leading) !important;
  letter-spacing: 0 !important;
  word-spacing: 0;
}
:is(.content-body,.post-form .rich-editor) p { margin: 0 0 16px; max-width: none; }
:is(.content-body,.post-form .rich-editor)>div:not([class]) { margin-bottom:16px; }
:is(.content-body,.post-form .rich-editor) :is(h1,h2,h3,h4,h5,h6) {
  font: 600 var(--article-heading-size)/var(--article-heading-leading) var(--article-font) !important;
  letter-spacing: 0 !important;
  margin: 32px 0 16px;
  text-transform: none;
}
:is(.content-body,.post-form .rich-editor)>:is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }
/* Journal essays share their reading rhythm with the editor and preview. */
:is(#post-root,main):has(.article-reading-stats) .content-body,
.post-form:has(option[value="journal"]:checked) .rich-editor {
  --journal-chapter-before: 48px;
  --journal-chapter-after: 24px;
  --journal-subheading-before: 32px;
  --journal-subheading-after: 20px;
}
:is(.content-body,.post-form .rich-editor) > h2 {
  margin-top: var(--journal-chapter-before,32px);
  margin-bottom: var(--journal-chapter-after,16px);
}
:is(.content-body,.post-form .rich-editor) > h3 {
  margin-top: var(--journal-subheading-before,32px);
  margin-bottom: var(--journal-subheading-after,16px);
}
:is(.content-body,.post-form .rich-editor) > :is(h2,h3):first-child { margin-top: 0; }
@media(max-width:640px) {
  :is(#post-root,main):has(.article-reading-stats) .content-body,
  .post-form:has(option[value="journal"]:checked) .rich-editor {
    --journal-chapter-before: 36px;
    --journal-chapter-after: 20px;
    --journal-subheading-before: 28px;
    --journal-subheading-after: 16px;
  }
  :is(.content-body,.post-form .rich-editor) :is(p,li,blockquote,dd,div:not([class])):not(:has(img,video,iframe,table,button,section,aside,div,p,ul,ol,dl,h1,h2,h3,h4,h5,h6)):not(.caption,.comparison-description,.article-description,.article-meta,.article-label,.article-smallprint,.reading-original):not(figure *,table *,.image-comparison *,.research-comparison *,.reuse-demo *,.engagement *,.post-tags *,[contenteditable="false"] *) {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-character;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
}
:is(.content-body,.post-form .rich-editor) :is(h1,h2,h3,h4,h5,h6) :is(span,font):not(.engagement,.engagement *) { font: inherit !important; }
:is(.content-body,.post-form .rich-editor) :is(h1,h2,h3,h4,h5,h6) :is(span,font,b,strong,em,i):not(.engagement,.engagement *) { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; letter-spacing: 0 !important; }
:is(.content-body,.post-form .rich-editor) :is(strong,b) { font-weight: 600; }
/* Imported text colors must not reduce contrast against the dark reading surface. */
html[data-theme="dark"] .content-body { color: var(--ink); }
html[data-theme="dark"] .content-body p { color: inherit; }
html[data-theme="dark"] .content-body :is(font[color],p[style*="color"],div[style*="color"],span[style*="color"],b[style*="color"],strong[style*="color"],em[style*="color"],i[style*="color"]) { color: inherit !important; }
:is(.content-body,.post-form .rich-editor) * { font-style: normal !important; }
:is(.content-body,.post-form .rich-editor) :is(em,i) { font-weight: 600; }
:is(.content-body,.post-form .rich-editor) h1 { font-size:32px !important;line-height:44.8px !important; }
:is(.content-body,.post-form .rich-editor) h2 { font-size:24px !important;line-height:33.6px !important; }
:is(.content-body,.post-form .rich-editor) h4 { font-size:18px !important;line-height:28.8px !important; }
:is(.content-body,.post-form .rich-editor) h5 { font-size:16px !important;line-height:25.6px !important; }
.reading-source { max-width:800px; margin:0 auto 32px; padding:16px 0; border-top:1px solid var(--line,#e5e5e5); border-bottom:1px solid var(--line,#e5e5e5); display:flex; flex-wrap:wrap; gap:8px 24px; font:400 14px/1.6 var(--article-font); color:var(--muted,#737373); }
.reading-source a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.content-body .reading-original { margin: 24px 0; font-size: 14px; font-weight: 400; }
.reading-original a { color: var(--muted,#737373); text-decoration: underline; text-underline-offset: 3px; }
:is(.content-body,.post-form .rich-editor) a:not(.back-link,.post-tags a) { text-decoration:underline; text-underline-offset:3px; }
:is(.content-body,.post-form .rich-editor) :is(ul,ol) { margin: 0 0 16px; padding-left: 24px; }
:is(.content-body,.post-form .rich-editor) :is(p,li,figcaption,blockquote) { text-align:left; }
:is(.content-body,.post-form .rich-editor) :is(ul,ol) { list-style-position:outside; }
:is(.content-body,.post-form .rich-editor) blockquote { position:relative; margin:24px 0; padding:20px 24px 20px 44px; background:var(--article-panel); border:0; border-radius:0; color:var(--ink,#333); }
:is(.content-body,.post-form .rich-editor) blockquote::before { content:""; position:absolute; inset:20px auto 20px 20px; width:2px; background:var(--line,#ddd); pointer-events:none; }
@media(max-width:640px) {
  :is(.content-body,.post-form .rich-editor) blockquote { padding:16px 16px 16px 32px; }
  :is(.content-body,.post-form .rich-editor) blockquote::before { inset:16px auto 16px 14px; }
}
:is(.content-body,.post-form .rich-editor) blockquote > :last-child { margin-bottom:0; }
/* Existing note wrappers remain readable without a second inset panel. */
:is(.content-body,.post-form .rich-editor) .lab-note:has(blockquote) { padding:0; background:transparent; }
:is(.content-body,.post-form .rich-editor) .lab-note > blockquote { margin:0; }
html[data-theme="dark"] { --article-panel:#262626; }
:is(.content-body,.post-form .rich-editor) :is(code,pre) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }
:is(.content-body,.post-form .rich-editor) pre { overflow-x: auto; white-space: pre; }
:is(.content-body,.post-form .rich-editor) img:not(.action-glyph img) { max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; margin: 32px 0; }
:is(.content-body,.post-form .rich-editor) figcaption { font: 400 12px/19.2px var(--article-font); margin-top: 8px; letter-spacing: 0; }
.content-page .content-title,.content-title,.article-preview-title { font: 600 32px/44.8px var(--article-font); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; text-transform: none; }
@media(max-width:640px) {
  :root { --article-body-size: 14px; --article-body-leading: 22.4px; --article-heading-size: 18px; --article-heading-leading: 25.2px; }
  .content-page .content-title,.content-title,.article-preview-title { font-size: 24px; line-height: 32.4px; }
  :is(.content-body,.post-form .rich-editor) h1 {font-size:24px !important;line-height:32.4px !important;}
  :is(.content-body,.post-form .rich-editor) h2 {font-size:20px !important;line-height:28px !important;}
  :is(.content-body,.post-form .rich-editor) h4 {font-size:16px !important;line-height:25.6px !important;}
  :is(.content-body,.post-form .rich-editor) h5 {font-size:16px !important;line-height:22.4px !important;}
}
.external-video { margin: 32px 0; width: 100%; }
.external-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: #f5f5f5; }
:is(.content-body,.post-form .rich-editor) .external-video figcaption,
:is(.content-body,.post-form .rich-editor) .external-video figcaption a { font: 400 12px/19.2px var(--article-font) !important; color: #737373; }
.post-form .rich-editor .external-video iframe { pointer-events: none; }
.external-video figcaption a[href^="https://www.youtube.com/watch"] { display:inline-flex; align-items:center; gap:6px; }
.external-video figcaption a[href^="https://www.youtube.com/watch"]::before { content:"▶"; display:inline-grid; place-items:center; width:20px; height:14px; border-radius:4px; background:#f03; color:#fff; font:400 9px/1 sans-serif; }
.content-body .related-content h2 { font:600 16px/25.6px var(--article-font) !important; margin:0 0 16px; }
.content-body .related-content a { font:400 14px/22.4px var(--article-font) !important; }
.content-body .related-content strong { font:400 14px/22.4px var(--article-font) !important; }
.content-page .content-body .related-content span { font:400 12px/19.2px var(--article-font) !important; }
@media(max-width:640px) {
  .content-body .related-content h2 { font-size:14px !important; line-height:22.4px !important; }
  .content-body .related-content a { grid-template-columns:minmax(0,1fr); gap:4px; }
  .content-body .related-content a,.content-body .related-content strong { font-size:14px !important; line-height:22.4px !important; }
}
/* Editor size choices use fixed, reviewable values in every article surface. */
:is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="default"]:not(.engagement) { font-size:var(--article-body-size) !important; line-height:var(--article-body-leading) !important; }
:is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="12"]:not(.engagement) { font-size:12px !important; line-height:1.6 !important; }
:is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="14"]:not(.engagement) { font-size:14px !important; line-height:1.6 !important; }
:is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="16"]:not(.engagement) { font-size:16px !important; line-height:1.8 !important; }
:is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="18"]:not(.engagement) { font-size:18px !important; line-height:1.6 !important; }
:is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="20"]:not(.engagement) { font-size:20px !important; line-height:1.6 !important; }
:is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="24"]:not(.engagement) { font-size:24px !important; line-height:1.6 !important; }
@media(max-width:640px) {
  :is(.content-body,.post-form .rich-editor) :is(span,font)[data-text-size="16"]:not(.engagement) { line-height:1.6 !important; }
}
.content-body table{width:100%;border-collapse:collapse;table-layout:fixed;margin:24px 0;font-size:14px;line-height:1.6}
.content-body th,.content-body td{border-bottom:1px solid var(--line,#ddd);padding:10px 12px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.content-body th{font-weight:600}
:is(.content-body,.post-form .rich-editor) table :is(th,td) { text-align:left; }
:is(.content-body,.post-form .rich-editor) table tr > :is(th,td):first-child { padding-left:0; }
@media(max-width:640px){.content-body table{font-size:12px}.content-body th,.content-body td{padding:8px 4px}}

/* Shared supporting text scale; never reduced on mobile. */
:is(.content-body,.post-form .rich-editor) :is(figcaption,.caption,.article-description,.comparison-description),
:is(.content-body,.post-form .rich-editor) :is(figcaption,.caption,.article-description,.comparison-description) :is(span,font,a){font-size:14px!important;line-height:1.6!important;font-weight:400;letter-spacing:0}
:is(.content-body,.post-form .rich-editor) :is(.article-label,.article-meta,.article-smallprint),
:is(.content-body,.post-form .rich-editor) :is(.article-label,.article-meta,.article-smallprint) :is(span,font,a){font-size:12px!important;line-height:1.6!important;letter-spacing:0}

:is(.content-body,.post-form .rich-editor) p.caption{color:var(--muted,#666)}
:is(.content-body,.post-form .rich-editor) > p.caption:has(+ h2) { margin:32px 0 24px; padding:0; border:0; background:transparent; font:400 14px/22.4px var(--article-font); }
:is(.content-body,.post-form .rich-editor) > p.caption + h2 { margin-top:24px; }

/* Attach captions to their image without changing the following text rhythm. */
:is(.content-body,.post-form .rich-editor) p:has(> img:only-child):has(+ p.caption) { margin-bottom:12px; }
:is(.content-body,.post-form .rich-editor) p:has(+ p.caption) > img:only-child { margin-bottom:0; }
:is(.content-body,.post-form .rich-editor) p:has(> img:only-child) + p.caption { margin-top:0; }

/* Heading semantics override imported inline sizes and editor text-size choices. */
:is(.content-body,.post-form .rich-editor) :is(h1,h2,h3,h4,h5,h6) {
  font-size:var(--heading-size) !important; line-height:var(--heading-leading) !important;
}
:is(.content-body,.post-form .rich-editor) h1 { --heading-size:32px; --heading-leading:44.8px; }
:is(.content-body,.post-form .rich-editor) h2 { --heading-size:24px; --heading-leading:33.6px; }
:is(.content-body,.post-form .rich-editor) h3 { --heading-size:20px; --heading-leading:28px; }
:is(.content-body,.post-form .rich-editor) h4 { --heading-size:18px; --heading-leading:28.8px; }
:is(.content-body,.post-form .rich-editor) :is(h5,h6) { --heading-size:16px; --heading-leading:25.6px; }
:is(.content-body,.post-form .rich-editor) :is(h1,h2,h3,h4,h5,h6) :is(span,font,a,b,strong,em,i)[data-text-size],
:is(.content-body,.post-form .rich-editor) :is(h1,h2,h3,h4,h5,h6) * {
  font-size:inherit !important; line-height:inherit !important; font-family:inherit !important; font-weight:inherit !important; letter-spacing:0 !important;
}
@media(max-width:640px) {
  :is(.content-body,.post-form .rich-editor) h1 { --heading-size:24px; --heading-leading:32.4px; }
  :is(.content-body,.post-form .rich-editor) h2 { --heading-size:20px; --heading-leading:28px; }
  :is(.content-body,.post-form .rich-editor) h3 { --heading-size:18px; --heading-leading:25.2px; }
  :is(.content-body,.post-form .rich-editor) h4 { --heading-size:16px; --heading-leading:25.6px; }
}