/* BrickPlan.AI Kern · Vergleichsansicht (compare.js). Nutzt die Tokens aus app.css. */
html.cmp-open, html.cmp-open body { overflow: hidden; }
.cmp { position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
.cmp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cmp-tools { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.cmp-lays { display: inline-flex; gap: 4px; }
.cmp-lay[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.cmp-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; padding: 8px; }
.cmp-pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.cmp-pane[hidden] { display: none; }
.cmp-sel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px; }
.cmp-sel select { min-width: 0; width: 100%; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); }
.cmp-body { position: relative; flex: 1; min-height: 200px; border-radius: 8px; overflow: hidden; background: var(--viewer-bg); border: 1px solid var(--border); }
.cmp-view { position: absolute; inset: 0; } .cmp-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cmp-view[hidden], .cmp-img[hidden], .cmp-msg[hidden] { display: none; }
.cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cmp-msg { position: absolute; left: 10px; top: 8px; margin: 0; padding: 2px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.cmp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cmp-ctl .range { display: inline-flex; align-items: center; gap: 6px; }
.cmp-ctl .range[hidden], .cmp-views[hidden] { display: none; }
.cmp-ctl input[type=range] { width: clamp(90px, 14vw, 200px); }
.cmp-views { display: inline-flex; gap: 4px; }
@media (max-width: 760px) {
  .cmp-grid { grid-template-columns: 1fr; overflow-y: auto; align-content: start; }
  .cmp-pane { flex: none; }
  .cmp-body { flex: none; height: 60vh; min-height: 280px; }
}