/**
 * tools-embed.css — ツールをWordPressの固定ページ本文（.entry-content）へ埋め込むときだけ必要な、
 * 親テーマCocoon・子テーマの「記事用の装飾」を打ち消すためのファイル。
 *
 * なぜ別ファイルなのか
 *   profit-calculator.css（A2）と fee-ledger.css（A3）は
 *   「単独のプロトタイプとして正しい見た目」としてLOCK済み。
 *   WordPressへ埋め込んだときだけ必要な打ち消しを、そのLOCK済みCSSへ混ぜない。
 *   Cocoonが記事装飾を変えたときに、直す場所がこの1ファイルで済むようにする。
 *
 * 読み込み順（重要）
 *   このファイルは必ず profit-calculator.css / fee-ledger.css より **前** に読み込む。
 *   inc/tools.php では wp_enqueue_style の依存配列で順序を保証している。
 *
 * 詳細度の原則（ここを外すと事故る）
 *   打ち消しは「Cocoon側と同じ詳細度」で書き、先に読み込むことで
 *   ・Cocoonには勝つ（同点かつ後勝ち）
 *   ・コンポーネント側には負ける（同点かつコンポーネントが後）
 *   という関係を作る。ここで必要以上に詳細度を上げると、
 *   ツール本来の余白や字下げまで潰れる。
 *   （実際、最初の版で `.fl-root p { margin:0 }` と書いたところ、
 *     .fl-note の行間と .fl-parts の字下げが消えた。打ち消しは最小限にする。）
 *
 * 打ち消している相手（2026-09-12に本番の実CSSを取得して特定・実測）
 *   親 Cocoon 2.9.5
 *     table                                       margin-bottom:20px
 *     table:not(.has-border-color) :where(th,td)  border:1px solid（全周）
 *     table th / table tr:nth-of-type(2n+1)       ヘッダ背景・ゼブラ背景
 *     blockquote                                  背景・全周の枠・padding 1.4em 1.8em
 *     blockquote::before / ::after                装飾の大きな引用符（37px）
 *     .article ul li / .article ol li             margin: 0.2em
 *     .article ul / .article ol（PC幅）            padding-left: 26px
 *     .article dd                                 margin-left: 40px
 *   子テーマ style.css
 *     .entry-content h2                           背景・左4px罫線・padding 13px 18px・角丸
 *     .entry-content h3                           左3px罫線・padding 6px 14px
 *
 * ここには「ツールの見た目」を新しく定義しない。打ち消しだけを書く。
 */

/* ---------- 見出し ----------
 * ツール内の見出しは、記事の見出し装飾（帯・左罫線・角丸）を引き継がない。
 * font-size / margin / border-bottom はコンポーネント側が後から指定して上書きする。 */
.pc-root :is(h1, h2, h3, h4, h5, h6),
.fl-root :is(h1, h2, h3, h4, h5, h6) {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  /* Cocoonの `.article h1〜h6 { line-height: 1.25 }` を打ち消す。
     固定値を入れるとツール側の行間と食い違うので、必ず inherit に戻す。 */
  line-height: inherit;
}

/* ---------- 表 ----------
 * A3の表は「下罫線だけ」で組んである。Cocoonの全周罫線・ゼブラ・下余白を外す。 */
.pc-root table,
.fl-root table {
  margin: 0;
  background: none;
}
.pc-root :is(th, td),
.fl-root :is(th, td) {
  border: 0;
  position: static;
  /* Cocoonはスマホ幅(834px以下)で `table th, table td { font-size: 0.8em }` を当てる。
     継承値は「どんなに詳細度が低くても実際の宣言」に負けるため、
     ここで inherit に戻さないと表だけ10.5pxまで縮んで読めなくなる。 */
  font-size: inherit;
}
.pc-root tr,
.fl-root tr {
  background-color: transparent;
}

/* ---------- 引用（出典の原文） ----------
 * Cocoonは装飾用の大きな “ ” を ::before/::after で足し、背景と枠を付ける。
 * 出典の引用は「原文がそのまま読めること」が目的なので、装飾を外して素に戻す。 */
.pc-root blockquote,
.fl-root blockquote {
  background: none;
  border: 0;
  padding: 0;
  position: static;
}
.pc-root blockquote::before,
.pc-root blockquote::after,
.fl-root blockquote::before,
.fl-root blockquote::after {
  content: none;
}

/* ---------- リスト ----------
 * li の余白は Cocoon が `.article ul li`(詳細度0,1,2) で当ててくるため、
 * こちらも li の親まで書いて同じ詳細度で並べる。
 * ul の左padding も同様にPC幅で 26px が入るので0へ戻す。
 * ※コンポーネント側で ul に字下げを持たせたい場合は
 *   `.fl-root .fl-parts` のように詳細度(0,2,0)で書くこと（margin は素通しなので影響なし）。 */
.pc-root :is(ul, ol),
.fl-root :is(ul, ol) {
  padding-left: 0;
}
.pc-root ul li,
.pc-root ol li,
.fl-root ul li,
.fl-root ol li {
  margin: 0;
}

/* ---------- 定義リスト ---------- */
.pc-root dd,
.fl-root dd {
  margin-left: 0;
}

/* ---------- ブロック要素の下余白 ----------
 * 子テーマは記事本文の読みやすさのために
 *   .entry-content p  { margin-bottom: 1.4em }
 *   .entry-content ul, .entry-content ol { margin-bottom: 1.4em }
 * を当てている。これは「文章」には正しいが、カードの中の1行注記に1.4emが付くと
 * カード高さが約17%伸びてスマホで無駄にスクロールが増える。
 *
 * 打ち消すのは **margin-bottom だけ** にする。
 * ショートハンド（margin: 0）で潰すと、コンポーネント側の margin-top まで消えて
 * 行間が詰まりすぎる（最初の版で実際にそうなった）。
 * 上方向の間隔はコンポーネントの margin-top がそのまま担当する。 */
.pc-root :is(p, ul, ol, dl, dd, blockquote, figure),
.fl-root :is(p, ul, ol, dl, dd, blockquote, figure) {
  margin-bottom: 0;
}

/* ---------- 埋め込み時の外枠 ----------
 * 単独プロトタイプでは .pc-root / .fl-root が画面いっぱいの面だったが、
 * 記事本文の中では前後の本文との間隔だけを持たせる。 */
.sail-tool {
  margin: 28px 0;
}
