/*
 * Paint Color Matcher — the photo, the result card and the palette. Source: sites/dreamy-tools/
 * tools/paint-color-matcher/tool.css (Dash repo); loaded after core/tools.css on this tool only.
 * ⚠️ Every input/select/button stays ≥ 16px (iPhone zooms the page on a smaller field — fenced).
 */
.pm { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pm > * { min-width: 0; }
@media (min-width: 860px) {
  .pm { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 26px; align-items: start; }
  .pm-main { position: sticky; top: 16px; }
}
.pm-stage {
  position: relative; display: flex; justify-content: center; align-items: center; border-radius: 20px; padding: 10px;
  min-height: 240px; background: radial-gradient(120% 90% at 50% 0%, #f6f1e8 0%, #e9e1d4 100%);
}
.pm-frame {
  position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(43, 37, 34, .22); cursor: crosshair; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pm-photo, .pm-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: min(70vh, 820px); }
.pm-mark {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
}
.pm-hint {
  position: absolute; left: 50%; top: 20px; transform: translateX(-50%); margin: 0; z-index: 2; padding: 8px 14px;
  border-radius: 999px; background: rgba(20, 16, 14, .72); color: #fff; font-size: 14.5px; line-height: 1.3; font-weight: 600;
  text-align: center; width: max-content; max-width: calc(100% - 32px); pointer-events: none; transition: opacity .35s;
}
.pm-hint--off { opacity: 0; }
.pm-own {
  position: absolute; right: 20px; bottom: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 700; min-height: 44px; padding: 8px 16px 8px 12px; cursor: pointer;
  border: 0; border-radius: 999px; background: #fffdf9; color: var(--chqt-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.pm-stage input { font-size: 16px; } /* the hidden file picker: an input does not inherit it, and under 16px iPhone zooms */
.pm-own:focus-visible, .pm-chip:focus-visible { outline: 3px solid rgba(215, 157, 50, .8); outline-offset: 2px; }
.pm-stage.pm-busy .pm-frame::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: pm-spin .8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

.pm-side { display: flex; flex-direction: column; gap: 14px; }
.pm-block { background: var(--chqt-cream); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pm-main .pm-block { margin-top: 12px; }
.pm-h { margin: 0; font-weight: 700; font-size: 16px; }
.pm-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--chqt-line); border-radius: 18px; padding: 14px; }
.pm-swatch { flex: 0 0 88px; height: 88px; border-radius: 16px; background: var(--chqt-cream); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pm-name { margin: 0; font-size: clamp(22px, 4.6vw, 28px); font-weight: 700; line-height: 1.15; text-transform: capitalize; }
.pm-code { margin: 4px 0 0; color: var(--chqt-muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.pm-closest { margin: 0; font-size: 15px; }
.pm-closest i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.pm-go { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-palette, .pm-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pm-picks:empty::before { content: "Tap the photo to collect colors."; color: var(--chqt-muted); font-size: 14.5px; }
.pm-chip {
  font: inherit; font-size: 16px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--chqt-line); background: #fff; color: var(--chqt-ink); border-radius: 999px; padding: 4px 12px 4px 4px;
}
.pm-chip i { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.pm-chip small { color: var(--chqt-muted); font-size: 13px; }
.pm-chip[aria-pressed="true"] { border-color: var(--chqt-ink); }
.pm-samples { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-samples .chqt-btn[aria-pressed="true"] { background: var(--chqt-ink); color: #fff; }
.pm .chqt-actions { margin-top: 0; }
@media (max-width: 859px) {
  .chqt[data-tool="paint-color-matcher"] { padding: 12px; }
  .pm-stage { padding: 0; background: none; min-height: 200px; }
  .pm-photo, .pm-canvas { max-height: 60vh; }
  .pm-own { right: 10px; bottom: 10px; }
  .pm-hint { top: 10px; }
  .pm-swatch { flex-basis: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .pm-hint { transition: none; } .pm-stage.pm-busy .pm-frame::after { animation: none; } }