/* spot: the reader taps the ones that are the thing, then checks (components/spot.js).
     <figure class="demo spot"><script type="application/json">
       {"items": [{"name": "…", "who": "…", "n": 594, "total": 9459967.73, "yes": false, "why": "…"}],
        "words": {"tap": "Tap the ones that are the restaurant.", "counted": "You’ve counted {picked} as McDonald’s.",
                  "done": "You counted {picked}. The restaurant is {actual}.", "right": " Every one right.",
                  "yes": "McDonald’s: ", "no": "not McDonald’s: "}}
     </script></figure>
   n is payments, total is £. */
.spot-box { padding: 16px; border-radius: var(--radius); background: radial-gradient(circle, rgb(0 0 0 / 0.08) 0.8px, transparent 0.9px) 0 0 / 16px 16px, var(--gray-200); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06); }
.spot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.spot-card { position: relative; display: grid; gap: 4px; align-content: start; min-height: 84px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--surface); color: var(--gray-1200); text-align: left; font: inherit; cursor: pointer; box-shadow: var(--elevation-raised); touch-action: manipulation; transition: box-shadow 150ms ease-out, transform 150ms ease-out, background 150ms ease-out; }
.spot-card:active { transform: scale(0.98); }
.spot-card[aria-pressed=true] { box-shadow: 0 0 0 2px #d9822b, var(--elevation-raised); }
.spot-card:disabled { cursor: default; transform: none; }
.spot-name { font-family: var(--mono); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.spot-meta { font-size: 12px; color: var(--gray-1000); font-variant-numeric: tabular-nums; }
.spot-verdict { font-family: 'Shantell Sans', cursive; font-size: 14px; line-height: 1.3; }
.spot-verdict[hidden] { display: none; }
.spot-card.is-yes .spot-verdict { color: #2f8f5b; }
.spot-card.is-no .spot-verdict { color: var(--gray-1000); }
.spot-card.is-wrong { box-shadow: 0 0 0 2px #c9483b, var(--elevation-raised); }
.spot-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; min-height: 36px; }
.spot-sum { margin: 0; font-size: var(--text-sm); color: var(--gray-1100); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.spot-btns { display: flex; gap: 8px; flex: none; }
.spot-btn { font: inherit; font-size: var(--text-sm); min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--gray-1200); color: var(--gray-100); cursor: pointer; }
.spot-btn.quiet { background: var(--surface); color: var(--gray-1200); box-shadow: var(--elevation-raised); }
.spot-btn:disabled { opacity: .45; cursor: default; }
.spot-btn[hidden] { display: none; }
@media (max-width: 640px) { .spot-box { padding: 10px; } .spot-grid { grid-template-columns: 1fr; } .spot-card { min-height: 0; } .spot-foot { flex-direction: column; align-items: stretch; } .spot-btns { justify-content: flex-end; } }

@media (prefers-reduced-motion: reduce) { .spot * { transition: none !important; } }