/* Color Converter — one colour card (the preview swatch as a flush row, the
   shared colour well, then HEX / RGB / HSL / HSV as rows with a value field
   and Copy) over the tints & shades card, whose strip is a flush row (layout
   from styles/components/form.css). Only the swatch, the fields and the
   strip are the page's own. */

/* The preview: the current colour, edge to edge. A click opens the well. */
.cc-preview {
  height: 140px;
  cursor: pointer;
}

.cc-fmt {
  flex: 0 0 auto;
  min-width: 36px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.cc-field { flex: 1 1 auto; }
.cc-field > .btn { flex: none; }

/* input.<class>: the shared form rule input[type="…"] in common.css is
   (0,1,1) and would beat a bare class. */
input.cc-input {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.01em;
}
input.cc-input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

/* Tints & shades — eleven stops butted into one strip. */
.cc-scale {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}
.cc-scale__cell {
  height: 56px;
  cursor: pointer;
  position: relative;
  border: none;
  border-radius: 0;
  padding: 0;
  transition: transform 120ms var(--ease-standard);
}
.cc-scale__cell:hover { transform: scaleY(1.12); z-index: 1; box-shadow: var(--shadow-2); }
/* The hex under each stop: always on, so the stops read as values (and touch
   users, who have no hover, still see them); stronger on hover. */
.cc-scale__cell::after {
  content: attr(data-label);
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-1);
  text-align: center;
  font-size: 9px;
  font-family: var(--mono);
  color: var(--cc-label, rgba(255,255,255,0.85));
  opacity: 0.85;
  transition: opacity 120ms var(--ease-standard);
}
.cc-scale__cell:hover::after { opacity: 1; }

@media (max-width: 560px) {
  .cc-preview { height: 110px; }
  /* Narrow stops read as one gradient; taller cells stay tappable. */
  .cc-scale__cell { height: 64px; }
  /* Six hex digits must fit a phone-width stop. */
  .cc-scale__cell::after { font-size: 8px; letter-spacing: -0.06em; }
}