/* Suisou — Prose（長文）

     <article data-suisou-prose>… markdown が吐いた HTML …</article>
     <div data-suisou-prose="tight">… panel の中の短いメモ …</div>

   ★これは Suisou で唯一「素の要素に直接当てる」場所。
     base.css の「要素セレクタは使わない」を破るが、[data-suisou-prose] の
     内側に閉じているので適用先には漏れない。
     破っていい場所を1つだけ用意して封じ込める、という形。

   ★新しい見た目をここで発明しない。
     リンク・コード・引用・箇条書き・表は、それぞれの部品ファイルが
     [data-suisou-prose] :where(…) を自分のセレクタに並べている。
     値を2箇所に書くとズレるため、prose 側では触らない。
     このファイルが持つのは「大きさの割り当て」と「縦のリズム」だけ。

   ★なぜ要るか: markdown が吐く <h2> や <p> に属性は書けない。
     Suisou の書き方（data-suisou-text="s24 w700"）が使えないので、
     包む側に1つだけ付けて中で割り当てる。 */

[data-suisou-prose] {
  font-size: var(--suisou-size-16);
  line-height: calc(var(--suisou-lh-16) + 0.25rem);   /* 長文は UI に +4 相当 */
}

/* ── リセット ─────────────────────────────
   ブラウザ既定の margin を落とす。リズムは下でまとめて作り直す */
[data-suisou-prose] :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd,
                          pre, blockquote, table, figure, hr) {
  margin: 0;
}

/* ── 大きさ … 設計仕様の「長文」の段 ───── */

[data-suisou-prose] :where(h1) { font-size: var(--suisou-size-28); line-height: var(--suisou-lh-28); font-weight: 700; }
[data-suisou-prose] :where(h2) { font-size: var(--suisou-size-24); line-height: var(--suisou-lh-24); font-weight: 700; }
[data-suisou-prose] :where(h3) { font-size: var(--suisou-size-20); line-height: var(--suisou-lh-20); font-weight: 700; }
[data-suisou-prose] :where(h4) { font-size: var(--suisou-size-16); line-height: var(--suisou-lh-16); font-weight: 700; }

/* ★h5 / h6 はサイズを増やさない。段が7つしかないので、6段の見出しに
   1段ずつ割り当てると本文と衝突する（type-spec §5）。区別は帯とウェイトで作る。 */
[data-suisou-prose] :where(h5) { font-size: var(--suisou-size-16); line-height: var(--suisou-lh-16); font-weight: 500; }
[data-suisou-prose] :where(h6) { font-size: var(--suisou-size-14); line-height: var(--suisou-lh-14); font-weight: 700; }

/* ── 見出しの帯 ───────────────────────────
   ★左にぶら下げる。字下げしないので、見出しの文字は本文と左端が揃う。

   ★border ではなく ::before で描く。border-left は箱ごと角丸になるので
     カプセル型にできない。絶対配置なら箱が動かず、入れ物の余白にも依存しない。
     擬似要素を1つ使うが、markdown のアンカーリンクは <a> を挿入する方式が
     主流なのでぶつかりにくい。

   ★帯は階層を「担う」のではなく補強する。主役はサイズとウェイトなので、
     h3 と h4 が同じ 3px でも 20px と 16px の差が先に効く。
     6段に6種類の帯を用意する必要はない。

       h1  帯なし … 記事のタイトルは1つしかないので区別が要らない
       h2  6px 濃  … いちばん強い
       h3  3px 濃
       h4  3px 薄
       h5  1px 薄
       h6  帯なし … 14px という大きさ自体がしるし

   帯と文字の間はどの段も space-2。太さが違っても右端が揃い、
   太いものだけが左へ伸びる。

   ★前提: 入れ物の左に 6px + space-2（=14px）以上の余白があること。
     panel の余白（space-3 = 16px）はこれを満たす。地べたに直置きして
     画面の端に寄せると、帯は外にはみ出して見切れる。 */

[data-suisou-prose] :where(h2, h3, h4, h5) { position: relative; }

