/* Before / After 比較スライダー生成 固有のCSS（ツールの画面は接頭辞 ba-）
   ※ 出力するスライダー本体のCSS（接頭辞 bacmp-）は app.js の中にあり、プレビュー時に <style> として差し込む */

.ba-drops { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr); }
.ba-drop { position: relative; min-height: 140px; }
.ba-thumb { display: block; max-width: 100%; max-height: 120px; width: auto; height: auto; border-radius: 4px; margin-bottom: 4px; }
.ba-top-actions { margin: 0 0 16px; }

.ba-mismatch .tk-field:last-child { margin-bottom: 0; }
.ba-color { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--tk-border-strong); border-radius: var(--tk-radius-sm); background: var(--tk-surface); cursor: pointer; }

.ba-radios { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ba-radios .tk-check { margin: 0; }
.ba-radios--stack { flex-direction: column; margin-bottom: 10px; }

.ba-range { width: 100%; accent-color: var(--tk-accent); }
.ba-num { max-width: 9em; }

.ba-preview { margin: 0 0 8px; }
.ba-preview:empty { display: none; }
.ba-howto { margin: 8px 0 0; }

.ba-assets-help { margin: -4px 0 10px; }
.ba-code { min-height: 260px; font-family: var(--tk-mono); font-size: 12px; line-height: 1.5; white-space: pre; overflow: auto; }

@media (min-width: 768px) {
  .ba-drops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}