/* Cross-tool responsive refinements. Grid column counts live with their
   components (common.css / home-grid.css); this file only holds shared
   small-screen polish. */

@media (max-width: 640px) {
  .paletier-tool-shell,
  .paletier-tool-extra { gap: 14px; }

  .pct-result-grid { grid-template-columns: 1fr; }

  .pct-swatch { grid-template-columns: 38px minmax(0, 1fr) auto; }

  /* Long values stay inside cards instead of widening the page. */
  .pct-mono {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Keep the first input area near the top: the tool hero shrinks and
     the form panel overlaps it sooner (spec 10). */
  .paletier-tool-hero { min-height: 240px; }
  .paletier-tool-shell { margin-top: -14px; }
}