/* scam-swipe: a deck of message cards you judge by swiping, buttons or arrow keys. */
.scam-swipe-root .scam-swipe-play > * + *, .scam-swipe-root .scam-swipe-end > * + * { margin-top: var(--s4); }
.scam-swipe-root .scam-swipe-progress { margin: 0; font: 700 var(--fs-small)/1.3 var(--font-ui); color: var(--ink-2); text-align: center; }
.scam-swipe-root .scam-swipe-deck { position: relative; max-width: 34rem; margin-inline: auto; padding-bottom: 14px; }
.scam-swipe-root .scam-swipe-ghost { position: absolute; z-index: 0; left: 10px; right: 10px; top: 14px; bottom: 7px; border: var(--rule); border-radius: var(--r-md); background: var(--paper); }
.scam-swipe-root .scam-swipe-ghost--2 { left: 20px; right: 20px; top: 28px; bottom: 0; background: var(--mist); }
.scam-swipe-root .scam-swipe-card { position: relative; z-index: 1; gap: var(--s3); min-height: 13rem; padding: var(--s4) var(--s4) var(--s5); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; overflow: hidden; }
.scam-swipe-root .scam-swipe-card.is-moving { cursor: grabbing; border-color: var(--ink); }
.scam-swipe-root .scam-swipe-card.is-right, .scam-swipe-root .scam-swipe-card.is-wrong { background: var(--paper); }
.scam-swipe-root .scam-swipe-enter { animation: scam-swipe-enter .24s var(--ease); }
.scam-swipe-root .scam-swipe-meta { display: flex; align-items: center; gap: var(--s3); }
.scam-swipe-root .scam-swipe-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 700 var(--fs-ui)/1 var(--font-ui); }
.scam-swipe-root .scam-swipe-who { display: grid; min-width: 0; line-height: 1.3; }
.scam-swipe-root .scam-swipe-from { overflow-wrap: anywhere; }
.scam-swipe-root .scam-swipe-kind { font-size: var(--fs-small); color: var(--ink-3); }
.scam-swipe-root .scam-swipe-text { margin: 0; font: 400 var(--fs-ui-lg)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.scam-swipe-root .scam-swipe-mark { padding: 1px 3px; border-radius: var(--r-sm); background: var(--down-wash); color: inherit; box-shadow: inset 0 -2px 0 var(--down); animation: scam-swipe-mark .5s var(--ease) both; }
.scam-swipe-root .scam-swipe-mark--good { background: var(--up-wash); box-shadow: inset 0 -2px 0 var(--up); }
.scam-swipe-root .scam-swipe-stamp { position: absolute; top: 50%; left: 50%; padding: 6px 12px; border: 2px solid currentColor; border-radius: var(--r-sm); background: var(--paper); font: 700 var(--fs-ui-lg)/1 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; }
.scam-swipe-root .scam-swipe-stamp--flag { color: var(--down); transform: translate(-50%, -50%) rotate(-10deg); }
.scam-swipe-root .scam-swipe-stamp--fine { color: var(--up); transform: translate(-50%, -50%) rotate(10deg); }
.scam-swipe-root .scam-swipe-feedback { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: var(--rule); }
.scam-swipe-root .scam-swipe-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; font: 700 var(--fs-ui)/1.35 var(--font-ui); }
.scam-swipe-root .scam-swipe-badge { display: inline-block; padding: 2px 8px; border: 2px solid currentColor; border-radius: var(--r-sm); font: 700 var(--fs-small)/1.2 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; transform: rotate(-4deg); animation: scam-swipe-slam .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.scam-swipe-root .scam-swipe-badge--flag { color: var(--down); }
.scam-swipe-root .scam-swipe-badge--fine { color: var(--up); transform: rotate(4deg); }
.scam-swipe-root .scam-swipe-card.is-right .scam-swipe-verdict { color: var(--up); }
.scam-swipe-root .scam-swipe-card.is-wrong .scam-swipe-verdict { color: var(--down); }
.scam-swipe-root .scam-swipe-why { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink); }
.scam-swipe-root .scam-swipe-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); max-width: 34rem; margin-inline: auto; }
.scam-swipe-root .scam-swipe-answers .w-btn--primary { grid-column: 1 / -1; }
.scam-swipe-root .scam-swipe-answers[hidden] { display: none; }
.scam-swipe-root .scam-swipe-hint { text-align: center; }
.scam-swipe-root .scam-swipe-end { max-width: 34rem; margin-inline: auto; animation: scam-swipe-enter .3s var(--ease); }
.scam-swipe-root .scam-swipe-end .w-readout { justify-items: start; }
.scam-swipe-root .scam-swipe-lesson { margin: 0; font: 400 var(--fs-ui)/1.5 var(--font-ui); }
.scam-swipe-root .scam-swipe-chiplabel { margin-bottom: 0; font: 700 var(--fs-small)/1.4 var(--font-ui); color: var(--ink-2); }
.scam-swipe-root .scam-swipe-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); line-height: 1.6; }
.scam-swipe-root .scam-swipe-chips .scam-swipe-mark { animation: none; }
@keyframes scam-swipe-enter { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes scam-swipe-mark { from { background-color: transparent; box-shadow: none; } }
@keyframes scam-swipe-slam { from { opacity: 0; transform: scale(1.8) rotate(-12deg); } to { opacity: 1; } }
/* keep shared notes small even inside page rules like ".prose p" */
.scam-swipe-root.scam-swipe-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }