/* ============================================================
   image-color-kit.css - shared UI for the image and URL color
   extraction tools ONLY (palette-from-image, image-color-picker,
   dominant-color-extractor, color-scheme-stealer,
   color-distribution-analyzer, palette-from-url, brand-colors).
   Pairs with assets/js/image-color-kit.js. Plain source file,
   deployed as-is (no .min copy).
   ============================================================ */

/* The hidden attribute must win over component display rules below. */
[hidden] { display: none !important; }

/* ---------- Upload dropzone ---------- */
.ick-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem;
  min-height: 8.5rem;
  padding: 1.25rem 1rem;
  border: 2px dashed #c7d2fe; border-radius: .75rem;
  background: #f8faff; color: #374151;
  text-align: center; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ick-drop:hover, .ick-drop.is-dragover { border-color: #6366f1; background: #eef2ff; }
.ick-drop:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.ick-drop__icon { font-size: 1.75rem; color: #6366f1; line-height: 1; }
.ick-drop__title { margin: 0; font-weight: 600; font-size: .9375rem; color: #1f2937; }
.ick-drop__hint { margin: 0; font-size: .8125rem; color: #6b7280; }
.ick-drop kbd {
  padding: 0 .3rem; border: 1px solid #d1d5db; border-bottom-width: 2px; border-radius: .25rem;
  background: #fff; font: inherit; font-size: .75rem;
}
.ick-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- URL row ---------- */
.ick-url { display: flex; gap: .5rem; }
.ick-url .input { flex: 1 1 auto; min-width: 0; }
.ick-url .button { flex: none; }

/* ---------- Messages ---------- */
.ick-error {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .75rem; padding: .65rem .75rem;
  border: 1px solid #fecaca; border-radius: .5rem;
  background: #fef2f2; color: #991b1b;
  font-size: .875rem; line-height: 1.45;
}
.ick-error[hidden] { display: none; }
.ick-error > i { margin-top: .15rem; }
.ick-error__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ick-error__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin: -.2rem -.25rem 0 0;
  border: 0; border-radius: .375rem; background: transparent; color: inherit; cursor: pointer;
}
.ick-error__close:hover { background: #fee2e2; }
.ick-error__close:focus-visible { outline: 2px solid #b91c1c; outline-offset: 1px; }
.ick-note {
  margin: .75rem 0 0; padding: .55rem .75rem;
  border: 1px solid #bfdbfe; border-radius: .5rem;
  background: #eff6ff; color: #1e40af; font-size: .8125rem; line-height: 1.45;
}
.ick-note[hidden] { display: none; }
.ick-muted { font-size: .8125rem; color: #6b7280; line-height: 1.5; }
.ick-file-meta { margin: .5rem 0 0; font-size: .8125rem; color: #4b5563; overflow-wrap: anywhere; }

/* ---------- Preview stage ---------- */
.ick-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 15rem;
  border-radius: .75rem; overflow: hidden;
  background-color: #f3f4f6;
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.ick-stage.is-dragover { box-shadow: inset 0 0 0 3px #6366f1; }
.ick-stage__img { display: block; max-width: 100%; max-height: min(60vh, 32rem); height: auto; }
.ick-stage__frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.ick-empty {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2.5rem 1rem; text-align: center; color: #6b7280; font-size: .9375rem;
}
.ick-empty > i { font-size: 2.25rem; color: #a5b4fc; }
.ick-empty p { margin: 0; max-width: 32rem; }
.ick-stage .ick-empty { background: rgba(255, 255, 255, .88); border-radius: .75rem; margin: 1rem; }
.ick-loading {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  background: rgba(255, 255, 255, .86); color: #374151; font-size: .9375rem;
}
.ick-loading[hidden] { display: none; }
.ick-spinner {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 4px solid #e5e7eb; border-top-color: #4f46e5;
  animation: ick-spin .8s linear infinite;
}
@keyframes ick-spin { to { transform: rotate(360deg); } }

/* On-image markers (where each palette color sits in the photo) */
.ick-marker {
  position: absolute; z-index: 2;
  width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; padding: 0;
  border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .55), 0 2px 6px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .15s ease;
}
.ick-marker:hover, .ick-marker:focus-visible { transform: scale(1.25); outline: none; box-shadow: 0 0 0 2px #4f46e5, 0 2px 6px rgba(0, 0, 0, .35); }
.ick-markers-hidden .ick-marker { display: none; }

/* ---------- Proportion strip ---------- */
.ick-strip { display: flex; height: 3rem; border-radius: .625rem; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.ick-strip > button {
  flex: 1 1 0; min-width: 6px; padding: 0; border: 0; cursor: pointer;
  transition: flex-grow .2s ease;
}
.ick-strip > button:hover { flex-grow: 1.6; }
.ick-strip > button:focus-visible { outline: 3px solid #4f46e5; outline-offset: -3px; }

/* ---------- Swatch tiles ---------- */
.ick-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .85rem; }
.ick-tile {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid #e5e7eb; border-radius: .75rem; overflow: hidden; background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.ick-tile:hover { box-shadow: 0 6px 18px rgba(17, 24, 39, .1); transform: translateY(-2px); }
.ick-tile__swatch {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  min-height: 6.5rem; width: 100%; padding: .5rem .6rem;
  border: 0; text-align: left; cursor: pointer; font: inherit;
}
.ick-tile__swatch:focus-visible { outline: 3px solid #4f46e5; outline-offset: -3px; }
.ick-tile__hex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: .9375rem; letter-spacing: .02em; }
.ick-tile__pct { font-size: .75rem; font-weight: 700; opacity: .9; }
.ick-tile__body { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .65rem .65rem; }
.ick-tile__name { font-size: .8125rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.1em; }
.ick-tile__vals { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; color: #4b5563; overflow-wrap: anywhere; }
.ick-tile__row { display: flex; align-items: center; justify-content: space-between; gap: .25rem; flex-wrap: wrap; }
.ick-tile__actions { display: flex; align-items: center; gap: .125rem; margin-left: auto; }
.ick-tile__info {
  position: absolute; top: .4rem; right: .4rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #374151; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.ick-tile__info:hover { background: #fff; color: #111827; }
.ick-tile__info:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }

/* WCAG badges */
.ick-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.ick-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .4rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.ick-badge.is-pass { background: #dcfce7; color: #166534; }
.ick-badge.is-fail { background: #fee2e2; color: #991b1b; }
.ick-badge.is-info { background: #eef2ff; color: #3730a3; }
.ick-badge__ink { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }

/* Icon-only buttons (copy / open) inside tiles and rows */
.ick-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: .375rem; background: transparent; color: #6b7280;
  cursor: pointer; font-size: .9rem; text-decoration: none;
}
.ick-icon-btn:hover { background: #f3f4f6; color: #111827; }
.ick-icon-btn:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }

/* Example chips */
.ick-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ick-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2rem; padding: .3rem .7rem;
  border: 1px solid #e5e7eb; border-radius: 999px; background: #f9fafb;
  color: #374151; font: inherit; font-size: .8125rem; cursor: pointer;
}
.ick-chip:hover { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.ick-chip:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }

.ick-field-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ick-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: #374151; cursor: pointer; line-height: 1.4; }
.ick-check input { width: 1.05rem; height: 1.05rem; margin-top: .1rem; flex: none; accent-color: #4f46e5; }

@media (pointer: coarse) {
  .ick-icon-btn, .ick-tile__info, .ick-error__close { width: 2.75rem; height: 2.75rem; }
  .ick-chip { min-height: 2.75rem; }
  .ick-marker { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; }
  .ick-tiles .copy-btn, .ick-rows .copy-btn, .ick-values .copy-btn { min-width: 2.75rem; min-height: 2.75rem; }
  .ick-check { min-height: 2.75rem; align-items: center; }
  .ick-check input { margin-top: 0; }
}
@media (max-width: 480px) {
  .ick-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ick-tile__swatch { min-height: 5.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ick-spinner { animation: none; border-top-color: #a5b4fc; }
  .ick-tile, .ick-tile:hover, .ick-marker, .ick-strip > button { transition: none; transform: none; }
}