/* kit/pick-picture/pick-picture.css — ONE HOME: Shared/kit/pick-picture/. Copy unchanged; check-copies.mjs compares copies.
   No look of its own (a-look-of-its-own.md): every colour, font and corner comes from the product.
   Order of lookup: --pickpic-* (steer this piece alone) → the shared token names (--paper, --ink, --accent …) →
   the system's own colours. Buttons are 44 px tall and wrap, so whole names show at phone width. */

.kpp-host { position: relative; }
.kpp {
  --kq-bg: var(--pickpic-bg, var(--paper, Canvas));
  --kq-bg-2: var(--pickpic-bg-2, var(--paper-2, color-mix(in srgb, var(--kq-bg) 92%, var(--kq-ink))));
  --kq-ink: var(--pickpic-ink, var(--ink, CanvasText));
  --kq-soft: var(--pickpic-ink-soft, var(--ink-soft, color-mix(in srgb, var(--kq-ink) 72%, var(--kq-bg))));
  --kq-line: var(--pickpic-line, var(--line, color-mix(in srgb, var(--kq-ink) 28%, transparent)));
  --kq-accent: var(--pickpic-accent, var(--accent, Highlight));
  --kq-radius: var(--pickpic-radius, var(--radius, 10px));
  --kq-font: var(--pickpic-font, var(--font-body, inherit));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px; text-align: center;
  font-family: var(--kq-font); color: var(--kq-ink);
  font-size: calc(1rem * var(--text-scale, 1)); line-height: 1.3;
  border: 2px dashed var(--kq-line); border-radius: var(--kq-radius);
}
.kpp *, .kpp *::before, .kpp *::after { box-sizing: border-box; }
.kpp [hidden] { display: none !important; }
.kpp-say { margin: 0; }
.kpp-or { color: var(--kq-soft); }
.kpp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kpp-btn {
  font: inherit; color: inherit; min-height: 44px; min-width: 44px; padding: 6px 14px; cursor: pointer;
  background: var(--kq-bg-2); border: 1px solid var(--kq-line); border-radius: var(--kq-radius);
  white-space: normal; overflow-wrap: anywhere;
}
.kpp-btn:hover { border-color: var(--kq-accent); }
.kpp-btn:focus-visible { outline: 3px solid var(--kq-accent); outline-offset: 2px; }
.kpp-note { margin: 0; min-height: 0; color: var(--kq-soft); }
.kpp-note:empty { display: none; }
/* a drag that may carry a fitting file is over the place: it says what it will do; with reduced motion nothing eases */
.kpp-host.kpp-over .kpp { border-color: var(--kq-accent); background: color-mix(in srgb, var(--kq-accent) 12%, var(--kq-bg)); }
@media (prefers-reduced-motion: no-preference) { .kpp { transition: border-color .15s, background-color .15s; } }