/* Ratchet Phone (desktop) pop-up: #/phone-pop, a compact call card in a small always-on-top window (about 420 x 620) on the
 * counter computer. No app chrome; the shop design tokens (shop.css), so light and dark follow the computer. One accent. */

body.pp-on { overflow: hidden; }
body.pp-on > :not(.pp-root) { display: none !important; }   /* the shell, the call desk's own card and the companion step aside */
.pp-host { display: none; }

.pp-root { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.4; }

/* ---------- waiting ---------- */
.pp-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px; }
.pp-idle-line { margin: 0; font: 600 18px/1.25 var(--font-display); color: var(--ink-2); }
.pp-fine { margin: 0; font-size: 13px; color: var(--ink-3); }
.pp-breath { width: 12px; height: 12px; border-radius: 50%; background: var(--green); animation: pp-breath 3.2s ease-in-out infinite; }
@keyframes pp-breath { 0%, 100% { box-shadow: 0 0 0 0 var(--green-soft); opacity: .65; } 50% { box-shadow: 0 0 0 10px transparent; opacity: 1; } }

/* ---------- a call ---------- */
.pp-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pp-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--hair); background: var(--surface); }
.pp-head-top { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.pp-badge { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pp-badge.s-ringing { color: var(--accent); }
.pp-badge.s-answered { color: var(--green); }
.pp-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pp-badge.s-ringing .pp-dot { animation: pp-ring 1s ease-in-out infinite; }
@keyframes pp-ring { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 7px var(--accent-soft); } }
.pp-src { margin-left: auto; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
  background: var(--fill); border-radius: 999px; padding: 2px 8px; }
.pp-who { margin-top: 6px; font: 650 21px/1.2 var(--font-display); letter-spacing: -0.015em; }
.pp-number { margin-top: 2px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pp-others { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-other { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hair-strong); background: var(--surface-2); color: var(--accent); cursor: pointer; }

.pp-sec { padding: 10px 16px; }
.pp-talk { flex: 1; min-height: 96px; display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); }
.pp-turns { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.pp-turn { display: grid; grid-template-columns: 74px 1fr; gap: 8px; font-size: 13.5px; }
.pp-turn.is-partial .pp-text { color: var(--ink-2); }
.pp-speaker { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-top: 1px; }
.pp-turn.sp-caller .pp-speaker { color: var(--accent); }
.pp-turn.sp-ai .pp-speaker { color: var(--green); }
.pp-empty { margin: 0; font-size: 13px; color: var(--ink-3); }

.pp-rows { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; max-height: 40vh; overflow-y: auto; }
.pp-rows dt { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-top: 2px; }
.pp-rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; }
.pp-val { flex: 1 1 auto; min-width: 0; }
.pp-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; background: var(--fill); color: var(--ink-2); }
.pp-rows dd.is-saved .pp-chip { background: var(--green-soft); color: var(--green); }
.pp-rows dd.is-held .pp-chip { background: var(--accent-soft); color: var(--accent); }
.pp-rows dd.is-needed .pp-chip { background: var(--amber-soft); color: var(--amber); }
.pp-lines { flex-basis: 100%; list-style: none; margin: 2px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.pp-lines li { display: flex; justify-content: space-between; gap: 8px; }

.pp-foot { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--hair); background: var(--surface); }
.pp-foot button { font: 600 13.5px/1 var(--font); padding: 9px 14px; border-radius: 10px; border: 1px solid var(--hair-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.pp-foot .pp-full { flex: 1; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pp-foot .pp-pin.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pp-foot button:focus-visible, .pp-other:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pp-breath, .pp-badge.s-ringing .pp-dot { animation: none; } }

/* Batch 31 §4 (stream B, the shop line): the pop already reads in the approved look (white, upright names, the accent
   action); its buttons take the shared square ends. The SEMA booth's copy changes only through its own release. */
.pp-foot button, .pp-other { border-radius: var(--r-s, 6px); }