/* Color Palette Extractor — swatch grid. */

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.palette-swatch {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 110px;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.5;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.palette-swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.palette-swatch span {
  display: block;
  padding: 2px 10px;
  /* Dark text on a translucent white band reads over any swatch color;
     the band also keeps the two lines aligned at the bottom. */
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
}

.palette-swatch .swatch-hex { font-weight: 700; padding-top: 5px; }
.palette-swatch .swatch-pct { padding-bottom: 5px; font-size: 0.78rem; }