/* A document skin shared by the guide preview and its Tiptap surface.
   No presentation wrappers or generated text are stored in the article. */
:is(.usage-guide-document, .tiptap-editor-content > .usage-guide-document) {
  --guide-accent: #214bb4;
  --guide-ink: #30343b;
  --guide-paper: #fff;
  --guide-rule: #dfe4ed;
  box-sizing: border-box;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 32px clamp(20px, 5%, 48px) 56px;
  font-family: 'Songti SC', SimSun, serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--guide-ink);
  background: var(--guide-paper);
  overflow-wrap: anywhere;
}

/* The original imported HTML may still contain its own preface wrapper. */
.usage-guide-document .preface-document {
  max-width: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.usage-guide-document :is(h1, h2, h3) {
  padding: 0;
  border: 0;
  font-family: inherit;
  color: var(--guide-accent);
  font-weight: 600;
}
.usage-guide-document :is(h1, .preface-title) {
  margin: 0 0 28px;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: .15em;
  text-align: center;
}
.usage-guide-document :is(h2, .preface-section-title) {
  margin: 36px 0 14px;
  font-size: 18px;
  line-height: 1.85;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.usage-guide-document h1 + h2 { margin-top: 0; }
.usage-guide-document h3 { margin: 24px 0 10px; font-size: 16px; line-height: 1.85; }
/* Paragraph and blank-line spacing stays the same in both modes. */
.usage-guide-document p { text-align: start; }
.usage-guide-document :is(ul, ol) { margin: 12px 0; padding-left: 1.75em; }
.usage-guide-document li { margin: 0; }
.usage-guide-document a { color: var(--guide-accent); text-underline-offset: 3px; }
.usage-guide-document a:focus-visible { outline: 2px solid var(--guide-accent); outline-offset: 3px; }

.usage-guide-document img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  margin: 16px auto 28px;
  border: 1px solid var(--guide-rule);
  border-radius: 2px;
}
/* Images are block NodeViews inside Tiptap, plain img elements after saving. */
.usage-guide-document .tt-image-node { margin: 16px 0 28px; }
.usage-guide-document .tt-image-node img { margin: 0; }
.usage-guide-document p:has(> img:only-child) { display: flow-root; line-height: 0; }

html:has(body > .usage-guide-document) { background: #fff; }
body:has(> .usage-guide-document) { margin: 0; padding: 0 !important; }

/* The shared preview toolbar injects this style marker on theme changes. */
:root[data-color-mode="dark"] .usage-guide-document,
html:has(#app-dark-preview-style) .usage-guide-document {
  --guide-accent: #a6c4ff;
  --guide-ink: #dce4ee;
  --guide-paper: #11161c;
  --guide-rule: #3b4552;
}
html:has(#app-dark-preview-style):has(body > .usage-guide-document) { background: #11161c; }
/* Previously saved headings can carry dark blue inline spans. Keep them
   readable on dark paper without rewriting the author's saved formatting. */
:is(:root[data-color-mode="dark"], html:has(#app-dark-preview-style))
  .usage-guide-document :is(h1, h2, h3) * {
  color: var(--guide-accent) !important;
}

.tiptap-editor-content:has(> .usage-guide-document) { container: guide-editor / inline-size; }
@container guide-editor (max-width: 600px) {
  .tiptap-editor-content > .usage-guide-document { padding: 24px 18px 40px; }
  .usage-guide-document :is(h1, .preface-title) { font-size: 24px; margin-bottom: 24px; }
  .usage-guide-document :is(h2, .preface-section-title) { font-size: 17px; margin-top: 28px; }
}

@media (max-width: 600px) {
  :is(.usage-guide-document, .tiptap-editor-content > .usage-guide-document) { padding: 24px 18px 40px; }
  .usage-guide-document :is(h1, .preface-title) { font-size: 24px; margin-bottom: 24px; }
  .usage-guide-document :is(h2, .preface-section-title) { font-size: 17px; margin-top: 28px; }
}