/* ARI Showcase R7 lane a: the owner loop panel (demo). Tokens only (base.css / the packet theme); the explain card is in r7.css. */
.pill.paid { background: var(--b-ink); color: var(--b-surface); }
.ow-c.paid b { color: var(--b-ink); }
.r7-loop { flex: none; margin: 0 20px 12px; padding: 14px; border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--b-ink) 12%, transparent);
  background: color-mix(in srgb, var(--b-ink) 3%, var(--b-surface)); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.r7-loop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.r7-loop-h b { font: 600 14px/1.2 var(--b-body); }
.r7-loop-p { margin: 0; font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--b-ink) 78%, transparent); }
.r7-loop-p.r7-when { font-weight: 600; }
.r7-loop .r7-explain { animation: r7loopIn .28s ease-out both; }
.r7-loop-act { display: flex; gap: 8px; flex-wrap: wrap; }
.r7-loop-act .ow-b { flex: 1 1 200px; justify-content: center; }
.r7-sms { align-self: stretch; max-width: 460px; padding: 10px 12px; border-radius: var(--r-m); background: var(--b-surface); border: 1px solid color-mix(in srgb, var(--b-ink) 14%, transparent); }
.r7-sms small { display: block; font-size: 12px; color: color-mix(in srgb, var(--b-ink) 60%, transparent); margin-bottom: 3px; }
.r7-sms p { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.r7-lk { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.r7-seg { display: inline-flex; align-self: flex-start; max-width: 100%; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--b-ink) 18%, transparent); overflow: hidden; }
.r7-seg button { min-height: 44px; padding: 0 14px; border: 0; background: var(--b-surface); color: var(--b-ink); font: 600 13.5px/1 var(--b-body); }
.r7-seg button[aria-pressed="true"] { background: var(--b-primary); color: var(--b-primary-ink); }
@keyframes r7loopIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .r7-loop .r7-explain { animation: none; } }
@media (max-width: 700px) { .r7-loop { margin: 0 12px 10px; padding: 12px; } .r7-loop-act .ow-b { flex-basis: 100%; } }
.r7-ex { font-style: normal; font-size: 11.5px; padding: 1px 6px; border-radius: 6px; color: color-mix(in srgb, var(--b-ink) 62%, transparent); background: color-mix(in srgb, var(--b-ink) 7%, transparent); white-space: nowrap; }