/* Edit Image Colors — tool-local styles (site.css tokens only, no hard-coded colours) */

.icx-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .75rem;
}
.icx-toolbar .switch { font-size: .88rem; }

.icx-panel-top { margin-bottom: .5rem; }
.icx-panel-top .step { margin: 0; }

/* Stage: shrink-wraps to the rendered canvas box so the overlay matches it exactly.
   touch-action: pan-y (not none) so an up/down swipe over the photo still scrolls the page — tapping
   to pick a colour is a plain click, and compareSlider's own knob/drag handling doesn't need more. */
.icx-stage {
  position: relative; display: inline-block; line-height: 0; max-width: 100%; touch-action: pan-y;
}
.icx-stage > canvas {
  display: block; max-width: 100%; max-height: min(60vh, 640px); width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 2px 12px rgb(16 24 40 / .12);
}
.icx-stage[data-picking="true"] canvas { cursor: crosshair; }
.icx-stage > canvas.icx-hold-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  object-fit: contain; opacity: 0; transition: opacity .1s ease; box-shadow: none; pointer-events: none;
}
.icx-stage.is-holding > canvas.icx-hold-canvas { opacity: 1; }
.icx-stage .compare { display: block; }

/* Filter strip */
.icx-filmstrip {
  display: flex; gap: .6rem; overflow-x: auto; padding: .25rem .1rem .75rem; margin: -.1rem -.1rem .25rem;
  scrollbar-width: thin;
}
.icx-filter {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: none; border: 0; padding: 0; cursor: pointer; width: 68px;
}
.icx-filter-thumb {
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--surface-sunken);
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border); transition: box-shadow .15s var(--ease), transform .15s var(--ease-spring);
  display: block;
}
.icx-filter-thumb canvas { display: block; width: 100%; height: 100%; }
@media (hover: hover) { .icx-filter:hover .icx-filter-thumb { transform: translateY(-2px); } }
.icx-filter[aria-pressed="true"] .icx-filter-thumb { box-shadow: 0 0 0 2.5px var(--primary); }
.icx-filter-label {
  font-size: .76rem; font-weight: 600; color: var(--text-soft); text-align: center; line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icx-filter[aria-pressed="true"] .icx-filter-label { color: var(--primary); }

.icx-group-label { font-weight: 650; font-size: .9rem; margin: 0 0 .35rem; }

.icx-picker-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.icx-picker-values { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.icx-swatch {
  width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 3px var(--surface);
  background: var(--surface-sunken);
}
.icx-color-input {
  width: 42px; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}

@media (max-width: 640px) {
  .icx-filter { width: 58px; }
  .icx-filter-thumb { width: 54px; height: 54px; }
}

@media (pointer: coarse) {
  .icx-color-input { width: 48px; height: 44px; }
}