/* kit/try-on-phone/try-on-phone.css — ONE HOME: Shared/kit/try-on-phone/. 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: --tryphone-* (set these to steer this piece alone) → the shared token names the games
   use (--paper, --ink, --accent, …) → the system's own colours. The only colour literals are the QR code's
   own black and white, in qr.js: phone cameras read dark on light most reliably, whatever the page's look. */

.ktp {
  --kp-bg: var(--tryphone-bg, var(--paper, Canvas));
  --kp-bg-2: var(--tryphone-bg-2, var(--paper-2, color-mix(in srgb, var(--kp-bg) 92%, var(--kp-ink))));
  --kp-ink: var(--tryphone-ink, var(--ink, CanvasText));
  --kp-soft: var(--tryphone-ink-soft, var(--ink-soft, color-mix(in srgb, var(--kp-ink) 72%, var(--kp-bg))));
  --kp-line: var(--tryphone-line, var(--line, color-mix(in srgb, var(--kp-ink) 22%, transparent)));
  --kp-accent: var(--tryphone-accent, var(--accent, Highlight));
  --kp-warn: var(--tryphone-warn, var(--warn, var(--kp-accent)));
  --kp-radius: var(--tryphone-radius, var(--radius, 10px));
  --kp-font: var(--tryphone-font, var(--font-body, inherit));
  --kp-edge: var(--tryphone-edge, 16px);
  --kp-z: var(--tryphone-z, 1000);
  --kp-shadow: var(--tryphone-shadow, none);
  position: relative;
  display: inline-block;
  font-family: var(--kp-font);
  color: var(--kp-ink);
  font-size: calc(1rem * var(--text-scale, 1));
  line-height: 1.3;
}
.ktp [hidden] { display: none !important; }
.ktp *, .ktp *::before, .ktp *::after { box-sizing: border-box; }
.ktp svg { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the one button (and, on a phone, the small ⓘ beside it) ---------- */
.ktp-row { display: inline-flex; align-items: center; gap: 4px; }
.ktp-btn, .ktp-info {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; font: inherit; color: var(--kp-ink); background: var(--kp-bg);
  border: 1px solid var(--kp-line); border-radius: var(--kp-radius); box-shadow: var(--kp-shadow); cursor: pointer;
}
.ktp-btn { padding: 6px 14px; text-align: start; }
.ktp-info { padding: 0; border-color: transparent; background: transparent; }
.ktp-btn:hover, .ktp-open .ktp-btn, .ktp-info:hover { background: var(--kp-bg-2); }
.ktp-icon { display: inline-grid; place-items: center; color: var(--kp-accent); }
.ktp-info svg { color: var(--kp-soft); }
.ktp-btn-label { overflow-wrap: anywhere; }

/* ---------- the floating things: beside the button, never over it ---------- */
.ktp-pop {
  position: absolute; z-index: var(--kp-z);
  top: calc(100% + 8px); inset-inline-end: 0;
  width: min(21rem, calc(100vw - 2 * var(--kp-edge)));
  padding: 12px; background: var(--kp-bg); color: var(--kp-ink);
  border: 1px solid var(--kp-line); border-radius: var(--kp-radius); box-shadow: var(--kp-shadow, none);
}
.ktp-pop[data-place="up"] { top: auto; bottom: calc(100% + 8px); }
.ktp-tip { width: min(19rem, calc(100vw - 2 * var(--kp-edge))); pointer-events: none; }   /* decoration lets clicks through */
.ktp-menu { width: auto; min-width: 12rem; padding: 4px; }
.ktp-card { display: grid; gap: 12px; }
.ktp-card:focus { outline: none; }

.ktp-title { margin: 0; font-size: 1.05em; font-weight: 600; line-height: 1.25; }
.ktp-tip .ktp-title { margin-bottom: 6px; }
.ktp-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ktp-perks li { position: relative; padding-inline-start: 1.5em; overflow-wrap: anywhere; }
.ktp-perks li::before {                       /* a tick drawn by CSS, no emoji */
  content: ""; position: absolute; inset-inline-start: 0.35em; top: 0.3em; width: 0.4em; height: 0.7em;
  border: solid var(--kp-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ktp-qr svg { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto; border-radius: 4px; stroke: none; }
.ktp-scan, .ktp-steps, .ktp-note, .ktp-msg { margin: 0; overflow-wrap: anywhere; }
.ktp-scan { color: var(--kp-soft); font-size: 0.92em; text-align: center; }
.ktp-note { padding: 8px 10px; border-inline-start: 4px solid var(--kp-warn); }
.ktp-msg:empty { display: none; }
.ktp-bad { padding: 8px 10px; border-inline-start: 4px solid var(--kp-warn); }

.ktp-addr { display: flex; gap: 8px; align-items: stretch; }
.ktp-url {
  flex: 1; min-width: 0; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 0.9em;
  color: var(--kp-ink); background: var(--kp-bg-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
}
.ktp-copy, .ktp-close {
  min-height: 44px; min-width: 44px; padding: 6px 14px; font: inherit; color: var(--kp-ink);
  background: var(--kp-bg-2); border: 1px solid var(--kp-line); border-radius: var(--kp-radius); cursor: pointer;
}
.ktp-copy:hover, .ktp-close:hover { border-color: var(--kp-accent); }
.ktp-link {                                    /* the small, quiet ones: hide, install here */
  min-height: 44px; padding: 6px 4px; font: inherit; font-size: 0.9em; color: var(--kp-soft);
  background: none; border: 0; text-decoration: underline; text-align: start; cursor: pointer;
}
.ktp-link:hover { color: var(--kp-ink); }
.ktp-here { justify-self: start; }
.ktp-menu .ktp-link { display: block; width: 100%; padding: 6px 12px; text-decoration: none; color: var(--kp-ink); font-size: 1em; }
.ktp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ktp :focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }

/* a card comes in with a short slide; with reduced motion it is simply there */
.ktp[data-motion="slide"] .ktp-card.ktp-in { animation: ktp-in 160ms ease-out; }
@keyframes ktp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ktp .ktp-card { animation: none !important; } }
.ktp[data-motion="calm"] .ktp-card { animation: none !important; }