/* editor-tools ――― フロント/エディタ共通の実体CSS（1ファイル＝写しのズレが起きない） */

/* 3) 出し分け（フロント）：SP境界は 767px（テーマの sp-scale と同じ折返し） */
@media (max-width:767px){ .dtp-only-pc{ display:none !important; } }
@media (min-width:768px){ .dtp-only-sp{ display:none !important; } }

/* 3) 下余白（★旧仕様の互換用。UIは廃止しWP標準の「サイズ」欄に一本化したが、
      既に dtp-mb-* が付いているページのために残す） */
.dtp-mb-0{ margin-bottom:0 !important; }
.dtp-mb-1{ margin-bottom:10px !important; }
.dtp-mb-2{ margin-bottom:20px !important; }
.dtp-mb-3{ margin-bottom:40px !important; }
.dtp-mb-4{ margin-bottom:80px !important; }

/* 3) エディタ内の表現：出し分け指定のブロックは薄く＋左上にラベル */
.dtp-ed-only-pc, .dtp-ed-only-sp{ position:relative; opacity:.65; }
.dtp-ed-only-pc::before, .dtp-ed-only-sp::before{
	content:"PCのみ";
	position:absolute; top:-10px; left:0; z-index:5;
	font-size:10px; font-weight:700; line-height:1;
	padding:3px 8px; border-radius:4px;
	background:#475569; color:#fff;
}
.dtp-ed-only-sp::before{ content:"スマホのみ"; }

/* 3b) 拡張エディターに差し込む2セレクトの帯 */
.dtp-ext-controls{
	display:flex; gap:24px; flex-wrap:wrap;
	padding:12px 16px; margin:0 0 4px;
	background:#f6f7f7; border-bottom:1px solid #dcdcde;
	font-size:12px; font-weight:600; color:#3a3f45;
}
.dtp-ext-controls label{ display:flex; align-items:center; gap:8px; }
.dtp-ext-controls select{ font-size:13px; }


/* 4) スタイル選択パネル（サムネイル）。★サムネの中身は本物の見出しを縮小したもの＝
   意匠は layouts/block-styles.css が正。ここではタイルの器だけを整える。 */
.dtp-stylepick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 16px; }
.dtp-stylepick__i{
	display:block; width:100%; padding:0; cursor:pointer;
	background:none; border:0; text-align:center;
}
.dtp-stylepick__prev{
	display:flex; align-items:center; justify-content:center;
	height:58px; overflow:hidden; background:#fff;
	border:1px solid #dcdcde; border-radius:4px;
}
.dtp-stylepick__i.is-on .dtp-stylepick__prev{
	border-color:var(--wp-admin-theme-color,#2271b1);
	box-shadow:0 0 0 1px var(--wp-admin-theme-color,#2271b1);
}
/* ミニチュア：飾り（線・地・アイコン）だけを見せる。
   ★文字サイズは 15px に固定＝タイルは「飾りの違い」を比べる場所で、
     見出しの大きさ（--tit-font-size は 32px 等）まで再現するとタイルからはみ出す。
   ★:is(...) で詳細度 (0,1,1)＝インスペクタ既定の 11px に勝たせる。 */
.dtp-stylepick__prev > :is(h1,h2,h3,h4,h5,h6,p){
	margin:0; font-size:15px; line-height:1.5; white-space:nowrap;
	max-width:88%;
}
.dtp-stylepick__lbl{
	display:block; margin-top:4px; font-size:11px; line-height:1.3; color:#1e1e1e;
}
.dtp-stylepick__note{ margin:4px 0 0; font-size:11px; color:#757575; }

/* ★WP標準の「スタイル」欄は隠して、サムネ付きの自前パネルに一本化する
   （同じ設定の入口を2つ出さない）。保存経路＝is-style-* クラスは標準のまま。
   ブロックの supports からは外さない＝他プラグインやテーマ側の判定を壊さないため、
   見えるところだけを畳む。 */
.block-editor-block-inspector .block-editor-block-styles{ display:none; }
.block-editor-block-inspector .block-editor-block-inspector__block-styles{ display:none; }

.dtp-ext-controls__note{ font-size:11px; color:#757575; font-weight:400; }

/* 5) 「サイズ」（余白）の行：数値が見切れず、かつスライダーと重ならないようにする。
   行は [アイコン][数値+単位][スライダー] の flex。標準では3つとも flex:0 1 auto ＝
   「伸びない・縮むだけ」なので、数値欄に min-width を与えると縮めなくなり、
   幅が足りないときにスライダーが**はみ出して数値欄に重なる**（Safari で発生・Chrome では余白8pxで再現せず）。
   → スライダーを flex:1 1 0 ＋ min-width:0 にして「残り幅ぴったり」を使わせる＝原理的に重ならない。 */
.block-editor-block-inspector .components-input-control__container{ min-width:64px; }
.block-editor-block-inspector .components-range-control{ flex:1 1 0; min-width:0; }
.block-editor-block-inspector .components-range-control__wrapper{ min-width:0; }