[data-suisou-prose] :where(h2, h3, h4, h5)::before {
  content: "";
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  border-radius: var(--suisou-radius-pill);
}

[data-suisou-prose] :where(h2)::before { width: 6px; left: calc(-1 * (6px + var(--suisou-space-2))); background: var(--suisou-accent); }
[data-suisou-prose] :where(h3)::before { width: 3px; left: calc(-1 * (3px + var(--suisou-space-2))); background: var(--suisou-accent); }
[data-suisou-prose] :where(h4)::before { width: 3px; left: calc(-1 * (3px + var(--suisou-space-2))); background: var(--suisou-line-weak); }
[data-suisou-prose] :where(h5)::before { width: 1px; left: calc(-1 * (1px + var(--suisou-space-2))); background: var(--suisou-line-weak); }

[data-suisou-prose] :where(small) { font-size: var(--suisou-size-14); line-height: var(--suisou-lh-14); }
[data-suisou-prose] :where(strong, b) { font-weight: 700; }

/* ── 縦のリズム ───────────────────────────
   ★見出しは「前を広く、後ろを詰める」。前の話題から離し、次の内容に近づける。
     これはタイポの定石で、段を増やす前にまずこれを当てる。
     おかげで space-4（24px 相当）までで足りていて、新しい段が要らなかった。 */

[data-suisou-prose] > :where(* + *) { margin-block-start: var(--suisou-space-3); }

/* 見出しの前は広く */
[data-suisou-prose] > :where(* + :is(h1, h2, h3, h4, h5, h6)) {
  margin-block-start: var(--suisou-space-4);
}
/* 見出しの後ろは詰める */
[data-suisou-prose] > :where(:is(h1, h2, h3, h4, h5, h6) + *) {
  margin-block-start: var(--suisou-space-2);
}

/* ── 区切りと図 ───────────────────────────── */

[data-suisou-prose] :where(hr) {
  border: 0;
  border-top: 1px solid var(--suisou-line-weak);
}
[data-suisou-prose] > :where(hr),
[data-suisou-prose] > :where(hr + *) { margin-block-start: var(--suisou-space-4); }

/* 図。幅は入れ物に従う。中央寄せはしない ―― 記事でも短文でも
   左端が揃っている方が読みやすく、寄せたい現場は自分で寄せられる */
[data-suisou-prose] :where(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--suisou-radius);
}

/* 定義の並び。用語と説明を2列に置く */
[data-suisou-prose] :where(dl) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--suisou-space-1) var(--suisou-space-3);
}
[data-suisou-prose] :where(dt) { color: var(--suisou-text-sub); font-weight: 700; }

/* ── 短い方 ─────────────────────────────
   panel の中に入るメモ。wixdex のデッキメモがこの形（prose-sm 相当）。
   本文を1段落とし、リズムも1段詰める。 */

[data-suisou-prose~="tight"] {
  font-size: var(--suisou-size-14);
  line-height: calc(var(--suisou-lh-14) + 0.25rem);
}
[data-suisou-prose~="tight"] :where(h1) { font-size: var(--suisou-size-24); line-height: var(--suisou-lh-24); }
[data-suisou-prose~="tight"] :where(h2) { font-size: var(--suisou-size-20); line-height: var(--suisou-lh-20); }
[data-suisou-prose~="tight"] :where(h3) { font-size: var(--suisou-size-16); line-height: var(--suisou-lh-16); }
[data-suisou-prose~="tight"] :where(h4, h5) { font-size: var(--suisou-size-14); line-height: var(--suisou-lh-14); }

[data-suisou-prose~="tight"] > :where(* + *) { margin-block-start: var(--suisou-space-2); }
[data-suisou-prose~="tight"] > :where(* + :is(h1, h2, h3, h4, h5, h6)) {
  margin-block-start: var(--suisou-space-3);
}
[data-suisou-prose~="tight"] > :where(:is(h1, h2, h3, h4, h5, h6) + *) {
  margin-block-start: var(--suisou-space-1);
}