/*
  🔗 Link with ChoreBoy? (linkask.js): BuckBoy's and ChoreBoy's icons with a 🔗 between them, what
  linking does, and two buttons, in the app's own modal. Motion follows ⚙️ Settings → ✨ Animations
  (html[data-fx]) and the device's reduced motion: full, the icons come together and the 🔗 pops in;
  subtle, a quick fade; off (or reduced motion), nothing moves.
*/
.linkask-hero { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: .1rem 0 1rem; padding: .9rem; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.linkask-hero img { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .12)); }
.linkask-link { font-size: 1.6rem; line-height: 1; }
.linkask-lede { margin: 0 0 .55rem; color: var(--text-2); }
.linkask-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.linkask-points li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.linkask-points li > span:first-child { flex: 0 0 1.4rem; text-align: center; }
.linkask-points li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.linkask-safe { margin: .7rem 0 0; }
.linkask-foot { margin-top: 1rem; }
.linkask-later { margin: .5rem 0 0; text-align: right; }
@media (max-width: 420px) { .linkask-foot .btn { flex: 1 1 100%; } .linkask-later { text-align: center; } }

@media (prefers-reduced-motion: no-preference) {
  html[data-fx="full"] .linkask-buck { animation: linkask-from-left .45s cubic-bezier(.2, .8, .3, 1.2) both; }
  html[data-fx="full"] .linkask-chore { animation: linkask-from-right .45s cubic-bezier(.2, .8, .3, 1.2) both; }
  html[data-fx="full"] .linkask-link { animation: linkask-pop .35s .3s ease-out both; }
  html[data-fx="full"] .linkask,
  html[data-fx="subtle"] .linkask { animation: linkask-fade .18s ease-out both; }
}
@keyframes linkask-from-left { from { transform: translateX(-1.4rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes linkask-from-right { from { transform: translateX(1.4rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes linkask-pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } to { transform: none; } }
@keyframes linkask-fade { from { opacity: 0; } to { opacity: 1; } }