/* ============================================================
   syu.run - Docs Stylesheet

   reylf の site/style.css（紙テーマ）を前提に、その上へ Markdown 由来の
   要素だけを足す差分スタイル。必ず /reylf/style.css の後に読み込むこと。
   色は reylf 側のカスタムプロパティ（--bg / --text / --muted / --line /
   --accent / --accent-soft / --surface）をそのまま使うので、reylf 側で
   パレットを変えればこちらも追従する。
   ============================================================ */

/* ドキュメントは表が多いので site/style.css の .wrap より広く取る */
.doc-body {
  max-width: none;
}

body:has(.doc-body) .wrap {
  max-width: 860px;
}

/* ── 一覧ページ・戻り導線 ── */

.doc-back {
  margin: 0 0 24px;
  font-size: 0.9rem;
}

.features a {
  text-decoration: none;
}

.features a:hover {
  text-decoration: underline;
}

/* ── 本文 ── */

.doc-body > :first-child {
  margin-top: 0;
}

.doc-body > :last-child {
  margin-bottom: 0;
}

/* site/style.css は h1〜h3 / p / ul / ol / table / th / td を既に定義しているので、
   ここでは不足している要素と、目次ジャンプ時の位置調整だけを補う。 */

.doc-body h2,
.doc-body h3,
.doc-body h4 {
  scroll-margin-top: 16px;
}

.doc-body h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  margin: 22px 0 8px;
}

.doc-body li > ul,
.doc-body li > ol {
  margin-top: 6px;
}

/* 未公開ドキュメントを指していたためリンクを外した箇所 */
.doc-unlinked {
  color: var(--muted);
}

/* ── コード ── */

.doc-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

.doc-body pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 16px;
  overflow-x: auto;
}

.doc-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ── その他 ── */

.doc-body blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.doc-body blockquote > :last-child {
  margin-bottom: 0;
}

.doc-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

.doc-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 生成元リポジトリとコミットの表示 */
.doc-source {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Responsive ── */

@media (max-width: 640px) {
  .doc-body {
    font-size: 0.95rem;
  }
}